Nuxt.js: Update nuxt to work with the new esm import syntax

[b12f]

What problem does this feature solve?

ESM support just dropped in node 13.2.0, removing the need for a lot of babel transpiling.

What does the proposed changes look like?

There is at least one problem right now that is preventing me from using nuxt with node ESM:

Here,

https://github.com/nuxt/nuxt.js/blob/dev/packages/utils/src/resolve.js#L109

nuxt is trying to access require.main, which is not defined when starting a process with esm modules. This throws an error later when trying to access require.main.paths.

Temporary workaround would be to change the line to the following:

const getMainModule = () => require.main || { paths: [] };

And making people explicitly supply the modulesDir option

[pi0]

@b12f Thanks for opening this issue! Actually nuxt was not using babel for ESM support but standard-thing/esm which has almost the same runtime implementation of the node with few enhancements for backward compatibility.

ESM support is not still in LTS and not the entire ecosystem is prepared for that. But could be a good idea start experimenting behind a flag :)

[aldarund]

ESM support is not still in LTS

And it wont be for quite of a time, since node 13 not going to be LTS

[MylesBorins]

We are hoping to backport to 12.x but are not 100% if we'll be able to yet.

[Jamesernator]

As of 12.16.0 the esm library no longer functions due to some backported ES module changes, see here. The library itself seems to be no longer maintained so it's unlikely this'll be fixed upstream.

Because of this anyone using >=12.6.0 can no longer use Nuxt+ESM and must either downgrade their code to commonjs, or downgrade their node version (if their setup supports it, some server setups don't).

[pi0]

@Jamesernator Both CI and locally using (v12.13.1) I can still use ESM syntax for nuxt.config and serverMiddleware. Would you please elaborate more what's not working for you?

[Jamesernator]

locally using (v12.13.1)

This only affects >=12.16, 12.15 and earlier are unaffected.

Would you please elaborate more what's not working for you?

I was helping a friend debug their setup, basically the host auto updated to Node 12.16 which broke the server due to the aformentioned esm issue.

Instead of rewriting to CJS, I suggested trying it with --experimental-modules + "type": "module" in package.json. But this causes an error in Nuxt in the usage of getMainModule (here).

This happens because when the entry point is loaded as ESM process.mainModule is not set and thus getMainModule fails.

Now it's not completely dire because I did manage to find a workaround using createRequire and manually setting process.mainModule to a dummy module.

Given ESM syntax is used in the docs for Nuxt, and standard-things/esm doesn't work in 12.16 and beyond, I think Nuxt should consider supporting the native ESM in Node instead.

[nwittwer]

As @Jamesernator alluded to, after updating to Node v12.16.2 I'm seeing errors in my nuxt.config.js when trying to use export, import, etc. This is after a fresh install of Nuxt (2.12.2).

Configuration:

• Programming language: Javascript
• Package manager: NPM
• UI framework: none
• Server: Express
• Nuxt.js modules: Axios, PWA
• Linting: ESLint, Prettier
• Testing: Jest
• Rendering mode: Universal (SSR)
• Dev tools: jsconfig.json

UPDATE: Actually I'm getting the same issues even with Node 10.x and 12.13.

• Cannot use import statement outside a module
• Unexpected token 'export'

[nwittwer]

Following up from above: in my case the setup was the issue, not Nuxt core.

When using create-nuxt-app with the Express server install option, I run into the aforementioned issues. The template with Express doesn't seem to support ES modules? The nuxt.config.js still uses module.exports and will throw errors if you try to use ES modules.

Anyways, re-installing npx create-nuxt-app _without Express_ fixed it. Tested in multiple versions of Node.

[Tzahile]

So after long time with this issue...
Node v14 is LTS since the end of October, and it has ESM support out-of-the-box (adding "type": "module" in your package.json).
Lacking support for ESM, I encounter a Nuxt Fatal Error when trying to run my nuxt application after adding my express server, which uses esm syntax.

[pi0]

Hi. Just as an update, we are working on next gen server for nuxt3 (backported to nuxt2) which is using RollupJS to bundle server-middleware and natively supports mjs. In the meantime you can migrate from esm to jiti by setting this in nuxt.config:

export default {
  createRequire: 'jiti'
}

Supporting mjs by adding a fallback for require.main would be possible but for serverMiddleware and nuxt.config, we cannot do HMR anymore since esm cache is not exposed.