Strange error: polyfil ReferenceError: undefinedresult is not defined

Bug report

What is the current behavior?
starting the dev server crashes with the below error. seems to be coming from the Polyfill decorator on the window object in index.js. The only way to get rid of the error is to nuke the node_modules and reinstall. if I stop my dev server and restart it again, the error shows again.

index.js?d392:19 Uncaught ReferenceError: undefinedresult is not defined
    at Module.eval (index.js?d392:19)
    at eval (index.js:21)
    at Module../node_modules/jss/node_modules/symbol-observable/es/index.js (bundle.js:8029)
    at __webpack_require__ (bundle.js:1429)
    at fn (bundle.js:803)
    at eval (isObservable.js?5025:7)
    at Object../node_modules/jss/lib/utils/isObservable.js (bundle.js:7969)
    at __webpack_require__ (bundle.js:1429)
    at fn (bundle.js:803)
    at eval (cloneStyle.js?292a:11)

One thing I notice is that when I run the server the second time, it starts a lot quciker and it seems to leave out node_modules.

webpack common:

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const HardSourceWebpackPlugin = require("hard-source-webpack-plugin");

module.exports = {
  resolve: {
    extensions: ["*", ".js", ".jsx", ".json"]
  },
  devtool: "source-map",
  entry: [
    // must be first entry to properly set public path
    path.resolve(__dirname, "../src/webpack-public-path"),
    path.resolve(__dirname, "../src/index.js")
  ],
  target: "web",
  output: {
    path: path.resolve(__dirname, "dist"), // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: "./",
    filename: "bundle.js"
  },
  plugins: [
    new HardSourceWebpackPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
    new HtmlWebpackPlugin({
      // Create HTML file that includes references to bundled CSS and JS.
      template: path.resolve(__dirname, "../src/index.ejs"),
      minify: {
        removeComments: true,
        collapseWhitespace: true
      },
      inject: true
    })
  ],
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ["babel-loader"]
      },
      {
        test: /\.eot(\?v=\d+.\d+.\d+)?$/,
        use: ["file-loader"]
      },
      {
        test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/font-woff"
            }
          }
        ]
      },
      {
        test: /\.[ot]tf(\?v=\d+.\d+.\d+)?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "application/octet-stream"
            }
          }
        ]
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 10000,
              mimetype: "image/svg+xml"
            }
          }
        ]
      },
      {
        test: /\.(jpe?g|png|gif|ico)$/i,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[ext]"
            }
          }
        ]
      },
      {
        test: /(\.css|\.scss|\.sass)$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
};

webpack dev setup:

const webpack = require("webpack");
const merge = require("webpack-merge");
const path = require("path");
const Dotenv = require("dotenv-webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const common = require("./webpack.common.babel");

const GLOBALS = {
  "process.env.NODE_ENV": JSON.stringify("development"),
  __DEV__: true
};

module.exports = merge(common, {
  mode: "development",
  output: {
    path: path.resolve(__dirname, "../dist-dev"), // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: "./",
    filename: "bundle.js"
  },
  plugins: [
    new Dotenv({
      path: ".env_dev"
    }),
    // Tells React to build in prod mode. https://facebook.github.io/react/downloads.html
    new webpack.DefinePlugin(GLOBALS),
    new CopyWebpackPlugin([
      { from: "assets", to: "../dist-dev/assets" },
      { from: "src/font", to: "../dist-dev/font" },
      { from: "src/main.css", to: "../dist-dev/main.css" },
      {
        from: "src/react-datasheet.css",
        to: "../dist-dev/react-datasheet.css"
      }
    ])
  ],
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          name: "vendors",
          chunks: "all"
        }
      }
    }
  }
});

webpack config babel:


const webpack = require("webpack");
const merge = require("webpack-merge");
const path = require("path");
const Dotenv = require("dotenv-webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const common = require("./webpack/webpack.common.babel");

const GLOBALS = {
  "process.env.NODE_ENV": JSON.stringify("development"),
  __DEV__: true
};

module.exports = merge(common, {
  mode: "development",
  output: {
    path: path.resolve(__dirname, "../dist"), // Note: Physical files are only output by the production build task `npm run build`.
    publicPath: "/",
    filename: "bundle.js"
  },
  plugins: [
    new webpack.DefinePlugin(GLOBALS),
    new Dotenv({
      path: ".env_qa"
    }),
    new CopyWebpackPlugin([
      { from: "assets", to: "../dist/assets" },
      { from: "src/font", to: "../dist/font" },
      { from: "src/main.css", to: "../dist/main.css" },
      { from: "src/react-datasheet.css", to: "../dist/react-datasheet.css" }
    ]),
    new webpack.HotModuleReplacementPlugin()
  ]
});

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

Other relevant information:
webpack version: 4.20.2
Node.js version: 6.9.4
Operating System: mac os 10.13.6
Additional tools:

"webpack-bundle-analyzer": "^2.12.0",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9",
    "webpack-hot-middleware": "^2.24.2",
    "webpack-merge": "^4.1.4",

Author: Fantashit

1 thought on “Strange error: polyfil ReferenceError: undefinedresult is not defined

  1. I have this error quite often too. When it happens I need to clear my hard source cache with rm -rf node_modules/.cache and restart webpack.

Comments are closed.