Still getting 'Symbol' is undefined' error even after adding babel-polyfill in my webpack

Question

https://babeljs.io/docs/usage/polyfill/#usage-in-browser

I did not understand the lines on the documentation page under:

Usage in Browser heading

can someone help me with what else is required:

Below are my code snippets:

I'm using storybook as a boilerplate:

webpack.config.js file:

entry: [
    'babel-polyfill',
    require.resolve('react-dev-utils/webpackHotDevClient'),
    paths.appIndexJs
]

index.js file:

import 'babel-polyfill';
import React from 'react';

Is there some other files also where I need to add babel-polyfill related code.

 require('babel-polyfill'); var path = require('path'); var autoprefixer = require('autoprefixer'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin'); var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin'); var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin'); var getClientEnvironment = require('./env'); var paths = require('./paths'); var publicPath = '/'; var publicUrl = ''; var env = getClientEnvironment(publicUrl); module.exports = { devtool: 'cheap-module-source-map', entry: ['babel-polyfill', require.resolve('react-dev-utils/webpackHotDevClient'), require.resolve('./polyfills'), paths.appIndexJs ], output: { path: paths.appBuild, pathinfo: true, filename: 'static/js/bundle.js', publicPath: publicPath }, resolve: { fallback: paths.nodePaths, extensions: ['.js', '.json', '.jsx', ''], alias: { 'react-native': 'react-native-web' } }, module: { // First, run the linter. // It's important to do this before Babel processes the JS. preLoaders: [{ test: /\\.(js|jsx)$/, loader: 'eslint', include: paths.appSrc, }], loaders: [{ exclude: [/\\.html$/, /\\.(js|jsx)$/, /\\.css$/, /\\.json$/], loader: 'url', query: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } }, // Process JS with Babel. { test: /\\.(js|jsx)$/, include: paths.appSrc, loader: 'babel', query: { cacheDirectory: true } }, { test: /\\.css$/, loader: 'style!css?importLoaders=1!postcss' }, { test: /\\.json$/, loader: 'json' } ] }, // We use PostCSS for autoprefixing only. postcss: function() { return [ autoprefixer({ browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway ] }), ]; }, plugins: [ new InterpolateHtmlPlugin({ PUBLIC_URL: publicUrl }), new HtmlWebpackPlugin({ inject: true, template: paths.appHtml, }), new webpack.DefinePlugin(env), new webpack.HotModuleReplacementPlugin(), new CaseSensitivePathsPlugin(), new WatchMissingNodeModulesPlugin(paths.appNodeModules) ], node: { fs: 'empty', net: 'empty', tls: 'empty' } }; 

Answer 1

There are two ways to get this code into your browser.

1 - Include the babel-polyfill module in the webpack bundle

2 - Load it as an external script in your html

Webpack - adding bundle dependencies with entry arrays

Put an array as the entry point to make the babel-polyfill module available to your bundle as an export.

With webpack.config.js, add babel-polyfill to your entry array.

The webpack docs explain how an entry array is handled:

What happens when you pass an array to entry? Passing an array of file paths to the entry property creates what is known as a "multi-main entry". This is useful when you would like to inject multiple dependent files together and graph their dependencies into one "chunk".

Webpack.config.js

require("babel-polyfill");

var config = {
   devtool: 'cheap-module-eval-source-map',
   entry: {
    main: [
      // configuration for babel6
      ['babel-polyfill', './src/js/main.js']
    ]
  },
 }

Alternative to Webpack - load babel-polyfill as an external script in the browser html

The alternative to using webpack would mean including the module as an external script in your html. It will then be available to code in the browser but the webpack bundle won't be directly aware of it.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.22.0/polyfill.js"></script>