The plugin breaks nuxi build

[learntheropes]

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: [email protected]
• 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: nuxt/nuxt#23091 (comment)

[davidmyersdev]

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]

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

[daviddomkar]

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]

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

[davidmyersdev]

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

[davidmyersdev]

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

[paro-paro]

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]

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]

Thanks a lot for your quick response @davidmyersdev ! 🙏

Opening a new issue for tracking...