Module build failed: Unknown word (5:1) #362
Comments
|
+1 |
|
I had the same error, "style!" didn't help though. I'm using Angular2 Webpack Starter, turned out the issue was caused by unmatching include/exclude directories in webpack.common.js (css to-string-loader) and webpack.dev.js (css style-loader). So the erroneous config was: Exchanged that by: |
|
I have this exact same error in webpack2 + css-loader, adding !css-loader or !style-loader or not does not help at all. Does anyone know why it might be happening or what can cause this kind of error? EDIT: Now I know, I was trying to use it with vue the wrong way: http://stackoverflow.com/questions/37031123/why-am-i-not-being-able-to-compile-sass-with-webpack |
|
I can confirm the bug, happening on both webpack 1 and 2. Going to investigate. |
|
Actually here's the problem, loaders are applied twice: Both webpack config and require string is applied when resolving. I think this is as designed. Solution: either remove the loader from |
|
@michael-ciniawsky don't know about support in require('./index.css'); // add `link`
var exportedStyles = require('!!css-loader!./index.css'); // just export
console.log(exportedStyles.toString()); // Here we have string with all styles from `index.css`or with import './index.css';
import exportedStyles from '!!css-loader!./index.css';
console.log(exportedStyles.toString()); // Here we have string with all styles from `index.css`/cc @michael-ciniawsky we can close this issue |
|
/cc @desperate-man @dphov @uhinze @chanon @desperate-man @ekulabuhov please see comment above 🌟 |
|
@evilebottnawi I in a overhaul of the README and will address this 👍 |
|
In my case, the problem was the order of the loaders. I changed this: module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
'style-loader'
]
}
]
}to this: module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}and it worked. |
|
@wolmir this seems to be the actual fix for this! thanks! |
|
So it seems the readme is all up to date, and by following it I implemented all these fixes, but I'm still seeing this issue: My main.js looks like this: |
|
I had to do this instead: |
|
this worked for me |
|
I've tried several combinations, but the only combo that worked for me, was the same as for @claysquareninety All other combinations with css-loader, always gave me an error while compiling. |
|
{ test: /.scss$/, use: [ "style-loader" , "css-loader" ] } |
|
I had the same promlem. I have looked through my package.json. The 'babel-cli' was installed. I uninstalled it. It helped. |
|
i also have but i use all kinds of methods is not use please help.... |
|
I m also facing the same problem. Please provide me the solutions. }; |
|
hi my webpack config file const path = require('path'); } }; i am getting issue ERROR in ./scr/components/piza/PizzaImage.css (./node_modules/css-loader/dist/cjs.js??ref--5-1!./node_modules/postcss-loader/src??postcss!./scr/components/piza/PizzaImage.css) |
|
I had this error when there were two rules for css that match for the same file: function useCSS({modules}) {
return [
isProduction ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
query: {
modules: modules,
sourceMap: !isProduction,
importLoaders: 1,
localIdentName: isProduction ? '[hash:base64:5]' : '[local]__[hash:base64:5]'
}
},
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: [
require('postcss-import')({ addDependencyTo: webpack }),
require('postcss-url')(),
require('postcss-preset-env')({
/* use stage 2 features (defaults) */
stage: 2,
}),
require('postcss-reporter')(),
require('postcss-browser-reporter')({
disabled: isProduction
})
]
}
}
];
}
{
test: /[^\.]+\.css$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
use: useCSS({modules: false})
},
{
test: /\.m\.css$/,
exclude: [
path.resolve(__dirname, 'node_modules')
],
use: useCSS({modules: true})
},adding matching for whole file solved the issue: test: /^[^\.]+\.css$/, |
|
for me, I was repeating it twice like this. module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
}, ....
{
test: /\.(css)$/,
loader: 'css-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
I removed one of them and it worked. So finally this. module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
], .... |
Omg! That works, thank you so much! |
|
FWIW I also had this error because I didn't realize I was importing |
|
Priority of loaders matters in this case . |
The hero we need! |
|
I was facing this issue with module.exports = async ({ config }) => {
config.module.rules = [
{
test: /\.js$/, // Transform all .js files required somewhere with Babel
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
// Preprocess our own .css files
// This is the place to add your own loaders (e.g. sass/less etc.)
// for a list of loaders, see https://webpack.js.org/loaders/#styling
test: /\.css$/,
exclude: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
// Preprocess 3rd party .css files located in node_modules
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: 'file-loader',
},
{
test: /\.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
noquotes: true,
},
},
],
},
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// Inline files smaller than 10 kB
limit: 10 * 1024,
},
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
enabled: false,
// NOTE: mozjpeg is disabled as it causes errors in some Linux environments
// Try enabling it in your environment by switching the config to:
// enabled: true,
// progressive: true,
},
gifsicle: {
interlaced: false,
},
optipng: {
optimizationLevel: 7,
},
pngquant: {
quality: '65-90',
speed: 4,
},
},
},
],
},
{
test: /\.html$/,
use: 'html-loader',
},
{
test: /\.(mp4|webm)$/,
use: {
loader: 'url-loader',
options: {
limit: 10000,
},
},
},
];
return config;
}; |
|
I was also facing this issue with storybook webpack config , and before pushing the rules I do: And then push my css-modules rules, inspired by storybookjs/storybook#2320: |
and others
When I try to load CSS like so
require('css!./file.css');I receive an error:Content of the CSS file:
Here is a complete sample:
https://gist.github.com/desperate-man/50e522139734934b287382cf63e534af
However if I load the CSS file like this
require('style!./file.css');or thisrequire('./file.css');I have no errors. Isrequire('css!');supposed to work or not? I use version 0.25.0.The text was updated successfully, but these errors were encountered: