2

I am using react-responsive-carousel to build out a carousel on a react site. I installed the package with yarn add and got everything working nicely. I then copied and pasted the .scss files from the project git repo into my own project to use as a base (same class names etc) for styling it my own way. Then my project started throwing errors. Specifically this:

./node_modules/css-loader/dist/runtime/api.js Error: ENOENT: no such file or directory, open '/mysite/node_modules/css-loader/dist/runtime/api.js'

I have since deleted the .scss files since it was with that change that the error appeared, this did nothing, oddly. I have also tried manually installing css-loader and babel-core as suggested on similar problems, but this did nothing and css-loader still doesn't show up in my node-modules folder.

this is my package.json

{
  "name": "mysite",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "apollo-boost": "^0.4.3",
    "apollo-client": "^2.6.3",
    "apollo-link-http": "^1.5.15",
    "babel-core": "^6.26.3",
    "css-loader": "^3.0.0",
    "eslint-loader": "^2.2.1",
    "graphql": "^14.4.2",
    "graphql-tag": "^2.10.1",
    "node-sass": "^4.12.0",
    "react": "^16.8.6",
    "react-apollo": "^2.5.8",
    "react-dom": "^16.8.6",
    "react-lightbox-component": "^1.2.1",
    "react-markdown": "^4.1.0",
    "react-responsive-carousel": "^3.1.49",
    "react-router": "^5.0.1",
    "react-router-dom": "^5.0.1",
    "react-scripts": "3.0.1",
    "webpack": "^3.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

any ideas what could be going wrong here? I used create-react-app to start the project, do I need to eject it and edit some webpack config file maybe?

It's really weird since the issue started when I added new .scss files, which I since deleted but this didn't revert the issue.

Any help would be much appreciated.

Improve this question
6
  • Are you using LINUX OS ? I think that ubuntu internally stores cache for npm modules which in turn are dependencies of our project Commented Jul 15, 2019 at 12:52
  • I am on macOS Mojave 10.14.5 Commented Jul 15, 2019 at 12:53
  • Try this stackoverflow.com/questions/46419024/… Commented Jul 15, 2019 at 12:53
  • 2
    Once remove node modules and package-lock file and then run npm install again Commented Jul 15, 2019 at 13:01
  • 2
    deleting node modules and another yarn install worked... how bizarre. Im sure I tried that earlier too, to no avail. Anyways i'll keep this here for anyone else facing the same problem. Commented Jul 15, 2019 at 13:03
Related questions
0
CSS loading throw error using webpack
0
Cannot use css react js server side
1
Can't resolve 'css-loader!autoprefixer-loader'
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.