Application won't start in Internet Explorer 10-11

sergeymorkovkin commented 5 years ago

[x] 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:

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

Steps to reproduce

Create new vuepress@next project (I'm using 1.0.0-alpha.48 currently)
Start dev-server with npm run docs:dev
Open http://[yout-ip]:8080 in IE 10 or 11
Witness it's throwing an error at the eval statement
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'); }, };
Refresh your Internet Explorer tab
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
[x] 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 commented 5 years ago

Confirm similar issue in production build.

jacobmllr95 commented 5 years ago

This issue is still present in v1.0.2.

sergeymorkovkin commented 5 years ago

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 commented 5 years ago

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

jacobmllr95 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

cschweda commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

Hey found IE works on vuepress v1.5. 😎

vuejs / vuepress