Module not found: Error: Cannot resolve module 'react/addons'

[lanc8]

I am using react 15.1.0. I get an error: ERROR in ./~/react-forms-builder/lib/app.js Module not found: Error: Cannot resolve module 'react/addons' in D:\MySource\web\node_modules\react-forms-builder\lib @ ./~/react-forms-builder/lib/app.js 1:142-165

How can I solve it?

[mbluemer]

This issue is due to the react/addons imports in all of the test files. The import is done for use of ReactTestUtils. Here is React documentation that discusses the addon utilities and how to properly use them.

Basically replacing the two lines:

var React = require('react/addons');
var TestUtils = React.addons.TestUtils;

with:

var TestUtils = require('react-addons-test-utils');

and adding react-addons-test-utils to the NPM dependencies should do the trick.

[haymant]

I have the same problem. Do you mean modify src/*.js and rebuild?

Unfortunately, npm install failed:

D:\git\react-form-builder\node_modules\canvas>if not defined npm_config_node_gyp (node "C:\Users\xxxx\AppData\Roaming\npm\node_modules\npm\bin\node-gyp-bin\....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node "" rebuild ) Warning: Missing input files: C:\GTK\bin\zlib1.dll C:\GTK\bin\libexpat-1.dll C:\GTK\bin\libpng14-14.dll C:\GTK\bin\libcairo-2.dll C:\GTK\bin\libfontconfig-1.dll C:\GTK\bin\libfreetype-6.dll Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch. Canvas.cc CanvasGradient.cc CanvasPattern.cc CanvasRenderingContext2d.cc color.cc Image.cc ImageData.cc init.cc d:\git\react-form-builder\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'cairo.h': No such file or directory (compiling so urce file ..\src\Canvas.cc) [D:\git\react-form-builder\node_modules\canvas\build\canvas.vcxproj] d:\git\react-form-builder\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'cairo.h': No such file or directory (compiling so urce file ..\src\CanvasPattern.cc) [D:\git\react-form-builder\node_modules\canvas\build\canvas.vcxproj] win_delay_load_hook.cc d:\git\react-form-builder\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'cairo.h': No such file or directory (compiling so urce file ..\src\CanvasGradient.cc) [D:\git\react-form-builder\node_modules\canvas\build\canvas.vcxproj] d:\git\react-form-builder\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'cairo.h': No such file or directory (compiling so urce file ..\src\Image.cc) [D:\git\react-form-builder\node_modules\canvas\build\canvas.vcxproj] d:\git\react-form-builder\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'cairo.h': No such file or directory (compiling so urce file ..\src\ImageData.cc) [D:\git\react-form-builder\node_modules\canvas\build\canvas.vcxproj] d:\git\react-form-builder\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'cairo.h': No such file or directory (compiling so urce file ..\src\init.cc) [D:\git\react-form-builder\node_modules\canvas\build\canvas.vcxproj] d:\git\react-form-builder\node_modules\canvas\src\Canvas.h(19): fatal error C1083: Cannot open include file: 'cairo.h': No such file or directory (compiling so urce file ..\src\CanvasRenderingContext2d.cc) [D:\git\react-form-builder\node_modules\canvas\build\canvas.vcxproj] gyp ERR! build error gyp ERR! stack Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe failed with exit code: 1 gyp ERR! stack at ChildProcess.onExit (C:\Users\xxxx\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23) gyp ERR! stack at emitTwo (events.js:106:13) gyp ERR! stack at ChildProcess.emit (events.js:191:7) gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:204:12) gyp ERR! System Windows_NT 6.1.7601 gyp ERR! command "C:\PROGRA~1\nodejs\node.exe" "C:\Users\xxxx\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild" gyp ERR! cwd D:\git\react-form-builder\node_modules\canvas gyp ERR! node -v v6.2.1 gyp ERR! node-gyp -v v3.4.0 gyp ERR! not ok react-forms-builder@0.0.3 D:\git\react-form-builder -- react-bootstrap-native-slider@2.0.1 +-- detect-browser@1.6.2 +-- es6bindall@0.0.3 +-- react@15.4.2 +-- react-bootstrap-slider@1.1.3 | +-- bootstrap@3.3.7 | +-- bootstrap-slider@9.7.0 | +-- es6bindall@0.0.9 | +-- jquery@3.1.1 | +-- react@15.4.2 |-- react-dom@15.4.2 +-- react-dom@15.4.2 -- react-html5-slider@0.1.2 +-- react@15.4.2 -- react-dom@15.4.2

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm ERR! Windows_NT 6.1.7601 npm ERR! argv "C:\PROGRA~1\nodejs\node.exe" "C:\Users\xxxx\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "install" npm ERR! node v6.2.1 npm ERR! npm v4.1.1 npm ERR! code ELIFECYCLE

npm ERR! canvas@1.6.2 install: node-gyp rebuild npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the canvas@1.6.2 install script 'node-gyp rebuild'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the canvas package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! node-gyp rebuild npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs canvas npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls canvas npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! D:\git\react-form-builder\npm-debug.log

[haymant]

The build is fine after removing canvas from package.json. To embed it still triggered some runtime errors without editor rendered.

[blackjk3]

Looks like you might be missing Cairo? What if you install cairo and then try npm install again? I have the osx script below... I'm not sure what the equivalent is on windows.

https://cairographics.org/download/

$ brew install pkg-config cairo pango libpng jpeg giflib

[haymant]

I am using ubuntu. I can npm install canvas and have cairo installed.

[roshangeorge93]

Any fix for this issue?

[georgewritescode]

Why would we need Cairo if we are not running tests but just want to use the package?

[georgewritescode]

@blackjk3 Can you take a loot at this and consider adding it to master? https://github.com/mbluemer/react-form-builder/commit/4e4a6a78d454c841d5239c24213f8c29f4457101

[ilyablbnv]

@blackjk3 Hi! Could you review this issue and try to fix it ? Thanks

[cryingpotat0]

Hey @haymant how did you end up fixing this issue?

[rankin]

having the same problem @blackjk3 any hope of fixing?

[emilany]

@blackjk3 also experiencing the same problem. How do we go about this?

[shubham-2710]

Same issue , any hope for fixing it ?