react-scripts: dependency tree error

szk2s commented 4 years ago

Cannot run build/start/test scripts

Expected Behavior

Runs build/start/test scripts of react-scripts

Current Behavior

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.41.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  /Users/satoshi/repos/prototypes/node_modules/webpack (version: 4.41.2)

Manually installing incompatible versions is known to cause hard-to-debug issues.

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if /Users/satoshi/repos/prototypes/node_modules/webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.

  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you find them helpful!

error Command failed with exit code 1.

Possible Solution

use same version of react-scripts in all packages
add react-scripts as deps in root package.json

Steps to Reproduce

git checkout react-shader
yarn cache clean && yarn
yarn build

szk2s commented 4 years ago

There is a lot of react-apps which is generated by create-react-app. For prototyping purpose, or faster development, it could be better to make single react-app with react-router which contains many prototypes as its components. I think it's more important to focus on the prototyping than to set up react app or maintain the mono-repo structure.

yuichkun commented 4 years ago

I don't think making every prototype a React app is a good idea because I don't think it's that important for prototype ideas to be an SPA. Sometimes an idea can be done with pure html/css and it's much much faster to add. In most cases, you don't even need React. Please remember that we should always try to keep things as minimal as possible.

The cause of the issue above is purely because of the CRAs scripts which is probably not designed for a monorepo use.

To avoid those dependency collisions, we could hoist the CRA to the root dependency, but I don't think we should do that for the following reasons:

Whenever we upgrade CRA to a newer version, it affects all the prototypes that use it; which might unexpectedly break apps that are complete. We should leave those as-is.
Sometimes we want to eject CRA apps, and those can no longer be maintained using the root CRA.

For those reasons, what we should do is to always eject CRA apps.

szk2s commented 4 years ago

Totally agree. If the always eject CRA apps solution works fine, there will be no problem for the time being. I just thought it is better to separate react components and non-react prototypes like below. Or, there should be no need to limit the pages to one index.html.

<body>
  <h1>Prototypes</h1>
  <ul>
    <li>
      <a href="./packages/hello-world/build/index.html">An Example Without React</a>
    </li>

    <li>
      <a href="./packages/easing/dist/index.html">Another Example Without React</a>
    </li>
  </ul>
  <div id="react-container"></div>
</body>

// index.js
ReactDOM.render(<App />, document.getElementById('react-container'));

magnetica-studio / web-prototypes