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

3 thoughts on “Vue-server-render throws ERR_REQUIRE_ESM error on importing @babel/runtime

  1. 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 vuejs/vue-cli#6018.

  2. guys, this solved the problem in my case,

    file “babel.config.js”

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