Reorganising a directory structure to solve “Cannot find module/preset/plugin” in grunt with babel…

Hello

My organisation had a directory structure for projects like:

• grunt/Gruntfile.js
• grunt/package.json
• grunt/node_modules/
• web/index.html (well, .php)
• web/js/script.js

Which had been fine with our grunt toolchain for SCSS, JS etc.

When I added JSX and react via browserify I found I encountered an “Error running grunt-browserify”

>> Error: Cannot find module ‘react’ from ‘/directory/of/source/jsx’

There may be a simple way of telling grunt-browserify (or similar, I had the same errors when investigating alternatives) the location of the node_modules/ for modules, presets and plugins, but until I find out what it is, I have reorganised to:

• /Gruntfile.js
• /package.json
• /node_modules
• web/index.html
• web/js/react-app.js

And changed my Gruntfile.js to reflect that the web/* source files folder live in a child directory (web/) rather than a sibling (../web/).

>> Bundle web/js/react-app.js created.

I would prefer to have not moved my directories around, but for now, my OCD can live with a bit of pollution of the parent directory.