Open JLHwung opened 3 years ago
This is also reproducible in the latest version of vue-cli-4. Repo: https://github.com/sns45/esm-issue/tree/vue-cli-4
npm install
npm run build
npm run start
As pointed out by auven here, this can be worked around with babel.config.js
:
module.exports = {
presets: [
// '@vue/cli-plugin-babel/preset'
[
'@vue/cli-plugin-babel/preset',
{
useBuiltIns: 'entry'
}
]
]
}
I doubt this will be helpful to anyone, but just in case:
In my case, the error was not triggered by the inclusion of @vue/cli-plugin-babel
, but by a webpack tapping for piping transpiled coffeescript output through babel, and also only after some recent package upgrade.
Getting similar error on Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: ...t/node_modules/@babel/runtime/helpers/esm/defineProperty.js Any update on this, for me the sugestion didnt fix it (build but get a blank page)
same issue. Any updates? @sodatea
internal/modules/cjs/loader.js:1015
throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /Users/ying/workspace/FEProjects/vue3-node-boilerplate/node_modules/@babel/runtime/helpers/esm/objectSpread2.js
require() of ES modules is not supported.
require() of /Users/ying/workspace/FEProjects/vue3-node-boilerplate/node_modules/@babel/runtime/helpers/esm/objectSpread2.js from /Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.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 objectSpread2.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/ying/workspace/FEProjects/vue3-node-boilerplate/node_modules/@babel/runtime/helpers/esm/package.json.
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1015:13)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.193e (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:4902:18)
at __webpack_require__ (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:21:30)
at Module.f23d (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:65702:22)
at __webpack_require__ (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:21:30)
at Object.3830 (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:14045:24)
at __webpack_require__ (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:21:30)
at Object.d2ac (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:52613:41)
at __webpack_require__ (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:21:30)
at Object.7ad8 (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:29343:15)
at __webpack_require__ (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:21:30)
at Object.c60b (/Users/ying/workspace/FEProjects/vue3-node-boilerplate/dist/node/js/admin.5e0dffa7.js:47138:17) {
code: 'ERR_REQUIRE_ESM'
}
Version
3.4.0
Although I did not verify that whether the issue can be reproduced on latest version, I believe it is reproducible on latest dev branch according to the execution path analysis below.
Reproduction link
https://github.com/sns45/esm-issue
Environment info
Steps to reproduce
visit
http://localhost:8080
What is expected?
undefined is printed to HTML
What is actually happening?
error stack is printed:
Context: https://github.com/babel/babel/issues/12223
Technically it is an integration issue between
@vue/babel-preset-app
andvue-server-renderer
.@vue/babel-preset-app
instructs@babel/transform-runtime
to useesmodules: true
for runtime imports. That means if we have a JS file for example,it will be transformed by babel to
and then transformed by webpack (we specifies
output.library = "commonjs2"
) toWhen the transformed result are
require
d fromvue-server-renderer
, the error will be thrown because "@babel/runtime-corejs2@7.12.1/helpers/esm" is an es module thus meant to beimport
ed only.Workaround: Users can workaround this issue by specifying
VUE_CLI_BABEL_TRANSPILE_MODULES=true
in server build scripts:Suggested Action: I am aware that
vue-server-render
may not support esm soon because vm modules are still experimental as of node.js 15.0. It will be great if@vue/babel-preset-app
can acknowledge the server rendering use cases and avoidesmodules: true
until sever-renderer supports ES module.