Problems with `dom-iterator` and webpack

The dom-iterator dependency causes problems in my webpack project when I import from react-live. Webpack tries to package the xor require() which is in a catch block in that package. The error looks like this:

Error: ./~/dom-iterator/index.js
Module not found: Error: Cannot resolve module 'xor' in directory/node_modules/dom-iterator
resolve module xor in directory/node_modules/dom-iterator
  looking for modules in directory
    directory/xor doesn't exist (module as directory)
    resolve 'file' xor in directory
      resolve file
        directory/xor doesn't exist
        directory/xor.js doesn't exist
        directory/xor.jsx doesn't exist
        directory/xor.cjsx doesn't exist
        directory/xor.coffee doesn't exist
        directory/xor.ts doesn't exist
        directory/xor.tsx doesn't exist
        directory/xor.json doesn't exist
        directory/xor.less doesn't exist
        directory/xor.css doesn't exist
        directory/xor.scss doesn't exist
        directory/xor.sass doesn't exist
        directory/xor.toml doesn't exist
        directory/xor.yml doesn't exist
        directory/xor.yaml doesn't exist

Any suggestions on how to get around this problem? Note this also happens for the props module required the same way in that module.

Oddly, I don’t have this problem with development builds, only production builds. Possibly something in my webpack config?

[bvaughn]

Hi all 😄

In my case, I’m adding react-live to Gatsby. They have their own webpack settings (using webpack 1). Hmm, another webpack thing to try to figure out!

I’ve encountered this same issue when running yarn build on a Gatsby site that also uses react-live (v1.7.1). Patching the Webpack config to ignore the xor and props plugins (as described above) is a successful short term workaround. So thanks for that!

In case it’s at all helpful, my Gatsby project is available at bvaughn/react/tree/gatsby/www.

[webOS101]

I solved this problem by creating a gatsby-node.js file like follows:

const webpack = require('webpack');

exports.modifyWebpackConfig = function (config, stage) {
	config.plugin('ignore', () => new webpack.IgnorePlugin(/^(xor|props)$/));
	return config;
};

Hopefully that works, I extracted it from a much bigger file.