// 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_ponents)/,
      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_ponents)/,
      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:

File:

// 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_ponents)/,
      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_ponents)/,
      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:

File:

• javascript
• jquery
• reactjs
• webpack
• babeljs

Share Improve this question Follow edited Nov 22, 2017 at 21:44 Bin Ury 88999 silver badges2020 bronze badges asked Nov 22, 2017 at 20:40 AspiringCanadianAspiringCanadian 1,67577 gold badges2626 silver badges4444 bronze badges 11

• 1 I'm still learning react myself. However, whenever I see that error in the console seems to me like the Jquery library is missing? Might be far off though. – Jorden Commented Nov 22, 2017 at 20:45
• is this breaking on PROD env or dev?, from the screenshot I see syntax error, but I don't see what the the syntax error is. I would think this is more related to webpack configuration, maybe you should tag this as webpack also (if possible) – Kunukn Commented Nov 22, 2017 at 20:51
• @Jorden1337: The error stops rest of the js to execute so the first error is all that needs to be resolved in this case. – AspiringCanadian Commented Nov 22, 2017 at 20:52
• @Kunukn: Prod is breaking. – AspiringCanadian Commented Nov 22, 2017 at 20:53
• it seems like you have some file which is loaded/rendered where jQuery is required and jQuery itself is not loaded yet. – Naresh Thakur Commented Nov 22, 2017 at 20:55

 |  Show 6 more ments

1 Answer 1

Sorted by: Reset to default 2

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