search

vuejs / vue-cli

🛠️ webpack-based tooling for Vue.js Development
https://cli.vuejs.org/
MIT License
29.75k stars 6.33k forks source link

Vue-cli fails to build with polyfill #4313

Open stockersky opened 5 years ago

stockersky commented 5 years ago

Version

3.9.3

Environment info

  System:
    OS: Linux 5.1 Fedora 30 (Workstation Edition) 30 (Workstation Edition)
    CPU: (4) x64 Intel(R) Core(TM)2 Quad CPU    Q6600  @ 2.40GHz
  Binaries:
    Node: 10.16.0 - /usr/bin/node
    Yarn: Not Found
    npm: 6.9.0 - /usr/bin/npm
  Browsers:
    Chrome: 75.0.3770.142
    Firefox: 68.0
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0 
    @vue/babel-plugin-transform-vue-jsx:  1.0.0 
    @vue/babel-preset-app:  3.9.2 
    @vue/babel-preset-jsx:  1.0.0 
    @vue/babel-sugar-functional-vue:  1.0.0 
    @vue/babel-sugar-inject-h:  1.0.0 
    @vue/babel-sugar-v-model:  1.0.0 
    @vue/babel-sugar-v-on:  1.0.0 
    @vue/cli-overlay:  3.9.0 
    @vue/cli-plugin-babel: ^3.9.2 => 3.9.2 
    @vue/cli-plugin-eslint: ^3.9.2 => 3.9.2 
    @vue/cli-service: ^3.9.3 => 3.9.3 
    @vue/cli-shared-utils:  3.9.0 
    @vue/component-compiler-utils:  2.6.0 (3.0.0)
    @vue/preload-webpack-plugin:  1.1.0 
    @vue/web-component-wrapper:  1.2.0 
    eslint-plugin-vue: ^5.2.3 => 5.2.3 (4.7.1)
    vue: ^2.6.10 => 2.6.10 
    vue-analytics: ^5.17.0 => 5.17.0 
    vue-awesome-swiper: ^3.1.3 => 3.1.3 
    vue-carousel: ^0.18.0 => 0.18.0 
    vue-cli-plugin-vuetify: ^0.4.6 => 0.4.6 
    vue-cookie-law: ^1.10.0 => 1.10.0 
    vue-eslint-parser:  2.0.3 (5.0.0)
    vue-hot-reload-api:  2.3.3 
    vue-loader:  15.7.1 
    vue-loading-overlay: ^3.2.0 => 3.2.0 
    vue-router: ^3.0.7 => 3.0.7 
    vue-simple-spinner: ^1.2.8 => 1.2.8 
    vue-star-rating: ^1.6.1 => 1.6.1 
    vue-style-loader:  4.1.2 
    vue-swatches: ^1.0.3 => 1.0.3 
    vue-template-compiler: ^2.6.10 => 2.6.10 
    vue-template-es2015-compiler:  1.9.1 
    vue-wysiwyg: ^1.7.2 => 1.7.2 
    vue2-dropzone:  3.6.0 
    vuejs-datepicker: ^1.6.2 => 1.6.2 
    vuetify: ^1.5.16 => 1.5.16 
    vuetify-loader: ^1.2.2 => 1.2.2 
    vuex: ^3.1.1 => 3.1.1 
    vuex-persist: ^2.0.1 => 2.0.1 
  npmGlobalPackages:
    @vue/cli: 3.9.3

Link to minimal reproduction

https://github.com/stockersky/test-app

Steps to reproduce

npm run build

What is expected?

Vuejs / Vuetify app should be built with polyfill in order to support older browsers.

For testing purpose, I use pre ES2015 opera browser version 15 and put it on .browserslistrc which looks like this:

> 1%
last 2 versions
not ie <= 8
Chrome >= 41
Opera >= 15

I also noticed that throught the url inspector in Google Search Console, the page is blank, html code is the one of the public/index.html file and Uncaught SyntaxError: Unexpected reserved word is raised.

I'd expect Google bot to be able to "boot" my SPA app. This actually this which led me to try to generate polyfills.

What is actually happening?

 ERROR  Failed to compile with 122 errors                                                                             10:18:46 PM

These dependencies were not found:

* core-js/modules/es6.array.copy-within in ./src/main.js
* core-js/modules/es6.array.fill in ./src/main.js
* core-js/modules/es6.array.find in ./src/main.js
* core-js/modules/es6.array.find-index in ./src/main.js
* core-js/modules/es6.array.from in ./src/main.js
* core-js/modules/es6.array.iterator in ./src/main.js
* core-js/modules/es6.array.of in ./src/main.js
* core-js/modules/es6.array.sort in ./src/main.js
* core-js/modules/es6.array.species in ./src/main.js
....................................................................................................
To install them, you can run: npm install --save core-js/modules/es6.array.copy-within core-js/modules/es6.array.fill core-js/modules/es6.array.find core-js/modules/es6.array.find-index core-js/modules/es6.array.from core-js/modules/es6.array.iterator core-js/modules/es6.array.of core-js/modules/es6.array.sort core-js/modules/es6.array.species core-js/modules/es6.date.to-primitive core-js/modules/es6.function.has-instance core-js/modules/es6.function.name core-js/modules/es6.map core-js/modules/es6.math.acosh core-js/modules/es6.math.asinh

