fix(webpack): use cjs for emitted webpack files (#395)

packages/meta/src/module.ts

@@ -12,7 +12,7 @@ export default defineNuxtModule({
     const runtimeDir = resolve(__dirname, 'runtime')
 
     // Transpile @nuxt/meta
-    nuxt.options.build.transpile.push('@nuxt/meta', runtimeDir)
+    nuxt.options.build.transpile.push('@nuxt/meta', runtimeDir, '@vueuse/head')
     nuxt.options.alias['@nuxt/meta'] = resolve(runtimeDir, 'index')
 
     // Global meta

packages/nitro/src/compat.ts

@@ -1,6 +1,6 @@
 import fetch from 'node-fetch'
 import { resolve } from 'upath'
-import { readFile, writeFile } from 'fs-extra'
+import { move, readFile, writeFile } from 'fs-extra'
 import { build, generate, prepare } from './build'
 import { getNitroContext, NitroContext } from './context'
 import { createDevServer } from './server/dev'
@@ -78,7 +78,9 @@ export default function nuxt2CompatModule () {
   // Generate mjs resources
   nuxt.hook('build:compiled', async ({ name }) => {
     if (name === 'server') {
-      await writeFile(resolve(nuxt.options.buildDir, 'dist/server/server.mjs'), 'export { default } from "./server.js"', 'utf8')
+      const jsServerEntry = resolve(nuxt.options.buildDir, 'dist/server/server.js')
+      await move(jsServerEntry, jsServerEntry.replace(/.js$/, '.cjs'))
+      await writeFile(jsServerEntry.replace(/.js$/, '.mjs'), 'export { default } from "./server.cjs"', 'utf8')
     } else if (name === 'client') {
       const manifest = await readFile(resolve(nuxt.options.buildDir, 'dist/server/client.manifest.json'), 'utf8')
       await writeFile(resolve(nuxt.options.buildDir, 'dist/server/client.manifest.mjs'), 'export default ' + manifest, 'utf8')

packages/nitro/src/rollup/config.ts

@@ -163,7 +163,10 @@ export const getRollupConfig = (nitroContext: NitroContext) => {
     inline: nitroContext.node === false || nitroContext.inlineDynamicImports,
     globbyOptions: {
       ignore: [
-        'server.js'
+        'client.manifest.mjs',
+        'server.cjs',
+        'server.mjs',
+        'server.manifest.mjs'
       ]
     }
   }))

packages/nitro/src/rollup/plugins/dynamic-require.ts

@@ -53,7 +53,7 @@ export function dynamicRequire ({ dir, globbyOptions, inline }: Options): Plugin
       }
 
       // Scan chunks
-      const files = await globby('**/*.js', { cwd: dir, absolute: false, ...globbyOptions })
+      const files = await globby('**/*.{cjs,mjs,js}', { cwd: dir, absolute: false, ...globbyOptions })
       const chunks = files.map(id => ({
         id,
         src: resolve(dir, id).replace(/\\/g, '/'),

packages/webpack/src/configs/server.ts

@@ -21,7 +21,7 @@ export function server (ctx: WebpackConfigContext) {
 function serverPreset (ctx: WebpackConfigContext) {
   const { config } = ctx
 
-  config.output.filename = 'server.js'
+  config.output.filename = 'server.cjs'
   config.devtool = 'cheap-module-source-map'
 
   config.optimization = {

packages/webpack/src/plugins/vue/server.ts

@@ -82,7 +82,7 @@ export default class VueSSRServerPlugin {
         }
 
         // TODO: Workaround for webpack
-        const serverJS = 'export { default } from "./server.js"'
+        const serverJS = 'export { default } from "./server.cjs"'
         assets['server.mjs'] = {
           source: () => serverJS,
           map: () => null,

packages/webpack/src/plugins/vue/util.ts

@@ -23,7 +23,7 @@ export const validate = (compiler) => {
   }
 }
 
-const isJSRegExp = /\.js(\?[^.]+)?$/
+const isJSRegExp = /\.[cm]?js(\?[^.]+)?$/
 
 export const isJS = file => isJSRegExp.test(file)
 

packages/webpack/src/presets/node.ts

@@ -10,8 +10,10 @@ export function node (ctx: WebpackConfigContext) {
 
   config.output = {
     ...config.output,
-    chunkFilename: '[name].js',
+    chunkFilename: '[name].cjs',
-    libraryTarget: 'commonjs2'
+    library: {
+      type: 'commonjs2'
+    }
   }
 
   config.performance = {