Problems with dom-iterator and webpack

[webOS101]

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?

[webOS101]

for now, I worked around this by using webpack.IgnorePlugin(), which is not a great solution as the props module isn't a terribly unique name.

[kitten]

Can you create some kind of reproduction? I'm not entirely sure why this is happening and I'm using this in several webpack projects myself

[kitten]

Hey, reiterating on this. I'm not sure what's going on with your webpack config, but I assume it's not using the bundled version since it's not webpack 2 and is having trouble with that dependency. I suggedt you alias react-live to the umd bundle in that case :)

[webOS101]

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!

[kitten]

@webOS101 Worst case, I already have selection-range vendored, I can just rewrite the part that depends on dom-iterator

[coston]

Hi! I'm also having trouble using react-live with Gatsby. Did anyone come up with a work around for this problem?

[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.

[kitten]

I still have to look into this and haven't gotten to it yet. This doesn't occur with the bundled ES version of the package, so you can try that: https://github.com/FormidableLabs/react-live/blob/master/package.json#L7

Or the minified one (uargh)

I'll take a look at the dom-iterator package asap (except if someone else is interested of course)

[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.

[kitten]

This will be fixed by #89 which will use react-simple-code-editor instead, so I'll tentatively close this issue