CODEWITHSUNDEEP
javascriptjqueryreactjswebpackbabeljs
AspiringCanadian
AspiringCanadian

Reputation: 1665

How to build React app with Babel for Internet Explorer 11?

// webpack.config.js

const webpack = require('webpack');
const precss = require('precss');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const PROD = process.env.NODE_ENV === 'production';

const jsPresets = [
  ['env', {
    targets: PROD ? {
      'browsers' : [
      'last 4 versions',
      'safari >= 7',
      'Explorer 11',
      ]
    } : {
      chrome: 1,
    },
  }],
  'es2015',
  'stage-1',
];

const baseConfig = {
  entry: [
    'babel-polyfill',
    'antd/dist/antd.css',
    './node_modules/m-react-splitters/lib/splitters.css',
    './node_modules/cli-truncate/index.js',
    'react-s-alert/dist/s-alert-default.css',
    'react-s-alert/dist/s-alert-css-effects/flip.css',
    'react-s-alert/dist/s-alert-css-effects/bouncyflip.css',
    'react-quill/dist/quill.snow.css',
  ],
  output: {
    path: './wp-content/plugins/clausehound/js',
    filename: 'clausehound.js',
  },
  module: {
    loaders: [{
      test: /\.json$/,
      loader: 'json-loader',
    }, {
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style', 'css?-url!postcss'),
    }, {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      include: /cli-truncate\/index.js/,
      loader: 'babel-loader',
      query: {
        presets: jsPresets,
        plugins: [
          ['import', { libraryName: 'antd' }],
          ['transform-es2015-arrow-functions'],
        ],
      },
    }, {
      test: /\.jsx/,
      exclude: /(node_modules|bower_components)/,
      loader: 'babel-loader',
      query: {
        presets: jsPresets.concat(['react']),
      },
    }],
    rules: [
      { test: /[\/]jquery\.js$/, use: 'expose-loader?$!expose?jQuery' }
    ],
  },

  postcss: () => [precss],

  plugins: [
    new ExtractTextPlugin('../css/clausehound.css', { allChunks: true }),
    new webpack.OldWatchingPlugin(),
  ],
};

// Modify config if production build or not
if (PROD) {
  module.exports = Object.assign({}, baseConfig, {
    plugins: baseConfig.plugins.concat([
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
      new webpack.DefinePlugin({
        process: {
          env: {
            NODE_ENV: JSON.stringify('production'),
          },
        },
      }),
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      }),
      [
      'transform-es2015-arrow-functions',
      'transform-class-properties',
      'syntax-class-properties',
      ],
    ]),
  });
} else {
  module.exports = baseConfig;
}

IE11 is breaking at arrow function syntax. Majority, if not all, of the node modules have arrow functions going on in them and I don't want to include the entirety of it in the bundled js file. I have the babel-loader running and just to test, I included the file from 'cli-truncate' that is throwing a syntax error to the baseConfig's entry property but the app still throws the error at () => in that package's index.js.

The exact line that the code fails from cli-truncate is this: module.exports = (input, columns, opts) => {..}

I don't think this is specific to this package but I am guessing I need to modify webpack config in some way, I am not sure. Any ideas how to resolve this?

Errors:

IE 11 errors

File:

bundled file

Upvotes: 2

Views: 10961

Answers (1)

Bin Ury
Bin Ury

Reputation: 829

To ensure you are supporting IE11 with Babel you also need to add it to your current list of env targets. For example:

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": [
          "Chrome >= 59",
          "FireFox >= 44",
          "Safari >= 7",
          "Explorer 11",
          "last 4 Edge versions"
        ]
      },
      "useBuiltIns": true
    }],
    "react",
    "stage-1"
  ],
  "ignore": [
    "node_modules"
  ],
  "plugins": [
    "transform-es2015-arrow-functions",
    "transform-class-properties",
    "syntax-class-properties"
  ]
}

See also: Babel Env documentation

Upvotes: 2

Related Questions