vue-cli@3 with babel@7 not coverting arrow functions under node_modules

[latel]

Version

3.0.1

Reproduction link

https://github.com/latel/bad-vue-cli

Node and OS info

Node 10.4.0/ Windows 7

Steps to reproduce

npm i
npm run serve

What is expected?

app should work like charm under chrome 42.
as I have change .browserslistrc to select chrome 40-42

What is actually happening?

chrome 42 does not support arrow functions(see https://caniuse.com/#search=arrow), since @vue/cli use babel@7, which should convert all files beneath root directory including node_modules(documented here: https://cli.vuejs.org/config/#babel, looks for the tips area).

I have import a module named "audio-play" which contains arrow functions, which is not properly transformed so break the app under chrome 42

[latel]

here is more detail:

[sodatea]

See https://cli.vuejs.org/config/#transpiledependencies

[latel]

@sodatea the document's tips seems to be confusing(https://cli.vuejs.org/config/#babel).

anyway, I've tried transpileDependencies alreay, which still fails:

my vue.config.js:

const path = require('path');
const webpack = require('webpack');
const HtmlWebpackIncludeAssetsPlugin = require('html-webpack-include-assets-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 如果改动了这里的baseUrl，确保同时改动了package.json中的main字段以便可以正确打包
  baseUrl: './',
  transpileDependencies: [
    'audio-play',
  ],
  configureWebpack: {
    module: {
      rules: [{
        test: /webfont\.config\.js$/,
        use: [
          'style-loader',
          'css-loader',
          'webfonts-loader',
        ]
      }, {
        test: /\.(mp3|wav)$/,
        loader: 'file-loader',
        options: {
            name: '[path][hash:8].[ext]'
        }
      }, {
        test: /\.nmf$|\.so|\.nexe$/,
        loader: 'file-loader',
        options: {
            name: '[path][name].[ext]?[hash]'
        }
      }]
    },
    resolve: {
      alias: {
        '#': path.resolve(__dirname),
      }
    },
    externals: {
      jquery: 'jQuery',
    },
    plugins: [
      new CopyWebpackPlugin([
        { from: 'node_modules/jquery/dist', to: 'scripts/jquery' },
      ]),
      new HtmlWebpackIncludeAssetsPlugin({
        assets: [
          'scripts/jquery/jquery.js',
          'scripts/sdk/anychat/sdk/anychat4html5.min.js',
          'scripts/sdk/anychat/sdk/anychatobject.js',
          'scripts/sdk/anychat/sdk/anychatsdk.js',
          'scripts/sdk/weixin/sdk.js',
        ],
        append: false,
      }),
    ],
  },
  devServer: {
    proxy: {
      '/mock': {
        target: 'http://localhost:8888/',
        changeOrigin: false,
        pathRewrite: {
          '^/mock': '/index.php/'
        },
        headers: {
          host: 'wzq.voip.com'
        }
      }
    }
  }
}

[sodatea]

You cannot mix commonjs & ES modules in webpack 4.

Now that it's a third party dependency, the only way to solve this problem is to let babel take care of the module interop issues, by changing babel.config.js's content to:

// babel.config.js
module.exports = {
  presets: [
    ["@vue/app", {
      modules: "commonjs"
    }]
  ]
};

All your ES module code will be transpiled to commonjs and then pass to webpack for further compilation.

[latel]

@sodatea Thank you for your replay.

this seems to a deprecated babel 5 options.

Module build failed (from ./node_modules/babel-loader/lib/index.js):
ReferenceError: [BABEL] F:\anydemo\src\assets\icons\webfont.config.js: Using removed Babel 5 option: .modules - Use the corresponding module transform plugin in the `plugins` option. Check out http://babeljs.io/docs/plugins/#modules
    at buildUnknownError (F:\anydemo\node_modules\@babel\core\lib\config\validation\options.js:110:11)
    at Object.keys.forEach.key (F:\anydemo\node_modules\@babel\core\lib\config\validation\options.js:99:57)
    at Array.forEach (<anonymous>)
    at validate (F:\anydemo\node_modules\@babel\core\lib\config\validation\options.js:69:21)
    at instantiatePreset (F:\anydemo\node_modules\@babel\core\lib\config\full.js:242:36)
    at cachedFunction (F:\anydemo\node_modules\@babel\core\lib\config\caching.js:42:19)
    at loadPresetDescriptor (F:\anydemo\node_modules\@babel\core\lib\config\full.js:233:45)
    at config.presets.map.descriptor (F:\anydemo\node_modules\@babel\core\lib\config\full.js:68:19)
    at Array.map (<anonymous>)
    at recurseDescriptors (F:\anydemo\node_modules\@babel\core\lib\config\full.js:66:38)
    at loadFullConfig (F:\anydemo\node_modules\@babel\core\lib\config\full.js:106:6)
    at process.nextTick (F:\anydemo\node_modules\@babel\core\lib\transform.js:28:33)
    at process._tickCallback (internal/process/next_tick.js:61:11)

 @ ./src/main.ts 6:0-42
 @ multi (webpack)-dev-server/client?http://10.43.211.42:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

[latel]

can i touch a traditional .babelrc to configure babel the older way, or @vue/cli forced to use babel.config.js?

[sodatea]

I've no idea where the error comes from as it works well on my machine…

.babelrc is fine.

[caffeines]

You cannot mix commonjs & ES modules in webpack 4.

Now that it's a third party dependency, the only way to solve this problem is to let babel take care of the module interop issues, by changing babel.config.js's content to:

// babel.config.js
module.exports = {
  presets: [
    ["@vue/app", {
      modules: "commonjs"
    }]
  ]
};

All your ES module code will be transpiled to commonjs and then pass to webpack for further compilation.

this works for me