The plugin breaks nuxi build

learntheropes commented 10 months ago

Environment

Operating System: Linux
Node Version: v18.17.0
Nuxt Version: 3.7.1
CLI Version: 3.8.0
Nitro Version: 2.6.3
Package Manager: npm@9.6.7
Builder: -
User Config: vite
Runtime Modules: -
Build Modules: -

Reproduction

https://github.com/learntheropes/github-anc6tm
https://stackblitz.com/edit/github-anc6tm But you need to build it.

Describe the bug

In a Nuxt 3 application, vite.config.js is replaced in nuxt.config.js as follows.

import { nodePolyfills } from 'vite-plugin-node-polyfills';

export default defineNuxtConfig({
  vite: {
    plugins: [
      nodePolyfills({
        include: ['buffer', 'util', 'stream', 'crypto'],
      }),
    ],
  },
});

However, the plguin breaks nuxi build as follows :

(inject plugin) rollup-plugin-inject: failed to parse /home/giovanni/Documents/Dev/github-anc6tm/.nuxt/dist/server/server.mjs. Consider restricting the plugin to particular files via options.include

 ERROR  RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)                                                                                      nitro 7:53:52 PM

229:   }
230:   const head = inject(headSymbol);
231:   if (!head && dist.process.env.NODE_ENV !== "production")
                         ^
232:     console.warn("Unhead is missing Vue context, falling back to shared context. This may have unexpected results.");
233:   return head || getActiveHead();

 ERROR  Unexpected token (Note that you need plugins to import files that are not JavaScript)                                                                                                         7:53:52 PM

  at error (node_modules/rollup/dist/es/shared/node-entry.js:2287:30)
  at Module.error (node_modules/rollup/dist/es/shared/node-entry.js:13726:16)
  at Module.tryParse (node_modules/rollup/dist/es/shared/node-entry.js:14457:25)
  at Module.setSource (node_modules/rollup/dist/es/shared/node-entry.js:14058:39)
  at ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/node-entry.js:24623:20) 

 ERROR  Unexpected token (Note that you need plugins to import files that are not JavaScript)

Accordingly to Nuxt devs, is a plugin issue: https://github.com/nuxt/nuxt/issues/23091#issuecomment-1712098697

davidmyersdev commented 10 months ago

Hey there, @learntheropes. 👋 It looks like this is due to the global process object being polyfilled. You can use the globals config option to disable it, and that appears to fix the issue as far as I can tell. Here is what that looks like in your config.

import { nodePolyfills } from 'vite-plugin-node-polyfills'

export default defineNuxtConfig({
  vite: {
    plugins: [
      nodePolyfills({
        include: ['buffer', 'util', 'stream', 'crypto'],
        globals: {
          process: false,
        },
      }),
    ],
  },
})

For what it's worth, this is likely something that should be handled automatically when the include and exclude options are used, but that is not how they are currently implemented. I'll leave this issue open to track that enhancement.

learntheropes commented 10 months ago

Thank you, @davidmyersdev ! I confirm that this fixed the issue on my project.

daviddomkar commented 10 months ago

Thank you as well. Without this issue, what was going on would never have occurred to me. I would probably add a small note about this to README.md, so others know.

lokinz commented 9 months ago

globals: { process: false, }, Doesn't seem like a solution. I am trying to polyfill process, any ideas?

davidmyersdev commented 8 months ago

@lokinz can you share an example with your use case?

davidmyersdev commented 6 months ago

This has been fixed by #63 and is available in v0.18.0.

paro-paro commented 6 months ago

Hi @davidmyersdev

The new version v0.18.0 seems like a regression since now I cannot even run the nuxt dev server unless I disable the global process option.

globals: { process: false, }, Doesn't seem like a solution. I am trying to polyfill process, any ideas?

As pointed out by @lokinz, not polyfilling the process global in build mode did not seem right to me since that is exactly what I need the plugin to do and I was hoping that the new version fixed it.

My use case:

nuxt + web3auth/modal library

This library needs pollyfils as explained here.

Version 0.17.0 of this plugin was allowing me to run at least the dev server but was failing in build mode as explained in this thread.

Latest version now breaks both dev and build modes throwing:

dev: Missing "./shims/process/" specifier in "vite-plugin-node-polyfills" package [plugin vite:dep-pre-bundle] build: Nuxt Build Error: Missing "./shims/process/" specifier in "vite-plugin-node-polyfills" package

Here is a reproduction

Any help will be appreciated and thanks for the plugin!! 😄

davidmyersdev commented 6 months ago

I really appreciate the reproduction, @paro-paro! It looks like a dependency is trying to import process/ (with a trailing /) rather than process which leads to the error you're seeing. Would you mind opening another issue for this? I will get a fix together soon.

paro-paro commented 6 months ago

Thanks a lot for your quick response @davidmyersdev ! 🙏

Opening a new issue for tracking...

davidmyersdev / vite-plugin-node-polyfills