mini-css-extract-plugin is not compatible with ie11

[Billaye]

Version

3.11.0

Environment info

System:
    OS: macOS Mojave 10.14.5
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 10.9.0 - /usr/local/bin/node
    Yarn: 1.19.0 - /usr/local/bin/yarn
    npm: 6.2.0 - /usr/local/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
    Safari: 12.1.1
  npmPackages:
    @fortawesome/vue-fontawesome: ^0.1.6 => 0.1.6
    @storybook/vue:  5.1.11
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  3.11.0
    @vue/babel-preset-jsx:  1.1.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  3.11.0
    @vue/cli-plugin-babel: ^3.11.0 => 3.11.0
    @vue/cli-plugin-e2e-nightwatch: ^3.10.0 => 3.10.0
    @vue/cli-plugin-typescript: ^3.6.0 => 3.8.1
    @vue/cli-plugin-unit-mocha: ^3.10.0 => 3.10.0
    @vue/cli-service: ^3.6.0 => 3.11.0
    @vue/cli-shared-utils:  3.11.0 (3.10.0)
    @vue/component-compiler-utils:  3.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/test-utils: 1.0.0-beta.29 => 1.0.0-beta.29
    @vue/web-component-wrapper:  1.2.0
    typescript: ^3.4.3 => 3.5.2
    vue: ^2.6.10 => 2.6.10
    vue-cli-plugin-storybook: ^0.6.1 => 0.6.1
    vue-cli-webpack:  1.0.0
    vue-hot-reload-api:  2.3.4
    vue-json-component: ^0.3.0 => 0.3.0
    vue-loader:  15.7.1
    vue-prism-component: ^1.1.1 => 1.1.1
    vue-prism-editor: ^0.2.1 => 0.2.1
    vue-router: ^3.0.1 => 3.0.2
    vue-style-loader:  4.1.2
    vue-template-compiler: ~2.6.6 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 3.0.5

Steps to reproduce

1. Create a vue-cli project with ie11 as supported browser
2. Set extract css to true ( vue.config.js -> css { extract: true} } )
3. Try and view the application on IE11

What is expected?

Application runs in ie11

What is actually happening?

Unable to open application in ie11 due to compilation errors

---

The issue seems to be that @vue/cli-service is relying on mini-css-extract-plugin: "^0.6.0" which relies on a version of "normalize-url" which is incompatible with ie11.

see below for more information.
webpack-contrib/mini-css-extract-plugin#385

[haoqunjiang]

You are referring to an outdated issue.
The depended version of normalize-url in the latest mini-css-extract-plugin is pinned to 1.9.1, which does not have the compatibility issue.

I think it's likely to be caused by other dependencies in your project. So please provide a reproduction repo.

Also, as a last resort, you can try to add transpileDependencies: [/.*/] to your vue.config.js to transpile all your deps through babel.

[Billaye]

Here is a simple reproduction - https://github.com/Billaye/extract-css-bug

Done using vue-create only adding the below snippet to vue.config.js

 css: {
    extract:true
 }

The main problem is @vue/[email protected] depends on a version of mini-css-extract-plugin that doesn't support ie11. Which is mini-css-extract-plugin "^0.6.0".

I've tried to transpile that module directly, it had some issues. I'd avoid that for now.

Thanks for responding.

[haoqunjiang]

Thanks for the report!
Didn't realize the dependency version in v3 is not updated. Will try to release a patch this weekend.

[haoqunjiang]

Sorry for the delay, now v3.12 is available.