Support for Nitro/ESM Build

[SmootherSpike]

Environment

Nuxt bridge yarn dev

Reproduction

https://stackblitz.com/edit/github-3fgb91-hpgsnm

Describe the bug

Enabling nitro in the bridge options together with having type="module" in the package.json causes the application to break with the message:

server.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename server.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/projects/github-3fgb91-hpgsnm/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Additional context

Our team is in progress of migrating a nuxt2 project to nuxt3 with the help of nuxt/bridge and we are enabling features step by step

Logs

[nuxt] [request error] [unhandled] [500] require() of ES Module /home/projects/github-3fgb91-hpgsnm/.nuxt/dist/server/server.js not supported.
server.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename server.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/projects/github-3fgb91-hpgsnm/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

  server.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.  
  Instead rename server.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in ./package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).  
  at __node_internal_ (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:36:5406)  
  at new <anonymous> (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:36:4168)  
  at Module._extensions..js (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:54:15284)  
  at Module.load (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:54:13457)  
  at Module._load (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:54:10535)  
  at Module.require (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:54:13775)  
  at i (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:98:2198)  
  at _0x467d5e (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:352:194160)  
  at Object.eval (./.nuxt/dist/server/server.cjs:1:93)  
  at Object.function (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:352:194986)  
  at Module._compile (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:54:14871)  
  at Module._extensions..js (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:54:15550)  
  at Module.load (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:54:13457)  
  at Module._load (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:54:10535)  
  at _0x22151d.executionFunctionOrLineOffset (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:189:2451)  
  at _0x22151d._evaluate (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:352:377764)  
  at _0x22151d._evaluate (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:352:377893)  
  at _0x22151d.evaluate (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:352:376845)  
  at ModuleJob.run (https://github3fgb91hpgsnm-oofy.w-credentialless-staticblitz.com/blitz.dc33e3af.js:181:2390)

[Ttou]

same problem

[wJoenn]

Hey @wattanx 👋 I'm having the same problem too, did you have the time to look into this a bit by any chance ?

Couldn't it be solved by renaming server.js by server.cjs and removing the existing server.cjs ? 🤔

module.exports = require("./server.js")

[medz]

@wJoenn

The solution to this problem is simple. There are currently two methods (choose one):

1. Enable TypeScript and start esbuild, then add the packages that encounter esm/cjs errors to the build.transpile array

2. Enable Vite for compilation

It will be more annoying to continue using webpack. Adding packages that need to be translated depends on how many incompatible esm modules you rely on.

vite is a one-time solution, but vite has a disadvantage that it cannot extract css 👉 #1287

[medz]

There is another way to use esbuild-loader for webpack configuration, but you need to configure a lot of things manually. I used it initially and it worked.

[wJoenn]

Yeah the plan is to enable Vite asap but I need to update some other packages first and Nitro needs to be enabled anyway so I wanted to enable Nitro in one PR and Vite in another. I ended up switching the app to ssr: false because it made sense to do so in our case anyway which fixes the issue but I'll keep your comment in mind if I need to upgrade a SSR app later on, thanks