Application won't start in Internet Explorer 10-11

[sergeymorkovkin]

• I confirm that this is an issue rather than a question.

Bug report

It looks like Vuepress doesn't support IE 10-11. There are two causes:

1. Initially Vuepress uses 'eval' source maps, which doesn't work in IE 10-11.
2. Vuepress uses dynamically prebuilt ES6 app enhancers, which don't get transpiled.

Steps to reproduce

1. Create new vuepress@next project (I'm using 1.0.0-alpha.48 currently)
2. Start dev-server with npm run docs:dev
3. Open http://[yout-ip]:8080 in IE 10 or 11
4. Witness it's throwing an error at the eval statement
5. Make sure it's not evergreen and uses file-based source maps with the following config:
   module.exports = { evergreen: false, chainWebpack: (config, isServer) => { config.devtool('source-map'); }, };
6. Refresh your Internet Explorer tab
7. Witness it's throwing an error at the ES6-like statement

What is expected?

Vuepress is expected to work with Internet Explorer 10-11.

What is actually happening?

Internet Explorer 10 and 11 can't start Vuepress app, since it's using ES6 syntax, which isn't transpiled.

Other relevant information

• My VuePress version is lower and euqal than 1.0.0-alpha.47:

  • VuePress version: 1.0.0-alpha.48
  • OS: macOS Mojave 10.14.4 (18E226)
  • Node.js version: v11.10.1
  • Browser version: IE 10.0.9200.17609 and 11.0.9600.19356
  • Is this a global or local install? Local
  • Which package manager did you use for the install? NPM
  • Does this issue occur when all plugins are disabled? Yes

• My VuePress version is higher than 1.0.0-alpha.47, the following is the output of npx vuepress info in my VuePress project:

System:
OS: macOS 10.14.4
CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
Binaries:
Node: 11.10.1 - ~/.nvm/versions/node/v11.10.1/bin/node
Yarn: Not Found
npm: 6.9.0 - ~/.nvm/versions/node/v11.10.1/bin/npm
Browsers:
Chrome: 74.0.3729.169
Firefox: 66.0.5
Safari: 12.1
npmPackages:
@vuepress/core: 1.0.0-alpha.48
@vuepress/theme-default: 1.0.0-alpha.48
vuepress: ^1.0.0-alpha.48 => 1.0.0-alpha.48
npmGlobalPackages:
vuepress: Not Found

[sergeymorkovkin]

Confirm similar issue in production build.

[jacobmllr95]

This issue is still present in v1.0.2.

[sergeymorkovkin]

This issue is still present in v1.0.2.

I'm using a number of tweaks to webpack config to bypass this.

// Fix transpilation with IE 10-11
//
function fixTranspileBug(config) {

  // TODO: https://github.com/vuejs/vuepress/issues/1623 - Support IE 10-11
  //

  // This is for @vue/babel-preset-app, or it will 'forget' to inject
  // the most primitive polyfills required by Vue (IE 10/11 support).
  //
  process.env.VUE_CLI_ENTRY_FILES = JSON.stringify(config.entry('app').values());

  // Get existing js rule exclude function
  //
  let existingExcludes = config.module.rule('js').exclude.values();

  // Add rule to always transpile auto-generated sources in .temp
  //
  config.module.rule('js').exclude.clear().add(filePath => {
    const tempPath = config.resolve.alias.get('@temp');
    const clientPath = config.resolve.alias.get('@client');
    if (filePath.startsWith(tempPath) || filePath.startsWith(clientPath)) {
      return false;
    } else {
      for (let i = 0; i < existingExcludes.length; i++) {
        let returnedValue = existingExcludes[i](filePath);
        if (returnedValue !== undefined)
          return returnedValue;
      }
    }
  });

}

[jacobmllr95]

@sergeymorkovkin I will try that out and maybe I can come up with a PR fo fix the issue in the core package.

[jacobmllr95]

@sergeymorkovkin I still struggle to get themes/plugins and their dependencies to work.
Adding /(@vuepress|vuepress-)/.test(filePath) for the theme/plugin files itself helped but this doesn't handle dependencies required by them.

Background
A custom theme I've created uses vuex and in the dist JS still includes some arrow functions.

[sergeymorkovkin]

@jackmu95 Vuepress has internal dependencies, which didn't get transpiled. This code fixes this problem by modification of the Vuepress transpilation webpack config. I suspect there are more related issues, but can only help with this code, which you already have. It solves major issues for me.

[massimosiani]

A solution similar to @jackmu95's worked for my small site with the default theme. I added

if (/(@vuepress|vuepress-)\/.*\.js$/.test(filePath)) {
    return false
}

to createBaseConfig.js.

[jacobmllr95]

The only thing I'am currently still struggling ist to get the Object.assign() polyfill to work.
Other thank that It's working fine.

[thuringia]

The only thing I'am currently still struggling ist to get the Object.assign() polyfill to work.
Other thank that It's working fine.

@jackmu95 Did you manage to get the polyfill to work? This is the only issue remaining but causes the whole of Vuepress to not work in IE 11 at the moment
It also appears that Promise is not being polyfilled...

[sergeymorkovkin]

The only thing I'am currently still struggling ist to get the Object.assign() polyfill to work.
Other thank that It's working fine.

@jackmu95 Did you manage to get the polyfill to work? This is the only issue remaining but causes the whole of Vuepress to not work in IE 11 at the moment
It also appears that Promise is not being polyfilled...

Yes, please check my code above.

[thuringia]

The only thing I'am currently still struggling ist to get the Object.assign() polyfill to work.
Other thank that It's working fine.

@jackmu95 Did you manage to get the polyfill to work? This is the only issue remaining but causes the whole of Vuepress to not work in IE 11 at the moment
It also appears that Promise is not being polyfilled...

Yes, please check my code above.

I meant without hacking the webpack config or such. I was expecting the PR that closed this issue to actually rectify this problem, but a default installation of vuepress is still broken in IE 11.

Which is not great

[kouts]

Vuepress is not working for me on IE11 either, I can see arrow functions inside the build .js files which means they aren't transpiled.
I would very much like to use the workaround suggested by @sergeymorkovkin but where do I put this code?

[sergeymorkovkin]

Vuepress is not working for me on IE11 either, I can see arrow functions inside the build .js files which means they aren't transpiled.
I would very much like to use the workaround suggested by @sergeymorkovkin but where do I put this code?

This should be in your vuepress config.

[kouts]

That's the function declaration, do I need to call it after I declare it?

[cschweda]

Is there an example of where to put this?

if (/(@vuepress|vuepress-)\/.*\.js$/.test(filePath)) {
    return false
}

Where in config.js does this go?

[volodimirian]

Any update on this? I faced the same and can't get where it could be passed and how it should be called. By the way if there is any fix to support IE somehow from the box that would be awesome!

[volodimirian]

Hey found IE works on vuepress v1.5. 😎