Subscribe on changes!

Cant import on node using native ESModules (.mjs) (3.0.6)

avatar
Mar 1st 2021

Version

3.0.6

Reproduction link

I couldnt figure out a way to make this work with code sandbox or runkit. They don't allow to run node directly. That's why I added a script below for copy/pasting.

Steps to reproduce

mkdir test && cd test
npm i vue@3.0.6
echo "import { toRaw } from 'vue'" > index.mjs
node index.mjs

What is expected?

No error

What is actually happening?

import {toRaw} from 'vue'
        ^^^^^
SyntaxError: Named export 'toRaw' not found. The requested module 'vue' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vue';
const {toRaw} = pkg;

This works in vue 3.0.5 but is broken in vue 3.0.6. Not sure what changed.

My node version is 14.13

avatar
Mar 1st 2021

@LinusBorg Sure thing. Do you know any website where I can execute node scripts as esm modules? I couldn't find any. I tried to make it as reproducible as possible. I just don't know any way to give you a link. Sure - I can create a github repo with 2 files. If that helps?

avatar
Mar 1st 2021

Already deleted my comment as I didn't read your description carefully enough - I still had you mentioning ts-node etc. on discord in my head.

Could reproduce the issue successfully. Pretty dumbfounded though as to what the reason could be.

We didn't really change anything about the build process, and the entry file for cjs which has this module.exports = statement has been in its current form for 2 years. The file it points to, dist/vue.cjs.js has changed minimally, and not in any way concerning the exports.

node docs state:

When importing CommonJS modules, the module.exports object is provided as the default export. Named exports may be available, provided by static analysis as a convenience for better ecosystem compatibility.

https://nodejs.org/api/esm.html#esm_import_statements

My assumption would be that something in the order of instructions in 3.0.6's vue.cjs.js file breaks the mentioned static analysis?

Haven't collected much experience with native ESModule support in node, to be honest.

avatar
Mar 1st 2021

Oh sorry, didn't see that you deleted the comment. I also couldn't figure out what changed. And yes, I mentioned this on discord yesterday. The issue first occurred for me with my ts-node setup but it is the same with node, too. It is super annoying because my server code just stopped working. I went back to 3.0.5 for now and hope that it can be fixed somehow. Don't want to miss out on all the updates :D.

avatar
Mar 1st 2021

I looked into this and it is caused by output change due to bumping Rollup to 2.39.0, which then breaks re-exports static analysis in Node.js, where the static analysis is done by cjs-module-lexer.

I've created an issue in cjs-module-lexer: https://github.com/guybedford/cjs-module-lexer/issues/38

For now we have to pin Rollup to 2.38.

avatar
Mar 1st 2021

Note: we should probably introduce a dedicated Node ESM build and exports field at some point to unblock future Rollup upgrades, however introducing exports can be a risky thing so we need to do it carefully.