Pnpm: react-scripts/webpack is missing babel after fresh install and can't load entry module

[lumio]

pnpm version: 0.66.2

Code to reproduce the issue:

Reproduce by cloning this project, installing dependencies with pnpm i and then starting the project with pnpm start

Expected behavior:

Project loads in browser showing a black screen with different options, as it does with npm start and yarn start

Actual behavior:

Webpack can't load entry module (see console error in browser):
Uncaught Error: Cannot find module "/absolute/path/src/index.js"

Second error shortly after in browser and terminal:
Error in multi main
Module not found: 'babel' in /Users/lumio/Clients/bentalkin/tutorial/tmp/waveblock

Additional information:

• node -v: v7.9.0
• OS X

[vjpr]

By modifying node_modules/react-scripts/scripts/build.js#71 to include console.log(err, stats), we can see the real error in the console. (react-scripts seems to be hiding errors which is super bad).

  missing:
   [ '/Users/Vaughan/dev-scratch/waveblock/node_modules/.registry.npmjs.org/react-scripts/0.9.5/node_modules/react-scripts/node_modules/babel-loader',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/.registry.npmjs.org/react-scripts/0.9.5/node_modules/react-scripts/node_modules/babel-loader',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/.registry.npmjs.org/react-scripts/0.9.5/node_modules/react-scripts/node_modules/babel-loader.webpack-loader.js',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/.registry.npmjs.org/react-scripts/0.9.5/node_modules/react-scripts/node_modules/babel-loader.loader.js',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/.registry.npmjs.org/react-scripts/0.9.5/node_modules/react-scripts/node_modules/babel-loader.js',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/.registry.npmjs.org/react-scripts/0.9.5/node_modules/react-scripts/node_modules/babel-loader.web-loader.js',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/babel-loader',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/babel-loader',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/babel-loader.webpack-loader.js',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/babel-loader.web-loader.js',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/babel-loader.loader.js',
     '/Users/Vaughan/dev-scratch/waveblock/node_modules/babel-loader.js',
     '/Users/Vaughan/dev-scratch/node_modules/babel-loader',
     '/Users/Vaughan/dev-scratch/node_modules/babel-loader',
     '/Users/Vaughan/dev-scratch/node_modules/babel-loader.webpack-loader.js',
     '/Users/Vaughan/dev-scratch/node_modules/babel-loader.web-loader.js',
     '/Users/Vaughan/dev-scratch/node_modules/babel-loader.loader.js',
     '/Users/Vaughan/dev-scratch/node_modules/babel-loader.js' ],

The issue is the webpack module resolver is not adhering to the Node.js module resolver algorithm, that is, it should look for the babel-loader in all node_modules dirs up the heirarchy. Instead it is jumping to waveblock/node_modules.

The babel-loader plugin can be found here which is not being searched:

/Users/Vaughan/dev-scratch/waveblock/node_modules/.registry.npmjs.org/react-scripts/0.9.5/node_modules

In react-scripts/config/paths.js there is this:

// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421

var nodePaths = (process.env.NODE_PATH || '')
  .split(process.platform === 'win32' ? ';' : ':')
  .filter(Boolean)
  .filter(folder => !path.isAbsolute(folder))
  .map(resolveApp);

1. nodePaths is null because the paths are absolute. This looks like an issue that should be raised with create-react-app.

2. nodePaths are added to resolve.fallback, and need to be added to resolveLoader.fallback.

[vjpr]

This works on other package managers because they are violating the node resolver algorithm by flattening the node_modules which is bad.

[lumio]

Thanks for pointing that out to me! I will dive into that as soon as possible!

[zkochan]

The repo specified in the issue works with [email protected] if react, react-dom and react-scripts are updated to their latest versions