Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Using b.require with react and react-dom results in an error

See original GitHub issue

> browserify -r react -r react-dom -p tinyify

/.../node_modules/tinyify/node_modules/common-shakeify/index.js:222
  return row[kDuplicates] || []
            ^

TypeError: Cannot read property 'Symbol(duplicates)' of undefined
    at getDuplicates (/.../node_modules/tinyify/node_modules/common-shakeify/index.js:222:13)
    at analyzer.modules.forEach (/.../node_modules/tinyify/node_modules/common-shakeify/index.js:121:21)
    at Map.forEach (<anonymous>)
    at DestroyableTransform.onend [as _flush] (/.../node_modules/tinyify/node_modules/common-shakeify/index.js:118:22)
    at DestroyableTransform.prefinish (/.../node_modules/readable-stream/lib/_stream_transform.js:138:10)
    at emitNone (events.js:106:13)
    at DestroyableTransform.emit (events.js:208:7)
    at prefinish (/.../node_modules/readable-stream/lib/_stream_writable.js:619:14)
    at finishMaybe (/.../node_modules/readable-stream/lib/_stream_writable.js:627:5)
    at endWritable (/.../node_modules/readable-stream/lib/_stream_writable.js:638:3)

It appears to only happen when I use them both; if I -r them separately then it works fine. I tried it with some simpler packages such as once and xtend together and that appeared to work just fine.

The package.json:

{
  "private": true,
  "scripts": {
    "test": "browserify -r react -r react-dom -p tinyify"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-dom": "16.6.3"
  },
  "devDependencies": {
    "browserify": "16.2.3",
    "tinyify": "2.4.3"
  }
}

Issue Analytics

State:
Created 5 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

casrcommented, Nov 14, 2018

I don’t believe it is. I have an API example that uses common-shakeify 0.5.2 that results in a similar error:

const commonModules = ['react', 'react-dom']

const g = { global: true }
const commonB = browserify()
commonB.require(commonModules)
commonB.transform('unassertify', g)
commonB.transform(envify({ _: 'purge', NODE_ENV: 'production' }), g)
commonB.transform('uglifyify', g)
commonB.plugin('common-shakeify')
commonB.plugin('browser-pack-flat/plugin')

const commonBundle = commonB.bundle().pipe(require('minify-stream')({ sourceMap: false }))

0reactions

casrcommented, Nov 14, 2018

I should add the when using -r/b.require, the top-level row.file is equal to the module name and not its actual file path. Doing some historical search through history showed that this was not always the case.

Top Results From Across the Web

Cannot resolve module 'react-dom' - Stack Overflow

Issue is react-dom is not installed, when you hit npm -v react-dom , it gives you the version of npm not react-dom version,...

Error Handling in React 16 – React Blog

Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.

Error Boundaries - React

A class component becomes an error boundary if it defines either (or both) of the lifecycle methods static getDerivedStateFromError() or componentDidCatch() .

Refs and the DOM - React

Refs provide a way to access DOM nodes or React elements created in the render method. In the typical React dataflow, props are...

ReactDOM – React

If you use ES5 with npm, you can write: var ReactDOM = require('react-dom');. The react-dom package also provides modules specific to client and...