Here is my babel.config.js :

const removeConsolePlugin = [];
if(process.env.NODE_ENV === 'production') {
  removeConsolePlugin.push("transform-remove-console");
}

module.exports = {
  presets: [
    ["@vue/app", {
      useBuiltIns: "entry",
      debug: true,
    }],
  ],
  plugins: removeConsolePlugin
};

Top of my main.js :

import '@babel/polyfill';

NOTE : if i try:

module.exports = {
  presets: [
    ["@babel/preset-env", {
      useBuiltIns: "entry",
      debug: true,
    }],
  ],

I get:

Using polyfills with `entry` option:

[/PROJECTS/CODE/cv-app/node_modules/vuetify/lib/components/VApp/index.js] `import '@babel/polyfill'` was not found.
⠏  Building for production...
[/PROJECTS/CODE/cv-app/node_modules/vuetify/lib/components/VWindow/index.js] `import '@babel/polyfill'` was not found.

[/PROJECTS/CODE/cv-app/node_modules/vuetify/lib/components/transitions/index.js] `import '@babel/polyfill'` was not found.

[/PROJECTS/CODE/cv-app/node_modules/vuetify/lib/components/VTooltip/index.js] `import '@babel/polyfill'` was not found.

[/PROJECTS/CODE/cv-app/node_modules/vuetify/lib/components/VTimeline/index.js] `import '@babel/polyfill'` was not found.
.................................................................................................................................................

Please help !!!!

haoqunjiang commented 5 years ago

I'm sorry but if you don't provide a repo for reproduction, there's not much we can help.

And did you have core-js or @babel/polyfill listed in your package.json?

stockersky commented 5 years ago

Sorry about that. OK, I added a github repository for reproduction (see updated first post). I installed Vuetify as described in the Vuetify doc. Actually, the debug instruction in babel.config.json does not always output verbose information every time I run npm run build.

NOTE : I also try to use : npx vue-cli-service build --modern. It worked : 2 js output : legacy and modern and index.html is updated. However, it fails with Google Search Engine inspector and with Opera 15 : syntax error (always on vue-router code as my main project)....

As my main point is to be successfully crawled by Google Bot, maybe transpiling is a better way to go than polyfill. What do think about that?

Actually, Google stated in may that their bot would use up to date version of Chrome engine. Well, I got some doubt about that.... Clearly my webapp haven't been successfully crawled and the Search Console inspector confirms this. It's something I did not care about until I went live. But I guess lot's of Vuejs users might come to this bot issue when going live.

There is also a message about @babel/polyfill being deprecated... Should I follow those steps : https://www.thebasement.be/updating-to-babel-7.4/ ?

stockersky commented 5 years ago

OK, I could build the Github test-app I provided. Look at the last commit named "Added transpileDependencies Vuetify in vue.config.js" Basically, I removed the import of babel/polyfill from main.js and most important added Vuetify to the transpileDependencies in vue.config.js as stated in the end of this page: https://vuetifyjs.com/en/getting-started/quick-start

module.exports = {
  transpileDependencies:[/node_modules[/\\\\]vuetify[/\\\\]/]
}

NOTE : actually, just transpileDependencies:["vuetify"] works (maybe from vue-cli release 3.4.0 (2019-01-31))

NOTE about debug in babel.config.js

presets: [
    ['@vue/app', {
      debug: true,
    }],
  ],

==> the verbosity output works only on the first build. I have to delete node_modules directory & install again each time to have it work!

This builds and it works with old browser (opera 15).

But, of course, in my "real life" project, I do not have only Vuetify as dependencies... So, after adding Vuetify in transpiledependencies, I can see that the SyntaxError is not on the same line than before.

There is about a 1000 subdirectories in my node_modules/ .

The aim would be to let Babel recursively inspect and work on all dependencies.

stockersky commented 5 years ago

OK, I could make my whole "real life" webapp to work.

I issued a vue info with the output on the first post of this thread. And then added most of the packages in the transpileDependencies array.

Now, it works on old Opera 15 browser, but better, the Google Search Console URL inspector "sees" my page without error. Great!

I also tried build with modern mode (npx vue-cli-service build --modern) as described here : https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode

I was expecting vue-cli to only apply transpile/polyfill to the legacy build. It actually executes for both...

Well, I don't know if I'm doing it right.