CODEWITHSUNDEEP
javascriptreactjswebpackbabeljs
saunders
saunders

Reputation: 989

Weback manifest file doesn't compile to es5

Recently our build has stopped working on IE11 due to the fact the webpack manifest file has .includes in it which IE11 can't run.

I have dug into this and found react-datepicker uses .includes() in it's code but in our main.app.js file it converts it so nothing is in there, it is only in the manifest file.

If I remove the manifest file from our webpack, the error moves to the main.app.jsfile saying object doesn't support property or method includes. This error is coming from camelCase.js from redux-actions. I feel this is red herring but not entirely sure.

I am not sure if this is a webpack issue or a babel, or the plugin error.

How do I resolve this?

Steps I have done so far:

I have locked react to version 16.3.0 in our package.json.

I downgraded the react-datepicker plugin.

I have removed the manifest file from being loaded.

I have tried updating redux-actions.

I have tried downgrading redux-actions

Here is my webpack file:

const pkg = require('../package.json');
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const appConfig = {
  VERSION: pkg.version,
  OUTPUT_NAME: pkg.config.OUTPUT_NAME,
  DEV_PORT: pkg.config.DEV_PORT
};

const config = {
  mode: 'development',
  context: path.resolve(__dirname),
  entry: {
    app: [
      '../src/index.js',
      '../src/styles/main.css',
      '../index.pug'
    ]
  },
  output: {
    path: path.resolve(__dirname, '../public/'),
    filename: `scripts/${appConfig.OUTPUT_NAME}.[name].${appConfig.VERSION}.js`,
    publicPath: '/'
  },
  resolve: {
    extensions: [ '.js', '.jsx' ]
  },
  externals: {
    'lottie-web': 'lottie'
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.(css|scss)$/,
        exclude: /node_modules/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              importLoaders: 1
            }
          },
          'postcss-loader'
        ]
      },
      {
        test: /\.pug/,
        exclude: /node_modules/,
        use: 'pug-loader'
      },
      {
        test: /.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
        exclude: /node_modules/,
        use: 'file-loader'
      }
    ]
  },
  watch: true,
  watchOptions: {
    ignored: /node_modules/
  },
  devServer: {
    contentBase: path.resolve(__dirname, '../public/'),
    port: appConfig.DEV_PORT,
    historyApiFallback: true
  },
  devtool: 'source-map',
  optimization: {
    runtimeChunk: 'single',
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'manifest',
          chunks: 'all'
        }
      }
    }
  },
  plugins: [
    new ExtractTextPlugin(`../styles/${appConfig.OUTPUT_NAME}.[name].${appConfig.VERSION}.css`),
    new CopyWebpackPlugin([
      { from: '../src/assets', to: path.resolve(__dirname, '../public/assets') },
      { from: '../src/content', to: path.resolve(__dirname, '../public/content') }
    ]),
    new HtmlWebpackPlugin({ 'template': '../index.pug' })
  ]
};

module.exports = config;

Upvotes: 1

Views: 101

Answers (1)

Patrick Hund
Patrick Hund

Reputation: 20256

Instead of trying to get rid of the library that causes the incompatibility issue with Internet Explorer 11, I would recommend using a polyfill that adds support for the problematic APIs like Array.includes() at runtime.

Probably the most popular solution is the Babel Polyfill.

You can use it by adding the following script tag to your page's HTML code:

    <script nomodule src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js" integrity="sha256-WRc/eG3R84AverJv0zmqxAmdwQxstUpqkiE+avJ3WSo=" crossorigin="anonymous"></script>

Notice the attribute nomodule, this is to make sure that only browsers that do not support ES2015 modules actually load the polyfill – i.e. IE11.

Modern browsers (Chrome, Firefox, Safari, etc.) will just ignore the script tag and not burden your users with an additional download.

Upvotes: 2

Related Questions