'vue serve` works `npm run serve` breaks when using deps transpiling

[alexaandru]

Version

3.5.0

Reproduction link

https://github.com/alexaandru/broken

Environment info

  System:
    OS: Linux 4.18 Ubuntu 18.10 (Cosmic Cuttlefish)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
  Binaries:
    Node: 11.11.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.9.0 - /usr/bin/npm
  Browsers:
    Chrome: 72.0.3626.121
    Firefox: Not Found
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0-beta.2 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0-beta.2 
    @vue/babel-preset-app:  3.5.0 
    @vue/babel-preset-jsx:  1.0.0-beta.2 
    @vue/babel-sugar-functional-vue:  1.0.0-beta.2 
    @vue/babel-sugar-inject-h:  1.0.0-beta.2 
    @vue/babel-sugar-v-model:  1.0.0-beta.2 
    @vue/babel-sugar-v-on:  1.0.0-beta.2 
    @vue/cli-overlay:  3.5.0 
    @vue/cli-plugin-babel: ^3.5.0 => 3.5.0 
    @vue/cli-plugin-eslint: ^3.5.0 => 3.5.0 
    @vue/cli-service: ^3.5.0 => 3.5.0 
    @vue/cli-shared-utils:  3.5.0 
    @vue/component-compiler-utils:  2.6.0 
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    bootstrap-vue: >2.0.0-rc => 2.0.0-rc.14 
    eslint-plugin-vue: ^5.0.0 => 5.2.2 
    vue: ^2.6.6 => 2.6.8 
    vue-eslint-parser:  2.0.3 
    vue-functional-data-merge:  2.0.7 
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.0 
    vue-style-loader:  4.1.2 
    vue-template-compiler: ^2.5.21 => 2.6.8 
    vue-template-es2015-compiler:  1.9.1 
  npmGlobalPackages:
    @vue/cli: 3.5.0

Steps to reproduce

1. git clone https://github.com/alexaandru/broken && cd broken
2. vue serve src/main.js # this one works
3. npm run serve # this one breaks (check the browser)

What is expected?

That both vue serve as well as vue-cli-service serve work, and work the exact same way.

What is actually happening?

vue serve works, vue-cli-service serve breaks with "Uncaught ReferenceError: exports is not defined" when attempting to view the app in the browser.

---

The exact same logic applies to the build command.

The repo contains two commits only:

1. the result of running vue create broken
2. the minimal changes required to reproduce the issue. Which is basically adding bootrstap-vue and the option to transpile it.

[haoqunjiang]

1, vue serve works only because it does not include @vue/cli-plugin-babel by default.
2. This issue should be raised to bootstrap-vue - they provided a module & a jsnext:main entry in package.json but have transpiled those code into commonjs modules, which is quite misleading.

The root cause is similar to this one:
#2837 (comment)

@babel/preset-env (used by @vue/babel-preset-app underlyingly) has detected and then injected several import statements to include the necessary polyfills for bootstrap-vue, however there're exports. statements in the same file, which later confuses webpack module system and causes error.

[alexaandru]

Much appreciated for the explanation @sodatea !

For the record (if anyone else runs into this), found this issue: bootstrap-vue/bootstrap-vue#1409 and used the solution indicated there: changed the BootstrapVue import line from:

import BootstrapVue from 'bootstrap-vue'

to:

import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm'

and now npm run serve also works just fine :-) Cheers!