20

I had to make some changes on react-big-calendar module so I forked the project on github, made modifications and pushed. Then I used this command to install the new package:

npm install https://github.com/wafa-yahyaoui/react-big-calendar/tarball/master --save

The package figures out in the dependencies on package.json:

"dependencies": {
"@babel/runtime": "7.0.0-beta.55",
"@fortawesome/fontawesome-svg-core": "^1.2.10",
"@fortawesome/free-solid-svg-icons": "^5.6.1",
"@fortawesome/react-fontawesome": "^0.1.3",
"@material-ui/core": "^3.6.2",
"@material-ui/icons": "^2.0.3",
"@types/googlemaps": "3.30.11",
"@types/markerclustererplus": "2.1.33",
"ajv": "6.5.2",
"axios": "^0.18.0",
"bootstrap": "^4.1.3",
"chartist": "^0.11.0",
"classnames": "2.2.6",
"emotion": "^10.0.5",
"enhanced-resolve": "^3.4.1",
"globalize": "^1.4.0",
"history": "^4.7.2",
"iban": "0.0.11",
"jwt-decode": "^2.2.0",
"moment": "2.22.2",
"perfect-scrollbar": "1.4.0",
"react": "^16.6.3",
"react-big-calendar": "https://github.com/wafa-yahyaoui/react-big-calendar/tarball/master",
"react-bootstrap-sweetalert": "^4.4.1",
"react-chartist": "^0.13.1",
"react-datetime": "^2.16.3",
"react-dom": "^16.6.3",
"react-facebook-pixel": "^0.1.2",
"react-ga": "^2.5.6",
"react-google-maps": "^9.4.5",
"react-jvectormap": "0.0.3",
"react-nouislider": "2.0.1",
"react-redux": "^5.1.1",
"react-router": "4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^5.0.0-alpha.9",
"react-scripts": "1.1.4",
"react-spinners": "^0.4.7",
"react-swipeable-views": "0.12.15",
"react-table": "6.8.6",
"react-tagsinput": "3.19.0",
"react-transition-group": "^1.2.1",
"reactstrap": "^6.5.0",
"redux": "^4.0.1",
"redux-api-middleware": "^2.3.0",
"redux-persist": "^5.10.0",
"redux-persist-transform-filter": "0.0.18",
"redux-thunk": "^2.3.0",
"universal-cookie": "^3.0.7"}

I removed the node_modules folder, ran npm install but when running npm start I got this error:

./src/containers/apartments/calendar.js    
Module not found: Can't resolve 'react-big-calendar' in 
'/Users/wafayahyaoui/homereact/src/containers/apartments'

The imports on calendar.js file looks like this:

import React from "react";
import BigCalendar from "react-big-calendar";

What can be the source if the import error ? thank you

Akamee
  • 593
  • 1
  • 6
  • 21

3 Answers3

28

I was facing same issue. It took 3-4 hours to figure out what is problem. Here is a solution.

  • Run Command - npm run build - which build dist and lib folder.
  • remove dist and lib from .gitignore file.
  • Push your code.

If you see package-lock.json carefully, there is a line "main": "lib/index.js" which point to lib folder. But when you forked react-big-calendar repo, there was no lib folder in this repo, there was only src folder.

So it was cleared that fisrt you have to build code and push it on your repo.

shah chaitanya
  • 521
  • 4
  • 9
  • 1
    Useful insight – Turnip Oct 13 '20 at 22:17
  • 1
    Also when you import a module in your project you'll probably need to use a dist directory in the path. Like that `import moduleName from "module-name/dist";` Helped for me. – Ann Nov 17 '20 at 11:34
  • 1
    Thanks a bunch, you saved my life. I've been pulling my hair out a few hours trying to figure out why my module was not found on aws codebuild, although it is successfully built on my local. After pushing the dist folder to my github repository, my aws codebuild is completed succesfully. – Neves Dec 27 '20 at 07:49
  • Can you clarify: Do we run this from node_modules/react-big-calendar? – Diana Nov 20 '21 at 11:39
0

I had a similar problem, so maybe it would be helpful to someone. main property from package.json was pointing to the built file which wasn't accessible, so I added a prepare script to run build before publishing the package.

"main": "dist/index.js",
"scripts": {
  "prepare": "npm run build"
}
Željko Šević
  • 3,743
  • 2
  • 26
  • 23
-1

Use command :

npm i react-big-calendar
Suraj Rao
  • 29,388
  • 11
  • 94
  • 103
mohammed zakir
  • 1
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-ask). – Community Sep 13 '21 at 04:53