babel: Vue-server-render throws ERR_REQUIRE_ESM error on importing @babel/runtime

Bug Report

I would like to work on a fix!

Current behavior

Getting this error during runtime:

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/user/page/node_modules/@babel/runtime-corejs2/helpers/esm/arrayWithHoles.js
require() of ES modules is not supported.
require() of /Users/user/page/node_modules/@babel/runtime-corejs2/helpers/esm/arrayWithHoles.js from /Users/user/page/node_modules/vue-server-renderer/build.prod.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename arrayWithHoles.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/user/page/node_modules/@babel/runtime-corejs2/helpers/esm/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1217:13)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Module.require (internal/modules/cjs/loader.js:1090:19)
    at require (internal/modules/cjs/helpers.js:75:18)
    at /Users/user/page/node_modules/vue-server-renderer/build.prod.js:1:77377
    at Object.88c0 (js/main.d22015d4.js:1:174813)
    at n (webpack/bootstrap:33:22)
    at Module.0419 (js/main.d22015d4.js:1:61923)
    at n (webpack/bootstrap:33:22)

@babel/runtime-corejs2 is sub-dependency of my direct dependency @vue/cli-plugin-babel: └─┬ @vue/cli-plugin-babel @3.4.0 └─┬ @vue/babel-preset-app @3.12.1 └── @babel/runtime-corejs2 @7.12.1

Its working fine when I try to override a sub-dependency by doing npm i @babel/runtime-corejs2@7.11.2. After which, npm ls @babel/runtime-corejs2 results this: page@0.2.0 /Users/user/page ├── @babel/runtime-corejs2 @7.11.2 └─┬ @vue/cli-plugin-babel @3.4.0 └─┬ @vue/babel-preset-app @3.12.1 └── @babel/runtime-corejs2 @7.11.2 deduped

This means the problem is with the newly released version of @babel/runtime-corejs2@7.12.1

Sorry, I currently don’t have a minimal repro for my company’s code. I am working on it.

Expected behavior

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

Filename: babel.config.js

module.exports = {
	presets: [
		'@vue/app',
	]
};

Environment


  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.5 - /usr/local/bin/npm
  npmPackages:
    babel-core: 7.0.0-bridge.0 => 7.0.0-bridge.0 
    babel-eslint: 10.0.1 => 10.0.1 
    babel-jest: 23.6.0 => 23.6.0 
    babel-plugin-component: 1.1.1 => 1.1.1 
    eslint: 5.8.0 => 5.8.0

Possible Solution

Additional context

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 16 (9 by maintainers)

Most upvoted comments

guys, this solved the problem in my case,

file “babel.config.js”

module.exports = {
  presets: [
    [
      '@vue/app',
      {
        useBuiltIns: 'entry',
      },
    ],
  ]
}

joaomede on Nov 20, 2020

As a workaround, add VUE_CLI_BABEL_TRANSPILE_MODULES=true to your server renderer build scripts.

--- "build:server": "cross-env WEBPACK_TARGET=node vue-cli-service build",
+++ "build:server": "cross-env WEBPACK_TARGET=node VUE_CLI_BABEL_TRANSPILE_MODULES=true vue-cli-service build",

For more info, see https://github.com/vuejs/vue-cli/issues/6018.

JLHwung on Oct 28, 2020

Here’s a repro repo: https://github.com/sns45/esm-issue To get started. Simply clone, do npm install using node 12, npm run build npm run start

Sorry for all the jargon my repro has.

A super weird thing is: If I comment out this function(which is not even used): https://github.com/sns45/esm-issue/blob/dbdd0071be1651616e3cec11dbcfc488cd5d778d/src/store/modules/cms.es6.js#L39

then it does NOT throw that error. So weird.

sns45 on Oct 28, 2020