Proxy css as js through alias

[zhangHongEn]

Describe the bug

ReferenceError: require is not defined

export default defineConfig({
  resolve: {
    alias: {
      "testpkg/b.css": "testpkg/proxy_b_css.js"
    }
  },
  optimizeDeps: {
    needsInterop: [
      "testpkg/proxy_b_css.js"
    ]
  },
  plugins: [vue()],
})

Reproduction

https://github.com/zhangHongEn/vite-wrap-css

Steps to reproduce

pnpm install && pnpm run dev

System Info

System:
    OS: macOS 14.3.1
    CPU: (8) arm64 Apple M2
    Memory: 2.78 GB / 24.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.20.2 - ~/.nvm/versions/node/v18.20.2/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v18.20.2/bin/yarn
    npm: 10.5.0 - ~/.nvm/versions/node/v18.20.2/bin/npm
    pnpm: 9.6.0 - ~/.nvm/versions/node/v18.20.2/bin/pnpm
  Browsers:
    Safari: 17.3.1
  npmPackages:
    @vitejs/plugin-vue: ^5.1.2 => 5.1.4 
    vite: ^5.4.1 => 5.4.7

Used Package Manager

pnpm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[sapphi-red]

optimizeDeps.include needs to be used instead of optimizeDeps.needsInterop.

export default defineConfig({
  resolve: {
    alias: {
      "testpkg/b.css": "testpkg/proxy_b_css.js"
    }
  },
  optimizeDeps: {
    include: [
      "testpkg/proxy_b_css.js"
    ]
  },
  plugins: [vue()],
})

[zhangHongEn]

Proxy is dynamically created during the build process, so I cannot include it in the include file

…

---- Replied Message ---- | From | ***@***.***> | | Date | 09/25/2024 09:29 | | To | vitejs/vite ***@***.***> | | Cc | zhn ***@***.***>, Author ***@***.***> | | Subject | Re: [vitejs/vite] Proxy css as js through alias (Issue #18193) | optimizeDeps.include needs to be used instead of optimizeDeps.needsInterop. exportdefaultdefineConfig({resolve: {alias: {"testpkg/b.css": "testpkg/proxy_b_css.js"}},optimizeDeps: {include: ["testpkg/proxy_b_css.js"]},plugins: [vue()],}) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[zhangHongEn]

I encountered this issue as the Modulu-federation requires sharing CSS used in multiple projects

…

---- Replied Message ---- | From | ***@***.***> | | Date | 09/25/2024 09:29 | | To | vitejs/vite ***@***.***> | | Cc | zhn ***@***.***>, Author ***@***.***> | | Subject | Re: [vitejs/vite] Proxy css as js through alias (Issue #18193) | optimizeDeps.include needs to be used instead of optimizeDeps.needsInterop. exportdefaultdefineConfig({resolve: {alias: {"testpkg/b.css": "testpkg/proxy_b_css.js"}},optimizeDeps: {include: ["testpkg/proxy_b_css.js"]},plugins: [vue()],}) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>

[sapphi-red]

What do you mean by "dynamically created during the build process"?

I guess I need a more complete reproduction.

[zhangHongEn]

I will provide a more comprehensive demo later

…

---- Replied Message ---- | From | ***@***.***> | | Date | 09/25/2024 09:45 | | To | vitejs/vite ***@***.***> | | Cc | zhn ***@***.***>, Author ***@***.***> | | Subject | Re: [vitejs/vite] Proxy css as js through alias (Issue #18193) | What do you mean by "dynamically created during the build process"? I guess I need a more complete reproduction. — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>