Polyfills not added from a dependency in transpileDependencies

[jameswragg]

Version

3.0.4

Reproduction link

https://github.com/jameswragg/vue-ie-transpile-issue

Node and OS info

node v8.11.3 / npm 6.4.1 / macOS 10.14 (18A391)

Steps to reproduce

npm install
npm run build

transpileDependencies doesn't seem to be working as specified in the docs here:

If the dependency is written in an ES version that your target environments do not support: Add that dependency to the transpileDependencies option in vue.config.js. This would enable both syntax transforms and usage-based polyfill detection for that dependency.

npm run server

This serves up the dist dir on http://localhost:8080. Viewing this bundle on IE 11 for instance fails with missing Symbol polyfills, this is seen in the IE 11 console:

SCRIPT5009: 'Symbol' is undefined
chunk-vendors.3e82079c.js (7,82041)

Installing this polyfill manually reveals more transpiling issues.

What is expected?

Adding the dependency to transpileDependencies in vue.config.js should transpile the dependency, adding any required required polyfills for the environment specified in browserslist

What is actually happening?

Required polyfills are missing.

---

Manually adding the es6.symbol polyfill to babel.config.js (you can see it commented out in my repro) reveals more transpiling issues that I can only hope would be magically resolved after transpileDependencies is doing what it claims.

[LinusBorg]

Without being able to run this right now:

Since the file-type dependency doesn't use Symbol directly, I would assume that it's an indirect dependency of some other feature that would have to be polyfilled, and the polyfill detection of babel's preset-env fails here (which would be a bug in their code).

I'll look into what you mean with "more transpiling issues" when I get home.

[haoqunjiang]

Well, this is a case that matches the 3rd option here:

3. If the dependency ships ES5 code, but uses ES6+ features without explicitly listing polyfill requirements (e.g. Vuetify): Use useBuiltIns: 'entry' and then add import '@babel/polyfill' to your entry file. This will import ALL polyfills based on your browserslist targets so that you don't need to worry about dependency polyfills anymore, but will likely increase your final bundle size with some unused polyfills.

---

This is because the usage of spread operator in file-type package implicitly imports a babel helper called _iterableToArray after transpilation, which requires Symbol polyfill under the hood.

Transpilation issues in other browsers are due to similar reasons.

Cannot assign to read only property 'exports' of object '#<Object>' is caused by the mixed usage of import (implicitly added by babel to import helpers) and module.exports.

[haoqunjiang]

I have to admit, even for experienced developers, it is not easy to identify such cases at first glance.

But I'm not sure what we can do to improve this situation or how to better document this behavior.
Contributions are welcome.

[klarkc]

I am having some issue that might be related, I am getting regeneratorRuntime undefinition on browser for @wordpress/api-fetch package which requires ES2015+ environment. I've added @wordpress/api-fetch in transpileDependencies but it seems ineffective.

The 3rd option in #2837 (comment) fixed it for me

[Jet12138]

I wonder if I got something why I can't get the right result.

[Jet12138]

In the development mode, we show transpile dependencies for our codes, our dependencies, our devServer, so fill the babel-polifill can fix this problem, I did it when I found out this method from another way.

[huang-x-h]

We have the same problem. When we publish es6 module @pillarjs/A, which include object-rest-spread syntax, we add the transpileDependencies: ['node_modules/@pillarjs'], and define the .browserslistrc file to support iOS 10

> 1%
last 2 versions
not ie <= 8
iOS >=10

We build the project, it can not run on iOS 10. When we change import A from '@pillarjs/A' to direct import import A from './A.js' which the source file is in src directory not node_modules, it works.

Seem babel do not detect the es feature in node_modules @sodatea

[haoqunjiang]

@huang-x-h what about transpileDependencies: ['@pillarjs']?

[huang-x-h]

@sodatea 💯 It's ok, thanks a lot. transpileDependecies just set the package name, do not include the node_modules?