[Vite] Noisy error “Module level directives cause errors when bundled, "use client" was ignored.” when running remix vite:build on a project that includes a dependency file which includes the "use client" directive.

[dtinth]

Reproduction

If I got more time, I may submit a PR with a failing test, but for now, here’s an issue.

To reproduce:

git clone https://github.com/dtinth/fewshot
cd fewshot
git checkout 82d6437be436f23c506294998d85a5222501a22d
corepack enable
pnpm install
pnpm run build

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1
    Memory: 53.09 MB / 16.00 GB
    Shell: 3.6.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 21.5.0 - ~/.asdf/installs/nodejs/21.5.0/bin/node
    npm: 10.2.4 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 8.15.4 - /opt/homebrew/bin/pnpm
    bun: 1.0.29 - ~/.bun/bin/bun
  Browsers:
    Brave Browser: 101.1.38.111
    Chrome: 121.0.6167.184
    Edge: 122.0.2365.52
    Safari: 17.2.1
  npmPackages:
    @remix-run/dev: ^2.7.2 => 2.7.2 
    @remix-run/node: ^2.7.2 => 2.7.2 
    @remix-run/react: ^2.7.2 => 2.7.2 
    vite: ^5.1.0 => 5.1.4

Used Package Manager

pnpm

Expected Behavior

Build output should be short. Vite should not complain about "use client" directive.

Note that there is a similar issue in another project.

• Warning with use client directive with Vite TanStack/query#5175

Based on the above issue, @vitejs/plugin-react should suppress this error for us. However, it seems that Remix’s vitePlugin does not come with Vite’s React plugin and implements its own React support.

Perhaps Remix’s Vite plugin should add the warning silencer just like @vitejs/plugin-react? The warning silencer seems to implemented here: https://github.com/vitejs/vite-plugin-react/blob/814ed8043d321f4b4679a9f4a781d1ed14f185e4/packages/plugin-react/src/index.ts#L303-L319

Actual Behavior

I get a wall of warning in the build output that looks like this:

[wKovacs64]

It would be nice if it was handled automatically, but I've been doing this in the meantime:

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      onwarn(warning, warn) {
        // Suppress "Module level directives cause errors when bundled" warnings
        if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
          return;
        }
        warn(warning);
      },
    },
  },
  // your other Vite config stuff...
});

You probably already found something similar, but dropping it here just in case it's helpful for somebody.

[markdalgleish]

Thanks for raising this. Fixed by #8897.

[github-actions]

🤖 Hello there,

We just published version 2.8.0-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[github-actions]

🤖 Hello there,

We just published version 2.8.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[anztrax]

It would be nice if it was handled automatically, but I've been doing this in the meantime:

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    rollupOptions: {
      onwarn(warning, warn) {
        // Suppress "Module level directives cause errors when bundled" warnings
        if (warning.code === "MODULE_LEVEL_DIRECTIVE") {
          return;
        }
        warn(warning);
      },
    },
  },
  // your other Vite config stuff...
});

You probably already found something similar, but dropping it here just in case it's helpful for somebody.

awesome it's works , thanks bro 👍