Apollo-module: IE 11 polyfill broken with Nuxt 2.0 + apollo-module

[dweldon]

Version

v4.0.0-rc.2

Reproduction link

https://github.com/dweldon/nuxt-polyfill-issue

Steps to reproduce

git clone https://github.com/dweldon/nuxt-polyfill-issue.git
cd nuxt-polyfill-issue && npm i
npm start

Navigate to http://localhost:3000/

What is expected ?

The page should render "Hello World"

What is actually happening?

On IE 11, an error page is rendered. Object.entries is undefined.

Additional comments?

I don't know if this is a bug with apollo-module, or with Nuxt 2.0, but the combination breaks on IE 11, and probably many other older browsers. If I remove the apollo-module code, Object.entries is defined. This implies one of: (1) Nuxt is executing core-js too late, (2) apollo-module or one of its dependencies is overwriting the polyfill.

_{This bug report is available on Nuxt community (#c143)}

[clarkdo]

Sorry about that I have some personal stuff recently, I’ll look into it immediately when available.

[papertokyo]

+2 for this issue

[dohomi]

can you please check if 4.0.0.rc2.2 is fixing it for you? Are you using Nuxt v1 or v2?

[dweldon]

@dohomi Thanks for following up. I upgraded the reproduction example to use 4.0.0-rc2.2 and version 2.1.0 of nuxt. Unfortunately, I still get the same error.

[dohomi]

@dweldon I haven't experience it so far. But here is a polyfill stated: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/entries#Polyfill
Do you know where that code is used? Because this package does not use Object.entries, something seems to be not right with the setup of Babel

[dweldon]

I think progress it being made. If you do a clean checkout of the reproduction project (or remove node_modules and package-lock.json), when I build with 4.0.0-rc2.3, I now see a spinner instead of an error page. The current error in IE11 is:

Expected identifier
vendors.app.js (5179,7)

In my build that line is:
const { ApolloLink, Observable } = __webpack_require__(/*! apollo-link */ "./node_modules/apollo-link/lib/index.js")

So Babel just isn't processing that file?

[Ayiga]

Looking into this issue, it stems directly from using vue-cli-plugin-apollo specifically with it's dependency on apollo-upload-client located here

At least according to this output file that's what is being output with the const keywords:

It's a bit hard to follow because vue-cli-plugin-apollo is really mean to convert existing Vue-Apollo projects to allow for them to enable SSR. However it's being included in this project as a convenience to prevent the user from having to mess around with the various Links that apollo requires. This ends up being a bit of a double-edged sword, because the result ends up making the packaged a lot bigger, and the cli is really meant to be used with node directly, but at the same time it's much easier to configure.

I'm going to keep looking into this, because I need an answer for it today.

[Ayiga]

The easiest solution I could come up with, for now, was to fork the project, and remove the dependency on vue-cli-plugin-apollo by copying the code into the same file.

In order to get rid of the apollo-upload-client I just ended up modifying the copied code by using an HttpLink instead of the call / dependency on apollo-upload-client due to calling the createUploadLink method. This means that the plugin code adjustments I made won't respect the httpLinkOptions property, unfortunately.

However it serves my purposes for the time being.

Another issue I ran into, which isn't the fault of @nuxtjs/apollo directly is the state serialization of the window.__NUXT__ global. Object.assign ends up getting put into the window.__NUXT__ global in order to populate the serialized state. This is a result of that same line using devalue. devalue in this case attempts to handle serialization cases, however, for whatever reason it does a prototype check to try and determine out how it should serialize. As a result it can inject Object.assign into the resulting string which won't be transpiled.

As an aside, I noticed that the use of window.__NUXT__ is hard-coded. The issue here is that the serialized state is not guaranteed to be window.__NUXT__ it's just that by default.

Please let me know if you have any questions,

Thanks,

~ Ayiga

[Leruiz]

I have met the same problem and solved it.

Actually, the latest vue-cli-plugin-apollo depends on [email protected]. But the exported function createUploadLink is written with es6 in src/index.js of [email protected], which is not supported in ie 11. So the solution is very easy, to use a version of apollo-upload-client with codes written by es5. I use [email protected]. To set the version, add resolutions into package.json as below:

"resolutions": { "apollo-upload-client": "8.1.0" },

Then the latest @nuxtjs/apollo can be used normally in ie11.

[dohomi]

Shouldn't babel take care of transpiling? For me this looks like there is some configuration missing to enable IE11. But that would be rather a Nuxt issue itself than this plugin

[Leruiz]

In the webpack configurations of nuxt 2, files in node_modules are excluded by babel-loader at default. So the code of apollo-upload-client are not be transpiled. So, you have to add customized babel-loader configurations in nuxt.config.js if you want babel to handle it.

[Leruiz]

Now the author of apollo-upload-client has fixed this problem and released the latest version v9.1.0. This error disappears in my project.

[dweldon]

@Leruiz Thanks for the update.

When I upgrade all packages and add a polyfill for Object.entries, I can finally get it to run so I'll close this now.

[janzheng]

Which packages do you upgrade / how do you add the polyfill? (I'm just trying to get the example to work on IE11)

In my nuxt.config I'm running the following, with apollo-upload-client updated to v9.1.0 but it's still not polyfilling properly

...
    babel: {
      presets: [
        ['@babel/preset-env', {
          'useBuiltIns': 'usage',
          // 'debug': true,
          'shippedProposals': true,
          'targets': {
            "browsers": ["> 1%", "last 2 versions", "ie >= 11", "not ie <= 8"],
            "ie": 11
          }
        }]
      ],
      plugins: [
        '@babel/plugin-syntax-dynamic-import', 
        '@babel/plugin-transform-typeof-symbol', 
        '@babel/plugin-transform-runtime'
      ],
    },
...

[dweldon]

@janzheng Please see the commit history here. I've kept the example up to date.

[DespertaWeb]

@dweldon how did you solved it?

[dweldon]

@DespertaWeb You can see all of the details in my question and answer here.

[azltdanh]

For google user who comes here, I am using nuxt 2.x, and the fix is quite simple, you just need to add transpile in nuxt.config.js

build: { transpile: ['vue-cli-plugin-apollo'] }