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

[joaomede]

guys, this solved the problem in my case,

file “babel.config.js”

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

[JLHwung]

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.