Babel not working for IE11

eberhapa commented 4 years ago

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

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

stof commented 4 years ago

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

eberhapa commented 4 years ago

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

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

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

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

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

@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

symfony / webpack-encore

Babel not working for IE11 #670