error 'cannot find module' on 'main.scss' with Webpack, SASS, and React

Question

When trying to set up SCSS to run the styling on my React application using Webpack I am presented with the error:

Module not found: Error: Can't resolve 'style' in '/Users/sachinkaria/Workspace/GC' @ ./app/index.js 4:0-29 @ multi ./app/index.js'

and in the browser:

Uncaught Error: Cannot find module "/styles/main.scss"

My webpack.config.js configuration is below:

var HtmlWebpackPlugin = require('html-webpack-plugin');-
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"},{
            test: /\.scss$/,
            loaders: ['style', 'css', 'sass']
        }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};

My package.json:

    {
  "name": "get-cooked",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "prod": "webpack -p"
  },
  "author": "Sachin Karia",
  "license": "ISC",
  "dependencies": {
    "classnames": "^2.2.5",
    "react": "^0.14.6",
    "react-bootstrap": "^0.30.7",
    "react-dom": "^0.14.6",
    "react-router": "^2.0.0-rc5"
  },
  "devDependencies": {
    "babel-core": "^6.4.5",
    "babel-loader": "^6.2.1",
    "babel-preset-react": "^6.3.13",
    "html-webpack-plugin": "^2.7.1",
    "node-sass": "^4.5.0",
    "sass-loader": "^6.0.2",
    "webpack": "2.2.1",
    "webpack-dev-server": "^1.14.1"
  }
}

My index.js where I am importing the main.scss (producing the error):

var React = require('react');
var ReactDOM = require('react-dom');
var routes = require('./config/routes');
require('./styles/main.scss');

ReactDOM.render(routes, document.getElementById('app'));

All my scss files are in my styles folder, however, I can't seem to import them into my index.js and am returned with the 'Cannot find module' error.'

Here is my folder structure:

- app
  - components
    - Home.js
  - config
    - routes.js
  - containers
  - styles
    - components
    - main.scss
  - index.html
  - index.js
- nodemodules
webpack.config.js
package.json

Any help appreciated!

Sachin Karia · Accepted Answer · 2017-02-27 12:58:41Z

4

Turns out this is is a loader issue and not having the correct node modules. Simply running the script below will the issue:

npm install style-loader css-loader --save-dev

as well as using adding "style-loader", "css-loader" and "sass-loader" to Webpack rather than "style","css","sass".

edited Feb 27, 2017 at 12:58

answered Feb 27, 2017 at 10:25

Sachin Karia

5652 gold badges10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

paqash · Accepted Answer · 2020-08-07 12:18:48Z

3

Replace /styles with

./styles

if index.js and styles are in the same folder

EDIT: If you're coming from Google - turns out style-loader and css-loader were not installed, make sure of that as well.

edited Aug 7, 2020 at 12:18

answered Feb 26, 2017 at 22:55

paqash

2,3141 gold badge20 silver badges22 bronze badges

5 Comments

Sachin Karia Over a year ago

I've added the ./styles however still experience the same error. The index.js and styles are in the same folder.

paqash Over a year ago

So it now reads: require('./styles/main.scss')? What's the error now?

Sachin Karia Over a year ago

Yes, its the same error in the console: 'Module not found: Error: Can't resolve 'style' in '/Users/sachinkaria/Workspace/GC' @ ./app/index.js 4:0-29 @ multi ./app/index.js' and in my browser console: Uncaught Error: Cannot find module "./styles/main.scss" at webpackMissingModule

paqash Over a year ago

Well I'm stumped. Any chance of updating the question with your folder and paths?

Sachin Karia Over a year ago

This turned out to be a loaders issue, style-loader and css-loader were not installed.

Michael Jungo · Accepted Answer · 2017-02-26 22:56:28Z

2

/styles/main.scss is an absolute path, so it will look in the root of your file system. You want to use a relative path:

require('./styles/main.scss');

This requires styles to be in the same directory as index.js. So if your project structure looks like:

- styles/
  - main.scss
- app/
  - index.js

You would need to go up one directory:

require('../styles/main.scss');

In case you would like to use paths relative to your project's root directory, you could use the resolve options in your webpack config.

answered Feb 26, 2017 at 22:56

Michael Jungo

33.2k4 gold badges97 silver badges87 bronze badges

1 Comment

Sachin Karia Over a year ago

My index.js file is in the same directory as my styles folder. I have added the ./styles however still encounter the same error.

Koko · Accepted Answer · 2017-08-30 20:27:32Z

0

This is majorly a webpack related issue and can appear on any webpack related app Simply include "css-loader": "^0.28.6", "style-loader": "^0.18.2" in your package.json "devDependencies": {...} file and run npm update.

answered Aug 30, 2017 at 20:27

Koko

1111 silver badge7 bronze badges

Comments

KidKode · Accepted Answer · 2018-01-24 12:52:56Z

I was playing about with CI and Automation in VSTS for ReactJS and auto deploy to SharePoint Online Web Parts made me update VS Code IDE, edit Gulp file, CD,MK's... etc. Upon re opening VS Code I didn't notice I am now in a diff Dir as shown in my Terminal window. What's worse? I am in a different directory which is not near my root node_modules folder! I was here initially: ../node_modules/ - << This is my initial Node mod root!!!

../src/webparts/az

Whereas now I was in:

../node_modules/
../src/webparts\SPWPTest\src\webparts\az

NOTE: before proceeding note down you node,IDE,react,ES, modules versions etc. in case you need a roll back.

Solution?

CD to correct Dir
Do your Cleans and Builds to hopefully get Served. Gulp those.
If still not working then from within the new dir run a: npm update

Now you will node_modules have been added locally. Good or bad? I don't know but it works! :-)

Collectives™ on Stack Overflow

error 'cannot find module' on 'main.scss' with Webpack, SASS, and React

5 Answers 5

Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related