“You may need an appropriate loader to handle this file type” with Webpack and CSS
Solution 1
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.
Solution 2
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!
Solution 3
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.
TexasNeo
Updated on February 06, 2020Comments
-
TexasNeo over 4 years
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
-
Dimitris Karagiannis over 7 yearsI 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
-
Praym about 7 yearsMy 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.
-
Jonas Modie over 5 yearsadding this lines in webpack and running command npm install --save-dev css-loader has worked for me
-
Gautam over 5 years@JonasModie Happy to know :)
-
Harish Rana over 5 yearsAlso run npm install style-loader --save to install style loader for it to work.
-
Diego Fortes almost 4 yearsI can confirm that after removing the
exclude
property it worked perfectly. Thank you very much, @Praym! -
A. Kali over 3 yearsNote that on webpack 4 you should change
loaders
torules
.