Babel not working for IE11

[eberhapa]

Hi,

Do I have to do something special to make classes work in ie11 because there are still classes in my js build file and therefore my js isn't working in ie11.

class A extends d{constructor(...e) ........

In the package.json I'm targeting:
"browserslist": [ "last 2 versions", "IE 11", "ios >= 8" ],

I'm using "@symfony/webpack-encore": "^0.28.0".

webpack.config.js:

Encore
  .enableSingleRuntimeChunk()

  // the project directory where all compiled assets will be stored
  .setOutputPath('build/')

  // the public path used by the web server to access the previous directory
  .setPublicPath('/wp-content/themes/enfold-child/build')

  .addEntry('main', [
    './src/js/main.js'
  ])
  .addStyleEntry('style', './src/sass/style.scss')
  .addStyleEntry('custom-editor-style', './src/sass/custom-editor-style.scss')

  // allow legacy applications to use $/jQuery as a global variable
  .autoProvidejQuery()

  // allow sass/scss files to be processed
  .enablePostCssLoader()
  .enableSassLoader()

  .copyFiles({
    from: './src/images',
    pattern: /\.(png|jpg|jpeg|svg)$/,
    to: 'images/[path][name].[ext]'
  })

  // enable source maps during development
  .enableSourceMaps(!Encore.isProduction())

  // empty the outputPath dir before each build
  .cleanupOutputBeforeBuild()
;

Thanks in advance,
Patrick

[stof]

Can you share your webpack.config.js file too ?

[stof]

also, do you have a .babelrc file in your project ?

[eberhapa]

Hi stof,
No I don't have a .babelrc file because "Babel is automatically configured for all .js and .jsx files via the babel-loader with sensible defaults (e.g. with the @babel/preset-env and @babel/preset-react if requested)." - https://symfony.com/doc/current/frontend/encore/babel.html

Do I need one?

I updated my first comment with the config.

Thanks,
Patrick

[Lyrkan]

Hey @eberhapa,

Two other things to check there:

• does the class keywords come from vendors? If that's the case it probably happens because things from node_modules do not go through Babel. You can either check if the given vendors provide an ES5 version of their code and use it, or remove the exclusion on them using the exclude/includeNodeModules options of Encore.configureBabel()

• did you clear the babel-loader cache after changing your browserslist config? You can do it using the following command: rm -rf node_modules/.cache/babel-loader/ (note that if node_modules is not writeable by the process running Webpack the cache may be somewhere else, like /tmp)

[eberhapa]

Hi @Lyrkan,

Thank you very much. I didn't know that node_modules are ignored by default. That was the problem for me. I included all vendors I need and now it's working. Is it bad to include the whole node_modules folder?

[Lyrkan]

Is it bad to include the whole node_modules folder?

Vendors are excluded by default because it can slow down builds a lot since Babel will have more files to transpile (even when that's not needed).

[guillaumepacquet]

Hello!
I configured Babel to process Vuetify in my node_modules, but it doesn't seems to go through Babel. Here is my configuration file:

webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
var path = require('path');

Encore
    .setOutputPath('web/build/')
    .setPublicPath('/build')
    .addEntry('js/app', './assets/js/index.js')
    .addStyleEntry('css/style', ['./assets/less/main.less', './assets/sass/main.scss'])
    .cleanupOutputBeforeBuild()
    .enableSingleRuntimeChunk()
    .enableSourceMaps(true)
    .enableVersioning(Encore.isProduction())
    .enableLessLoader()
    .enableSassLoader(function(options) {
          options.implementation = require('sass');
          options.fiber = require('fibers');
      })
    .enableVueLoader()
    .addLoader({
        loader: 'eslint-loader',
        options: {
            fix: true,
            ignorePattern: ['*.less', '*.scss', '*.svg']
        }
    })
    .addPlugin(new VuetifyLoaderPlugin())
    .configureBabel(null, {
        includeNodeModules: ['vuetify']
    })
    .configureDefinePlugin(options => {
        let rollBarVersion = 'localdev';
        if (Encore.isProduction()) {
            rollBarVersion = process.env.CODEBUILD_RESOLVED_SOURCE_VERSION;
        }

        options['process.env'].COMMIT_RELEASE = '"' + rollBarVersion + '"';
    })
;

let config = Encore.getWebpackConfig();
config.resolve.alias = {
    eventBus$: path.resolve(__dirname, 'assets/js/utils/event-bus.js'),
    app: path.resolve(__dirname, 'assets/js/app/'),
    core: path.resolve(__dirname, 'assets/js/core/'),
    config: path.resolve(__dirname, 'assets/js/config/'),
    router: path.resolve(__dirname, 'assets/js/router/')
};
config.devtool = 'source-map';

module.exports = config;

.babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "modules": false,
                "targets": "> 0.5%, last 2 versions, Firefox ESR, not dead"
            }
        ]
    ],
    "plugins": ["@babel/plugin-proposal-object-rest-spread", "@babel/plugin-syntax-dynamic-import"],
    "env": {
        "test": {
            "presets": [
                ["@babel/env", { "targets": { "node": "current" }}]
            ]
        }
    }
}

