Error using Preact + Nivo

aalises commented 6 years ago

Hello, I am developing using a library for visualization built on top of D3 called Nivo (github and main page), which uses React and React motion among other things

My project uses Preact and Preact-Compat. However, Nivo is still not working as it does not find react in some of its components (see attached log of the error)...

ERROR in ./node_modules/@nivo/heatmap/node_modules/recompose/withPropsOnChange.js
Module not found: Error: Can't resolve 'react' in '/home/gittest/node_modules/@nivo/heatmap/node_modules/recompose'
 @ ./node_modules/@nivo/heatmap/node_modules/recompose/withPropsOnChange.js 7:13-29
 @ ./node_modules/@nivo/heatmap/es/enhance.js
 @ ./node_modules/@nivo/heatmap/es/HeatMap.js
 @ ./node_modules/@nivo/heatmap/es/index.js
 @ ./src/components/ConnectomeView.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:4200 webpack/hot/dev-server ./src/index.tsx

ERROR in ./node_modules/@nivo/heatmap/node_modules/recompose/shouldUpdate.js
Module not found: Error: Can't resolve 'react' in '/home/gittest/node_modules/@nivo/heatmap/node_modules/recompose'
 @ ./node_modules/@nivo/heatmap/node_modules/recompose/shouldUpdate.js 5:13-29
 @ ./node_modules/@nivo/heatmap/node_modules/recompose/pure.js
 @ ./node_modules/@nivo/heatmap/es/enhance.js
 @ ./node_modules/@nivo/heatmap/es/HeatMap.js
 @ ./node_modules/@nivo/heatmap/es/index.js
 @ ./src/components/ConnectomeView.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:4200 webpack/hot/dev-server ./src/index.tsx

ERROR in ./node_modules/@nivo/heatmap/node_modules/recompose/defaultProps.js
Module not found: Error: Can't resolve 'react' in '/home/gittest/node_modules/@nivo/heatmap/node_modules/recompose'
 @ ./node_modules/@nivo/heatmap/node_modules/recompose/defaultProps.js 5:13-29
 @ ./node_modules/@nivo/heatmap/es/enhance.js
 @ ./node_modules/@nivo/heatmap/es/HeatMap.js
 @ ./node_modules/@nivo/heatmap/es/index.js
 @ ./src/components/ConnectomeView.tsx
 @ ./src/index.tsx
 @ multi (webpack)-dev-server/client?http://localhost:4200 webpack/hot/dev-server ./src/index.tsx

It also does not find preact on some of its dependencies such as react-motion and react-measure. Is there any solution to this?

Cheers,

developit commented 6 years ago

How are you doing the preact-compat aliasing?

paulief commented 6 years ago

+1 @developit

I am having the same issue with using react-phone-number-input and getting a number of these errors:

Error: Cannot find module 'react' from '/path/to/project/node_modules/react-phone-number-input/commonjs'

I have the following in my .babelrc file which is working fine for some other react-based modules:

"plugins": [
    ["module-resolver", {
      "root": ["."],
      "alias": {
        "react": "preact-compat",
        "react-dom": "preact-compat",
      }
    }],
  ]

paulief commented 6 years ago

For what it's worth @aalises , I was able to get this working by using a symlink: https://stackoverflow.com/a/47560276/6590940

cd node_modules
ln -s preact-compat react
ln -s preact-compat react-dom

Those commands could be put into a npm postinstall script so it's portable. Maybe not ideal, but I couldn't figure it out otherwise....

aalises commented 6 years ago

Hello! Sorry for not answering before! The part of the project that used Nivo has been swept under the rug for now and have not yet had the chance to try your solution out @paulief ! Will do on the next week, thank you very much!

developit commented 6 years ago

Symlink is the way to go if you're not able to use one of the methods described in preact-compat's Readme. Using Babel won't work because most people don't run Babel on node_modules - so the aliases never get applied to anything you import from npm.

FWIW if you find the symlinks ugly, you can use our alias packages, which use npm itself to do the linking:

npm install --save-dev preact-compat/react preact-compat/react-dom

juniorgarcia commented 5 years ago

Symlink is the way to go if you're not able to use one of the methods described in preact-compat's Readme. Using Babel won't work because most people don't run Babel on node_modules - so the aliases never get applied to anything you import from npm.

FWIW if you find the symlinks ugly, you can use our alias packages, which use npm itself to do the linking:
npm install --save-dev preact-compat/react preact-compat/react-dom

Is this on the documentation on some FAQ or Troubleshooting guide? I believe it should be. Saved my day.

lnguyenfx commented 4 years ago

For those who are interested, I have forked and updated preact-compat/react and and preact-compat/react-dom to work with preact 10.0+.

npm install --save-dev lnguyenfx/react lnguyenfx/react-dom

marvinhagemeister commented 4 years ago

That's not necessary with Preact 10.x . We've moved compat to core and it is accessible via teh preact/compat import. See our docs.

preactjs / preact-compat

Error using Preact + Nivo #459