vue-cli bundling error for extract-files

[koresar]

Here is the error.

 error  in ./node_modules/extract-files/lib/index.mjs

Can't reexport the namespace object from non EcmaScript module (only default export is available)

But v8.0 works fine in node.js 8.

[jaydenseric]

Are you running it in --experimental-modules mode? Are you bundling your app?

[koresar]

Bundling through the latest webpack 4 and latest babel 7.

[jaydenseric]

It works fine with Webpack v4 and Babel v7 via Next.js in apollo-upload-examples… are you sure you don't have some custom resolve config or something?

[koresar]

I have a default vue-cli project.

• vue init my-project - and then select all the options available.
• vue add apollo
  ...

That was the way I created the project. Some steps are missing though.

[jaydenseric]

Let me know what you find, but so far I can't reproduce anything. CRA, Next.js, etc. often do wierd custom stuff under the hood breaking normal Webpack or Node.js behaviors. If it turns out to be a vue-cli bug, I'll close the issue here.

[koresar]

I check the dependency tree - the only project which is using extract-files package is apollo-upload-client. I solved my problem this way: npm i -S apollo-upload-client@8
So, I'm fine.

My understanding is following.

• This module bumped up "extract-files": "^4.0.0"
• The .mjs files of apollo-upload-client are being transpiled. However, it does not transpile its dependencies .mjs files. See https://unpkg.com/[email protected]/lib/

So, my conclusion. This line
https://github.com/jaydenseric/apollo-upload-client/blob/master/src/index.js#L10
tries to load .mjs instead of .js. I have no idea why.

[jaydenseric]

After just a quick search of the vue-cli repo I found this: https://github.com/vuejs/vue-cli/blob/v3.0.4/packages/%40vue/cli-service/lib/config/base.js#L41

Looks like they are setting custom resolve config without accounting for .mjs, which should come first in the resolve order.

[jaydenseric]

Closing because this is a Webpack config issue in vue-cli.

[jaydenseric]

Here is an example of what it should look like: https://github.com/zeit/next.js/blob/7.0.1-canary.0/build/webpack.js#L155

[koresar]

Thanks!

[koresar]

Lol. It closed my issue, even though I did everything they asked.
vuejs/vue-cli#2626

[ScreamZ]

Nice, thanks for reporting, I made a PR on vue-cli to fix this vuejs/vue-cli#2819

[vvision]

Not related to vue-cli ,but had the following error also with ".mjs" added and version ^9.0.0 :

ERROR in ./node_modules/extract-files/lib/index.mjs 1:0-30
Can't reexport the namespace object from non EcmaScript module (only default export is available)
 @ ./node_modules/apollo-upload-client/lib/index.js

Had to downgrade to ^8.0.0 to fix it.

[jaydenseric]

@vvision this package is not using .mjs at all, if you are having issues with extract-files it is better to file an issue in that repo. But I can tell already, you have a misconfigured bundler that is not following the the current Node.js/Webpack resolve algorithm.