15

I an new to webpack, and I have been able to get it to packup my javascript, but the CSS eludes me. I keep getting a:

“You may need an appropriate loader to handle this file type”

One the first line of my css file. The CSS file is simple:

body {
    color:red
}

The webpack.config.js looks like this:

module.exports = {
    debug: true,
    entry: [ './sdocs.js' ],
    output: {
        filename: './[name].bundle.js'
    },
    loaders: [
        { test: /\.css$/, loader: "style-loader!css-loader" },
    ],
}

sdocs.js is also simple and looks like this:

require('./sdocs.css');

Finally the result of running webpack look like this:

ERROR in ./sdocs.css
Module parse failed: C:\Users\Tim\PhpstormProjects\xxx\sdocs.css
Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:5)
at Parser.pp.raise (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.unexpected (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1490:8)
at Parser.pp.semicolon (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1469:73)
at Parser.pp.parseExpressionStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1994:8)
at Parser.pp.parseStatement (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1772:188)
at Parser.pp.parseTopLevel (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1666:21)
at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:1632:17)
at Object.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\acorn\dist\acorn.js:885:44)
at Parser.parse (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock.<anonymous> (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack\lib\NormalModule.js:104:16)
at DependenciesBlock.onModuleBuild (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:310:10)
at nextLoader (C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:275:25)
at C:\Users\Tim\PhpstormProjects\xxx\node_modules\webpack-core\lib\NormalModuleMixin.js:259:5
at Storage.finished (C:\Users\Tim\PhpstormProjects\xxx\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:38:16)
at C:\Users\Tim\PhpstormProjects\xxx\node_modules\graceful-fs\graceful-fs.js:78:16
at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:439:3) @ ./sdocs.js 1:0-22

I have triple checked, css-loader and style-loader are loaded at the local level. I had them installed globally at first, but i removed them globally and reinstalled them locally. BTW, the debug flag did nothing extra, no change in output, which i thought was weird.

I am running on a windows platform is that matters

rgvtim
  • 415
  • 1
  • 3
  • 11
  • I would quadruple check if CSS and style loaders are in your node modules and then as a sanity check, wipe the node modules and reinstall. – Sean Larkin Jun 21 '16 at 12:29
  • 1
    Yea, I quadruple checked. I created a separate project, fresh install of the node_modules, same result. I took it a step further and fired up a linux VM i have installed webpack, css-loader and style-loader. And received the same error. There is nothing in the node_modules except webpack, css-loader, and style-loader. I tired multiple css files, all pretty simple. I changed up the format of loader option under the loaders from style-loader!css-loader to style!css. – rgvtim Jun 22 '16 at 00:52
  • Just created a new VM of ubuntu, install nodejs, webpack and the 2 loaders, the node_modules directory contains entries for css_loader and style_loader, still no joy. This has got to be something stupid on my part. – rgvtim Jun 22 '16 at 03:56

4 Answers4

22

Ok,

This is what fixed it for me if anyone runs across this. The issue was in the webpack.config.js. The one the finally worked looked like this:

module.exports = {
    debug: true,
    entry: [ './sdocs.js' ],
    output: {
        filename: './[name].bundle.js'
    },
    module: {
      loaders: [
        { test: /\.css$/, loader: "style-loader!css-loader" },
      ],
    }
}

The piece that was missing was moving the loaders key under a modules key.

rgvtim
  • 415
  • 1
  • 3
  • 11
  • 3
    I have the exact same issue, with the same error trace, my config file looks like your correct version but I still cannot make it work. I am starting to get tired – Dimitris Karagiannis Sep 16 '16 at 21:45
  • 1
    My issue got solved with the above only after I removed an 'exclude' : 'some path' which was in addition to above setting. Exclude was obviously not letting the css file get packaged. Hope this helps anyone else facing similar issue. – Praym Mar 03 '17 at 16:15
  • I can confirm that after removing the `exclude` property it worked perfectly. Thank you very much, @Praym! – Diego Fortes May 19 '20 at 22:12
  • 1
    Note that on webpack 4 you should change `loaders` to `rules`. – A. Kali Oct 05 '20 at 21:05
14

I tried specifying 'loaders' in 'module' key. But, it didn't work for me. I think for webpack versions above 2.5.1, adding a rule in 'module' works perfectly.

Add this in your webpack.config.js

module: {
    rules:[
        { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }
    ]
}

When you add it as a rule you wouldn't have to provide tha loaders key separately!

Gautam
  • 258
  • 2
  • 14
0

I had met the same issue you meet. Maybe you were in dev environment (hot reload), just press ctrl+c to kill the process on terminal, and reopen dev env (npm run dev).

mx0
  • 4,605
  • 10
  • 39
  • 47
Ridesky
  • 21
  • 1
  • 2
0

I was facing this problem for about 10 days. so here's the solution i found to fix this problem. After using create-react-app you created a react app, first run the script npm run eject.

Then, go to the following link https://webpack.js.org/loaders/, click on the val-loader and install it as described there, then install the url-loader file.

It has to work now.

Simas Joneliunas
  • 2,522
  • 12
  • 20
  • 28
Eilya
  • 1