Module not found: Error: Cannot resolve module 'react/addons' about react-form-builder HOT 13 OPEN

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.

from react-form-builder.

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
[email protected] D:\git\react-form-builder
-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | +-- [email protected] | -- [email protected]
+-- [email protected]
-- [email protected] +-- [email protected] -- [email protected]

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 [email protected]: 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! [email protected] install: node-gyp rebuild
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] 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

from react-form-builder.

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

from react-form-builder.

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

from react-form-builder.

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

from react-form-builder.

Any fix for this issue?

from react-form-builder.

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

from react-form-builder.

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

from react-form-builder.

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

from react-form-builder.

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

from react-form-builder.

having the same problem @blackjk3 any hope of fixing?

from react-form-builder.

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

from react-form-builder.

Same issue , any hope for fixing it ?

from react-form-builder.