transpileDependencies make commonjs modules conflict with webpack module model

[miaulightouch]

Version

3.0.0-rc.1

Reproduction link

https://gitlab.com/MiausF2E/f2e-todos-cli-demo

Steps to reproduce

1. comment out process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true in babel.config.js
2. yarn serve and take a look in browser console

What is expected?

no error.

What is actually happening?

es6 import conflict with commonjs declaration

---

I had discussed in #1248, but it seems no response if I don't file an issue.

[Akryum]

You can also use transpileDependencies.

[miaulightouch]

@Akryum did you read the repo?
I had set transpileDependencies in vue.config.js already, but It's required to set process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true in babel.config.js to make transpilation work.

without process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true as default, webpack wouldn't require the 'pretty-ms' module properly (because it's required to transpile all modules into commonjs by babel or conflict in webpack when require the 'pretty-ms' module), and throw error when app initializing.

[miaulightouch]

If you had tried the repo, you would see the page is all blank, and console would report error.

what is You can also use transpileDependencies.?
do you mean this line? LOL

[LinusBorg]

I'm not sure and can't find a source right now, but I think I remember that this is a limitation with babel and/or webpack when using es6 modules - when importing a "native" commonjs module, you have to use require(), and can't use import.

Not sure though, will look further into it.

[miaulightouch]

import or require still get the same result.

the problem is I import the vue instance as es6 module but require (even using import syntax) commonjs module inside the vue instance, and it would throw error if module is not passing to webpack directly. (yes, it's passing to babel)

if I require all vue instance/component, the issue may be resolved, but I don't want to.

[LinusBorg]

Ok, ran the production and can verify the behaviour. Not sure why that happens / how to handle it right now.

Sidenote: there are actually two things to consider:

1. When not transpiling to commonjs, you can't use import on a commonjs module.

so this statement;

import prettyMs from 'pretty-ms'

has to be changed to

const prettyMs = require('pretty-ms')

That allows it to compile correctly, but is not the heart of the issue

2. When requiring this module and transpiling, we get this error in the browser:

There is an open issue from early 2017 in the webpack repo about this error here, but it's not clear to me what the status on this is and if it's really / still a bug, an incompatibility or something resolvable in userland.

[miaulightouch]

actually, we still can import commonjs module inside es6 mobules if transpileDependencies is not set.

the problem is babel seems not allowing to mix commonjs with es6 module.