Vuepress: [Bug Report] Polyfills are not included correctly

[ApsarasX]

• [x] I confirm that this is a issue rather than a question.

Bug report

Version

[email protected]

Steps to reproduce

1. build a website with vuepress
2. open the IE11 to find that there is a syntax error on console
   
   

By the way, the website is https://ms-design.github.io.
Its source files locate in https://github.com/ms-design/ms-design/tree/develop/docs

What is expected?

experience like on Chrome

What is actually happening?

Promise is an invalid API on IE11

Other relevant information

When i input Promise on console of IE11, there is an undefined error, just like

• Your OS: macOS 10.13
• Node.js version: 10.14.2
• Browser version: IE 11 on Paralells Desktop
• Is this a global or local install? local
• Which package manager did you use for the install? yarn

[bretterer]

Any status on this enhancement?

[alex-arriaga]

Hi, any plan to add this enhancement?
Best regards.

[alex-arriaga]

Hi, I have used this configuration option https://vuepress.vuejs.org/config/#head to add my own polyfill URL (with the Promise support and other features such as Array.forEach)

//.vuepress/config.js
{
// More configurations
head: [
    [
      'script',
      {src: 'https://polyfill.io/v3/polyfill.min.js?features=Array.from%2CArray.isArray%2CArray.of%2CArray.prototype.%40%40iterator%2CArray.prototype.copyWithin%2CArray.prototype.entries%2CArray.prototype.every%2CArray.prototype.fill%2CArray.prototype.filter%2CArray.prototype.find%2CArray.prototype.findIndex%2CArray.prototype.flat%2CArray.prototype.forEach%2CArray.prototype.flatMap%2CArray.prototype.includes%2CArray.prototype.indexOf%2CArray.prototype.keys%2CArray.prototype.lastIndexOf%2CArray.prototype.map%2CArray.prototype.reduce%2CArray.prototype.reduceRight%2CArray.prototype.some%2CArray.prototype.values%2CPromise%2CPromise.prototype.finally'}],
  ]
}

[Midnight-Conqueror]

@alex-arriaga I've found for my specific case this hasn't worked

[meteorlxy]

I've created a new branch to help find the bug:

https://github.com/meteorlxy/vuepress/tree/fix/polyfill

Steps to repro

• clone the repo and checkout to fix/polyfill branch.
• yarn.
• yarn build:docs, which will generate vuepress/ folder in the project root.

• check vuepress/assets/js/100.d7be016a.js, which includes the polyfill of Object.assign that comes from core-js:

  

  Corresponding code in core-js: https://github.com/zloirock/core-js/blob/10ccf67bbf4194c94f5951e4360ecaa3af11d83a/packages/core-js/internals/object-assign.js#L10-L11

• search the filename 100.d7be016a.js in vuepress folder, and you'll find __none of the html files__ import this script (only have <link rel="prefetch" href="/assets/js/100.d7be016a.js">)

  

Conclusion

The polyfills are bundled, but are not imported to the html files correctly

VuePress is using @vue/babel-preset-app to introduce polyfills. On my fix/polyfill branch, I have updated @vue/babel-preset-app to v4.1.1.

@sodatea Would you please give some guidance?

[mariofriz]

Any updates on this ? It looks like some polyfills make it in but not all required.

I was able to resolve it temporarly using polyfill.io. For me I was only missing: Object.assign, Promise and NodeList.forEach.

// .vuepress/config.js
head: [
  ['script', {
    src: 'https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CPromise%2CNodeList.prototype.forEach'
  }]
],

[psalaets]

I think this will be fixed by #2317. Until that is released, this is what I'm doing

Workaround

1. Set the environment variable VUE_CLI_ENTRY_FILES to a json array containing absolute paths to the 2 vuepress entry files:
2. node_modules/@vuepress/core/lib/client/clientEntry.js
3. node_modules/@vuepress/core/lib/client/serverEntry.js
4. Rebuild the vuepress app. The first time you rebuild, use vuepress's --no-cache option because you might have js files with the wrong set of polyfills in a vuepress output cache directory somewhere. vuepress build --no-cache

My package.json has:

{
  "scripts": {
    "build": "VUE_CLI_ENTRY_FILES=['\"'$PWD/node_modules/@vuepress/core/lib/client/clientEntry.js'\"','\"'$PWD/node_modules/@vuepress/core/lib/client/serverEntry.js'\"'] vuepress build"
  }
}

I think this syntax only works on mac and linux. Someone smarter than me can probably figure out how to do it on windows. Maybe using cross-env module?

Run the script with:

$ yarn build --no-cache

Sanity check after rebuilding

Option 1

Use webpack-bundle-analyzer and look for the polyfills in the visualization.

$ yarn add -D webpack-bundle-analyzer

// .vuepress/config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  chainWebpack(config, isServer) {
    if (!isServer) {
      config
        .plugin("webpack-bundle-analyzer")
        .use(BundleAnalyzerPlugin)
        .init(Plugin => new Plugin());
    }
  }
};

Option 2

Run a build with un-minified code

// .vuepress/config.js
module.exports = {
  chainWebpack(config, isServer) {
    config.optimization
      .minimize(false);
  }
};

Then go into your dist directory and grep app.xxxxxx.js for "assign" to look for the Object.assign polyfill.

Option 3

Deploy somewhere and open it in IE11?

[meteorlxy]

@psalaets Cool! I'll review it asap 👍

[meteorlxy]

Great thanks to @psalaets ❤️

The fix will be released in next version