react-webpack-generators / generator-react-webpack

Yeoman generator for ReactJS and Webpack
http://newtriks.com/2013/12/31/automating-react-with-yeoman-and-grunt/
MIT License
2.88k stars 355 forks source link

Problem with loading component made with generator-react-webpack inside another project #327

Closed alx closed 7 years ago

alx commented 7 years ago

Hi,

Thanks a lot for this wonderful project, it's been a pleasure to create a new react component based on it: https://github.com/alx/react-bounding-box

I'm trying to import a component created with generator-react-webpack inside another project, and I've got the following issue when trying to import BoundingBoxComponent from "react-bounding-box" :

ERROR in ./src/image/ImageItem.js
Module not found: Error: Can't resolve 'react-bounding-box' in '/home/alx/code/deepdetect/demo/boundedimg/src/image'
 @ ./src/image/ImageItem.js 25:24-53
 @ ./src/image/ImageList.js
 @ ./src/App.js
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8081 webpack/hot/dev-server ./src/index.js
webpack: Failed to compile.

It compiles fin if I add a main parameter inside react-bounding-box package.json :

...
 "main": "dist/assets/app.js",
...

But then, I've got the following error in the web console:

app.js:1 Uncaught Error: Minified React error #37; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=37 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
    at n (app.js:1)
    at Object._renderNewRootComponent (app.js:21)
    at Object._renderSubtreeIntoContainer (app.js:21)
    at Object.render (app.js:21)
    at Object.o (app.js:1)
    at t (app.js:1)
    at app.js:1
    at Object.exports.__esModule (app.js:1)
    at __webpack_require__ (bootstrap b470df4…:659)
    at fn (bootstrap b470df4…:83)

Have I missed something?

Thanks a lot,

Alex

alx commented 7 years ago

I've made a temporary fix by copying node_modules/react-bounding-box/src/components/BoundingboxComponent.js inside my other project components folder and then importing it with:

import BoundingboxComponent from './BoundingboxComponent';

From what I can get, this generator is made to generate full react app. Would you know how to make it more granular to expose only a single component?

Thanks and have a nice day,

Alex

alx commented 7 years ago

Solved using a yeoman generator more adapted to my usecase: https://github.com/kadirahq/react-cdk