create-react-library icon indicating copy to clipboard operation
create-react-library copied to clipboard

Module not found

Open Sarl23 opened this issue 4 years ago • 12 comments

Hello, I'm new in react, I have a problem, when I start my example project does not run the library that called internally, Can not find the library, may be by mistake of package.json?

Failed to compile.

./src/App.js Module not found: Can't resolve 'chatCop' in 'C:\aaa\aaaa\aaaa\chatCop\example\src'

Package.json "dependencies": { "react": "file:../node_modules/react", "react-dom": "file:../node_modules/react-dom", "react-scripts": "file:../node_modules/react-scripts", "chat-component": "file:.."

I would be very helpful any response, thanks

Sarl23 avatar Sep 21 '20 04:09 Sarl23

@Sarl23 Did you figure something out about it?

I'm able to get it working now by running npm install inside example folder.

For some reason, it wasn't installed on the creating process...

joaolucasgtr avatar Oct 02 '20 12:10 joaolucasgtr

Hey!... I tried to install npm inside example folder and in the root project, but it didn't work. So.. I found the next solution: I created .env file and i wrote this exception SKIP_PREFLIGHT_CHECK=true, and i modified this path "chat-component": "file:.." to "chat-component": "file:../" and my project works now!!

Sarl23 avatar Oct 08 '20 03:10 Sarl23

I've run into the same issue, in my case the following approach worked:

  1. Your example/package.json dependencies should be only these:
  "dependencies": {
    "react": "link:../node_modules/react",
    "react-dom": "link:../node_modules/react-dom",
    "react-scripts": "link:../node_modules/react-scripts",
    "YOUR_PROJECT_NAME": "link:.."
  },
  1. Reinstall all dependencies in the root of your project

In my case I had to call:

yarn add -P antd lodash.throttle react-pose react-select
  1. Run yarn start in the root and then yarn start example - should work

Note: I also removed both node_modules first, do not think it is related to the solution though

mathew3 avatar Nov 08 '20 10:11 mathew3

I've run into the same issue, in my case the following approach worked:

  1. Your example/package.json dependencies should be only these:
  "dependencies": {
    "react": "link:../node_modules/react",
    "react-dom": "link:../node_modules/react-dom",
    "react-scripts": "link:../node_modules/react-scripts",
    "YOUR_PROJECT_NAME": "link:.."
  },
  1. Reinstall all dependencies in the root of your project

In my case I had to call:

yarn add -P antd lodash.throttle react-pose react-select
  1. Run yarn start in the root and then yarn start example - should work

Note: I also removed both node_modules first, do not think it is related to the solution though

Thanks for the tip, however I get an error of Unsupported URL Type "link:": link:.. when I try to use link: for the package paths. I also cannot find any information on the npmjs site about using this, I can only see local dependency paths via the use of file:...

ShaneYu avatar Jan 20 '21 11:01 ShaneYu

I did however find that using yarn opposed to npm I can use link:... for the dependency paths, then running yarn in the root and the example I was able to get everything to work.

Not too keen that I have to use yarn rather than just npm, but it seems to work.

Just to recap then....

  1. Delete the node_modules folders npx rimraf .\node_modules\ .\example\node_modules
  2. Install yarn globally if you don't have it already npm i -g yarn
  3. Replace file: with link: for all dependencies in the package.json file under the example folder
  4. Within the root of the project run yarn to install all of the deps
  5. Within the example folder of the project run yarn (I had to do this for example to pick up the lib)
  6. Run yarn start in both the root and the example (make sure to do it in the root first to build the lib dist folder)

Following these steps lead to successfully building the lib and running the example, I was able to replicate this multiple times with freshly created projects using create-react-library both JS and TypeScript flavours.

ShaneYu avatar Jan 20 '21 11:01 ShaneYu

It's worth noting to the the developers that may pick up this bug to fix later that this occurs when just running the cli to create a new project and it runts the step to run npm install in the example directory; fails with the same unable to resolve dependency tree etc.

Also, I have tried using different versions of node as well (10.x, 12.x and 14.x) all with the same result.

ShaneYu avatar Jan 20 '21 16:01 ShaneYu

It happened to me only when I select template typescript, just remove the line that includes typescript from your packages.json.

  "dependencies": {
    "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
    "@testing-library/react": "file:../node_modules/@testing-library/react",
    "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
    "@types/jest": "file:../node_modules/@types/jest",
    "@types/node": "file:../node_modules/@types/node",
    "@types/react": "file:../node_modules/@types/react",
    "@types/react-dom": "file:../node_modules/@types/react-dom",
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-scripts": "file:../node_modules/react-scripts",
    "typescript": "file:../node_modules/typescript", <========= REMOVE THIS LINE
    "react-typescript": "file:.."
  },

after that just run npm install on your example project and that's it!

aiherrera avatar Feb 16 '21 04:02 aiherrera

It happened to me only when I select template typescript, just remove the line that includes typescript from your packages.json.

  "dependencies": {
    "@testing-library/jest-dom": "file:../node_modules/@testing-library/jest-dom",
    "@testing-library/react": "file:../node_modules/@testing-library/react",
    "@testing-library/user-event": "file:../node_modules/@testing-library/user-event",
    "@types/jest": "file:../node_modules/@types/jest",
    "@types/node": "file:../node_modules/@types/node",
    "@types/react": "file:../node_modules/@types/react",
    "@types/react-dom": "file:../node_modules/@types/react-dom",
    "react": "file:../node_modules/react",
    "react-dom": "file:../node_modules/react-dom",
    "react-scripts": "file:../node_modules/react-scripts",
    "typescript": "file:../node_modules/typescript", <========= REMOVE THIS LINE
    "react-typescript": "file:.."
  },

after that just run npm install on your example project and that's it!

thanks a lot. that resolved the issue for me!

levox avatar Mar 15 '21 16:03 levox

But what if I want to write in typescript?

liorp avatar Aug 21 '21 13:08 liorp

Yes I'd also like Typescript support. Any solutions...

vpress-admin avatar Aug 31 '21 11:08 vpress-admin

You can copy the typescript version from root package.json and past it in example/package.json

dvdprr6 avatar Nov 22 '21 14:11 dvdprr6

You can copy the typescript version from root package.json and past it in example/package.json

I ran into this Windows / Typescript issue and fixed as suggested by copying the the Typescript dependency from the root to the example package.json and running npm install in the example folder. Are there any plans to fix this issue so this workaround is not needed?

WorldOfMaze avatar Jan 10 '22 04:01 WorldOfMaze