package.json

{
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.4.5",
    "@symfony/webpack-encore": "^0.28.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^7.0.0-0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.8.0",
    "babel-loader": "^8.0.6",
    "deepmerge": "^4.2.2",
    "eslint": "^5.16.0",
    "eslint-loader": "^2.1.2",
    "eslint-plugin-vue": "^5.2.2",
    "fibers": "3",
    "jest": "^24.8.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.11.0",
    "rollbar-sourcemap-webpack-plugin": "^2.5.1",
    "sass-loader": "^7.1.0",
    "vue-jest": "^3.0.4",
    "vue-loader": "^15.0.11",
    "vuetify-loader": "^1.4.1"
  },
  "dependencies": {
    "@babel/polyfill": "^7.4.4",
    "@hyjiacan/vue-slideout": "^2.1.15",
    "bootstrap-vue": "^2.0.0-rc.11",
    "diff": "^4.0.1",
    "md5": "^2.2.1",
    "sass": "^1.23.7",
    "vue": "^2.6.10",
    "vue-clipboard2": "^0.3.0",
    "vue-notification": "^1.3.13",
    "vue-resource": "^1.5.1",
    "vue-rollbar": "^1.0.0",
    "vue-router": "^3.0.1",
    "vue-slider-component": "^3.0.15",
    "vue-template-compiler": "^2.6.10",
    "vuedraggable": "^2.20.0",
    "vuejs-toggle-switch": "^1.3.0",
    "vuetify": "^2.1.11",
    "vuex": "^3.0.1",
    "vuex-persistedstate": "^2.5.4"
  },
  "scripts": {
    "test": "jest",
    "build": "node_modules/@symfony/webpack-encore/bin/encore.js production",
    "build-dev": "node_modules/@symfony/webpack-encore/bin/encore.js dev"
  },
  "jest": {
    "verbose": true,
    "moduleFileExtensions": [
      "js",
      "json",
      "vue"
    ],
    "transform": {
      ".*\\.(vue)$": "vue-jest",
      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
    },
    "moduleNameMapper": {
      "^app/(.*)$": "<rootDir>/assets/js/app/$1",
      "^core/(.*)$": "<rootDir>/assets/js/core/$1",
      "^router/(.*)$": "<rootDir>/assets/js/router/$1",
      "^config/(.*)$": "<rootDir>/assets/js/config/$1",
      "eventBus": "<rootDir>/assets/js/utils/event-bus.js"
    }
  }
}

Thanks in advance,

Guillaume

[stof]

@guillaumepacquet the .babelrc file does not apply to files living in node_modules. Use a babel.config.* file instead: https://babeljs.io/docs/en/configuration#whats-your-use-case