Mini-css-extract-plugin: CssSyntaxError (1:1) Unknown word > 1 | // extracted by mini-css-extract-plugin
mode: 'production',
devtool: '#source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new MiniCssExtractPlugin({
filename: path.resolve(__dirname, '../dist/css/[name].[contenthash].css')
})
],
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader'
]
}]
}
ERROR in ./src/style/style.css (./node_modules/[email protected]@css-loader/dist/cjs.js!./node_modules/[email protected]@mini-css-extract-plugin/dist/loader.js!./node_modules/[email protected]@css-loader/dist/cjs.js!./src/style/style.css)
Module build failed (from ./node_modules/[email protected]@css-loader/dist/cjs.js):
CssSyntaxError
(1:1) Unknown word
1 | // extracted by mini-css-extract-plugin
| ^
RichardDFang
All 15 comments
@fangshuaituo you have multiple loader for css please check your configuration, see on error, css-loader again execute on extracted file
alexander-akait
on 6 Mar 2019
@fangshuaituo you have multiple loader for
cssplease check your configuration, see on error,css-loaderagain execute on extracted file
I removed additional css-loader, but it didn't still work, and webpack‘s callback function didn't execute。When I removed 'mini-css-extract-plugin' ,it work again
RichardDFang
on 6 Mar 2019
@fangshuaituo you have multiple loader for
cssplease check your configuration, see on error,css-loaderagain execute on extracted file
What else should I do to let mini-css-extract-plugin work normaly
The following is my code
const webpack = require('webpack');
const path = require('path');
const merge = require('webpack-merge');
// const UglifyjsPlugin = require('uglifyjs-webpack-plugin');
// const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const baseWebpackConfig = require('./webpack.base.config');
var webpackConfig = merge(baseWebpackConfig, {
devtool: '#source-map',
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': 'production'
}),
new MiniCssExtractPlugin({
filename: path.resolve(__dirname, '../dist/css/[name].css'),
chunkFilename: "[id].css"
})
],
module: {
rules: [{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader',
options: {
sourceMap: true
}
}
]
}]
}
});
Looks baseWebpackConfig already contains rules for css
alexander-akait
on 6 Mar 2019
Looks
baseWebpackConfigalready contains rules forcss
I have removed it already.
webpack.base.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const config = {
context: path.resolve(__dirname, '../'),
entry: path.resolve(__dirname, '../src/index.js'),
output: {
path: path.resolve(__dirname, '../dist'),
filename: '[name].js'
},
plugins: [
new CleanWebpackPlugin(['dist'], {
root: path.resolve(__dirname, '../')
}),
new HtmlWebpackPlugin({
title: 'Output Management'
})
],
// module: {
// rules: [
// // {
// // test: /\.css$/,
// // use: [
// // 'style-loader',
// // 'css-loader'
// // ]
// // },
// // {
// // test: /\.(png|svg|jpe?g|gif)$/,
// // use: 'url-loader',
// // options: {
// // limit: 10000
// // }
// // }
// // {
// // test: /\.(woff2?|eot|ttf|otf)$/,
// // use: 'url-loader',
// // options: {
// // limit: 10000
// // }
// // }
// ]
// }
};
module.exports = config;
build.js
const webpack = require('webpack');
const webpackConfig = require('./webpack.prod.config');
webpack(webpackConfig, (err, stats) => {
process.stdout.write(stats.toString({
colors: true,
children: false,
modules: true,
chunks: false,
chunkModules: false
}) + '\n\n');
});
The console is
D:\light-ui\light-ui>npm run build
> [email protected] build D:\light-ui\light-ui
> node build/build.js
clean-webpack-plugin: D:\light-ui\light-ui\dist has been removed.
The webpack stats have any information in console
RichardDFang
on 6 Mar 2019
Please use gitter or stackoverflow for questions, it is bug tracker, thanks! Just do:
console.log(
webpack(webpackConfig, (err, stats) => {
process.stdout.write(stats.toString({
colors: true,
children: false,
modules: true,
chunks: false,
chunkModules: false
}) + '\n\n');
})
);
And see what is wrong
alexander-akait
on 6 Mar 2019
Please use gitter or stackoverflow for questions, it is bug tracker, thanks! Just do:
console.log( webpack(webpackConfig, (err, stats) => { process.stdout.write(stats.toString({ colors: true, children: false, modules: true, chunks: false, chunkModules: false }) + '\n\n'); }) );And see what is wrong
It just return a normal Compiler Object
Compiler {
_pluginCompat:
SyncBailHook {
_args: [ 'options' ],
taps: [ [Object], [Object], [Object] ],
interceptors: [],
call: [Function: lazyCompileHook],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
hooks:
{ shouldEmit:
SyncBailHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: [Function: lazyCompileHook],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
done:
AsyncSeriesHook {
_args: [Array],
taps: [],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
additionalPass:
AsyncSeriesHook {
_args: [],
taps: [],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
beforeRun:
AsyncSeriesHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: anonymous],
_x: [Array] },
run:
AsyncSeriesHook {
_args: [Array],
taps: [],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: anonymous],
_x: [] },
emit:
AsyncSeriesHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
afterEmit:
AsyncSeriesHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
thisCompilation:
SyncHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [Array] },
compilation:
SyncHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [Array] },
normalModuleFactory:
SyncHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [Array] },
contextModuleFactory:
SyncHook {
_args: [Array],
taps: [],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [] },
beforeCompile:
AsyncSeriesHook {
_args: [Array],
taps: [],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: anonymous],
_x: [] },
compile:
SyncHook {
_args: [Array],
taps: [],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [] },
make:
AsyncParallelHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: anonymous],
_x: [Array] },
afterCompile:
AsyncSeriesHook {
_args: [Array],
taps: [],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
watchRun:
AsyncSeriesHook {
_args: [Array],
taps: [],
interceptors: [],
call: undefined,
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
failed:
SyncHook {
_args: [Array],
taps: [],
interceptors: [],
call: [Function: lazyCompileHook],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
invalid:
SyncHook {
_args: [Array],
taps: [],
interceptors: [],
call: [Function: lazyCompileHook],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
watchClose:
SyncHook {
_args: [],
taps: [],
interceptors: [],
call: [Function: lazyCompileHook],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
environment:
SyncHook {
_args: [],
taps: [],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [] },
afterEnvironment:
SyncHook {
_args: [],
taps: [],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [] },
afterPlugins:
SyncHook {
_args: [Array],
taps: [],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [] },
afterResolvers:
SyncHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [Array] },
entryOption:
SyncBailHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: [Function: anonymous],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: [Array] } },
name: undefined,
parentCompilation: undefined,
outputPath: 'D:\\light-ui\\light-ui\\dist',
outputFileSystem:
NodeOutputFileSystem {
mkdirp:
{ [Function: mkdirP]
mkdirP: [Circular],
mkdirp: [Circular],
sync: [Function: sync] },
mkdir: [Function: bound ],
rmdir: [Function: bound ],
unlink: [Function: bound ],
writeFile: [Function: bound ],
join: [Function: bound join] },
inputFileSystem:
CachedInputFileSystem {
fileSystem: NodeJsInputFileSystem {},
_statStorage:
Storage {
duration: 60000,
running: Map {},
data: Map {},
levels: [Array],
count: 0,
interval: null,
needTickCheck: false,
nextTick: null,
passive: true,
tick: [Function: bound tick] },
_readdirStorage:
Storage {
duration: 60000,
running: Map {},
data: Map {},
levels: [Array],
count: 0,
interval: null,
needTickCheck: false,
nextTick: null,
passive: true,
tick: [Function: bound tick] },
_readFileStorage:
Storage {
duration: 60000,
running: [Object],
data: Map {},
levels: [Array],
count: 0,
interval: null,
needTickCheck: false,
nextTick: null,
passive: false,
tick: [Function: bound tick] },
_readJsonStorage:
Storage {
duration: 60000,
running: [Object],
data: Map {},
levels: [Array],
count: 0,
interval: null,
needTickCheck: false,
nextTick: null,
passive: false,
tick: [Function: bound tick] },
_readlinkStorage:
Storage {
duration: 60000,
running: Map {},
data: Map {},
levels: [Array],
count: 0,
interval: null,
needTickCheck: false,
nextTick: null,
passive: true,
tick: [Function: bound tick] },
_stat: [Function: bound bound ],
_statSync: [Function: bound bound ],
_readdir: [Function: bound readdir],
_readdirSync: [Function: bound readdirSync],
_readFile: [Function: bound bound readFile],
_readFileSync: [Function: bound bound ],
_readJson: [Function],
_readJsonSync: [Function],
_readlink: [Function: bound bound ],
_readlinkSync: [Function: bound bound ] },
recordsInputPath: undefined,
recordsOutputPath: undefined,
records: { 'html-webpack-plugin for "index.html"': [ {} ] },
removedFiles: Set {},
fileTimestamps: Map {},
contextTimestamps: Map {},
resolverFactory:
ResolverFactory {
_pluginCompat:
SyncBailHook {
_args: [Array],
taps: [Array],
interceptors: [],
call: [Function: lazyCompileHook],
promise: [Function: lazyCompileHook],
callAsync: [Function: lazyCompileHook],
_x: undefined },
hooks: { resolveOptions: [Object], resolver: [Object] },
cache1: WeakMap {},
cache2: Map { 'loader|{}' => [Object], 'normal|{}' => [Object] } },
resolvers:
{ normal:
{ plugins: [Function: deprecated],
apply: [Function: deprecated] },
loader:
{ plugins: [Function: deprecated],
apply: [Function: deprecated] },
context:
{ plugins: [Function: deprecated],
apply: [Function: deprecated] } },
options:
{ context: 'D:\\light-ui\\light-ui',
entry: 'D:\\light-ui\\light-ui\\src\\index.js',
output:
{ path: 'D:\\light-ui\\light-ui\\dist',
filename: '[name].js',
chunkFilename: '[name].js',
webassemblyModuleFilename: '[modulehash].module.wasm',
library: '',
hotUpdateFunction: 'webpackHotUpdate',
jsonpFunction: 'webpackJsonp',
chunkCallbackName: 'webpackChunk',
globalObject: 'window',
devtoolNamespace: '',
libraryTarget: 'var',
pathinfo: false,
sourceMapFilename: '[file].map[query]',
hotUpdateChunkFilename: '[id].[hash].hot-update.js',
hotUpdateMainFilename: '[hash].hot-update.json',
crossOriginLoading: false,
jsonpScriptType: false,
chunkLoadTimeout: 120000,
hashFunction: 'md4',
hashDigest: 'hex',
hashDigestLength: 20,
devtoolLineToLine: false,
strictModuleExceptionHandling: false },
plugins: [ [Object], [Object], [Object], [Object] ],
devtool: '#source-map',
module:
{ rules: [Array],
unknownContextRequest: '.',
unknownContextRegExp: false,
unknownContextRecursive: true,
unknownContextCritical: true,
exprContextRequest: '.',
exprContextRegExp: false,
exprContextRecursive: true,
exprContextCritical: true,
wrappedContextRegExp: /.*/,
wrappedContextRecursive: true,
wrappedContextCritical: false,
strictExportPresence: false,
strictThisContextOnImports: false,
unsafeCache: false,
defaultRules: [Array] },
cache: false,
target: 'web',
node:
{ console: false,
process: true,
global: true,
Buffer: true,
setImmediate: true,
__filename: 'mock',
__dirname: 'mock' },
performance:
{ maxAssetSize: 250000,
maxEntrypointSize: 250000,
hints: 'warning' },
optimization:
{ removeAvailableModules: true,
removeEmptyChunks: true,
mergeDuplicateChunks: true,
flagIncludedChunks: true,
occurrenceOrder: true,
sideEffects: true,
providedExports: true,
usedExports: true,
concatenateModules: true,
splitChunks: [Object],
runtimeChunk: undefined,
noEmitOnErrors: true,
checkWasmTypes: true,
mangleWasmImports: false,
namedModules: false,
hashedModuleIds: false,
namedChunks: false,
portableRecords: false,
minimize: true,
minimizer: [Array],
nodeEnv: 'production' },
resolve:
{ unsafeCache: true,
modules: [Array],
extensions: [Array],
mainFiles: [Array],
aliasFields: [Array],
mainFields: [Array],
cacheWithContext: false },
resolveLoader:
{ unsafeCache: true,
mainFields: [Array],
extensions: [Array],
mainFiles: [Array],
cacheWithContext: false } },
context: 'D:\\light-ui\\light-ui',
requestShortener:
RequestShortener {
currentDirectoryRegExp: /(^|!)D:\/light\-ui\/light\-ui/g,
parentDirectoryRegExp: /(^|!)D:\/light\-ui/g,
buildinsAsModule: true,
buildinsRegExp: /(^|!)D:\/light\-ui\/light\-ui\/node_modules\/_webpack@4\.29\.3@webpack/g,
cache: Map {} },
running: true,
watchMode: false,
_assetEmittingSourceCache: WeakMap {},
_assetEmittingWrittenFiles: Map {},
watchFileSystem:
NodeWatchFileSystem {
inputFileSystem:
CachedInputFileSystem {
fileSystem: NodeJsInputFileSystem {},
_statStorage: [Object],
_readdirStorage: [Object],
_readFileStorage: [Object],
_readJsonStorage: [Object],
_readlinkStorage: [Object],
_stat: [Function: bound bound ],
_statSync: [Function: bound bound ],
_readdir: [Function: bound readdir],
_readdirSync: [Function: bound readdirSync],
_readFile: [Function: bound bound readFile],
_readFileSync: [Function: bound bound ],
_readJson: [Function],
_readJsonSync: [Function],
_readlink: [Function: bound bound ],
_readlinkSync: [Function: bound bound ] },
watcherOptions: { aggregateTimeout: 200 },
watcher:
EventEmitter {
domain: null,
_events: {},
_eventsCount: 0,
_maxListeners: undefined,
options: [Object],
watcherOptions: [Object],
fileWatchers: [],
dirWatchers: [],
mtimes: {},
paused: false,
aggregatedChanges: [],
aggregatedRemovals: [],
aggregateTimeout: 0,
_onTimeout: [Function: bound _onTimeout] } },
dependencies: undefined }
I have a similar problem and have been hammering google for hours on this.. please assist...thanks
// you can use this file to add your custom webpack plugins, loaders and anything you like.
// This is just the basic way to add additional webpack configurations.
// For more information refer the docs: https://storybook.js.org/configurations/custom-webpack-config
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path')
const extractedCSS = new MiniCssExtractPlugin({
filename: "[name].bundle.css"
});
module.exports = async ({ config, mode }) => ({
...config,
plugins: [
extractedCSS
],
module: {
...config.module,
rules: [
...config.module.rules,
{
test : /\.(js|jsx)$/,
exclude : /node_modules/,
use : 'babel-loader',
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader",
],
},
{
test: /\.(eot|otf|ttf|woff|woff2)$/,
use: [
{
loader: 'file-loader',
options: {
context: '/', // check if '/' => './'
name: 'fonts/[name].[ext]'
}
}
]
},
{
test: /\.(png|svg|jpg|gif|ico)$/,
oneOf: [
{test: /flags\/\dx\d\//, use: 'file-loader?name=ext/flags/[name].[ext]'},
{test: /\/amcharts\//, use: 'file-loader?name=ext/amcharts/[name].[ext]'},
{test: /.*/, use: 'file-loader?name=images/[name].[ext]'}
]
},
{
test: /\.(mobileconfig)$/,
use: 'file-loader?name=files/[name].[ext]'
},
{
test: /datatables\.net.*/,
use: 'imports-loader?define=>false'
}
]
}
})
yairEO
on 7 Apr 2019
In my case incompatibility with file-loader.
stepanmas
on 6 Jun 2019
I met the same question, and I use this way to resolve the problem:
In order to use MiniCssExtractPlugin, and always keep the mode of development,
I refer the sass-loader , not MiniCssExtractPlugin
look at my config:
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
plugins: [
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
],
module: {
rules: [{
test: /\.scss$/,
use: [
// only use the mode of development
MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
}]
}
Jsmond2016
on 25 Jul 2019
plugins: [
new MiniCssExtractPlugin({
filename: '[name].[hash].css',
chunkFilename: '[id].[hash].css',
}),
]
{
test: /\.module\.scss$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: postCSSLoaderOptions,
},
'css-loader',
'postcss-loader',
'sass-loader',
],
},
This doesn't work for me. Any help ?
mbj36
on 26 Apr 2020
Hi, I'm having this issue too, even without using the MiniCssExtractPlugin. Maybe it's related to Elixir (I'm using that in this project)?
webpack.config.js
====================================================
const path = require('path');
const glob = require('glob');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
//const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const TerserPlugin = require('terser-webpack-plugin');
//const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = (env, options) => {
const devMode = options.mode !== 'production';
return {
plugins: [
//new MiniCssExtractPlugin({ filename: '../css/app.css' }),
new CopyWebpackPlugin([{ from: 'assets/static/', to: '../' }])
]
.concat(devMode ? [new HardSourceWebpackPlugin()] : []),
optimization: {
minimizer: [
new TerserPlugin({ cache: true, parallel: true, sourceMap: devMode }),
//new OptimizeCSSAssetsPlugin({})
]
},
entry: {
//'app': glob.sync('./vendor/*/.js').concat(['./js/app.js'])
app: './assets/js/app.tsx'
},
output: {
filename: 'app.js',
path: path.resolve(__dirname, 'priv/static/js'),
publicPath: '/js/'
},
devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
module: {
rules: [
{
test: /.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
},
{
test: /.css$/,
use: [
"css-loader",
"style-loader"
]
}
]
},
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
}
}
};
====================================================
app.tsx
====================================================
// We need to import the CSS so that webpack will load it.
// The MiniCssExtractPlugin is used to separate it out into
// its own CSS file.
//import "../css/app.scss"
import "../css/phoenix.css"
// webpack automatically bundles all modules in your
// entry points. Those entry points can be configured
// in "webpack.config.js".
//
// Import deps with the dep name or local files with a relative path, for example:
//
// import {Socket} from "phoenix"
// import socket from "./socket"
//
import "phoenix_html"
import * as React from 'react'
import * as ReactDOM from 'react-dom'
import Root from './Root'
// This code starts up the React app when it runs in a browser. It sets up the routing
// configuration and injects the app into a DOM element.
ReactDOM.render(
====================================================
The specific error message I'm getting is:
====================================================
XXXXXXXX:phoenix_react_playground XXXXXX $ iex -S mix phx.server
Erlang/OTP 23 [erts-11.0.2] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe] [dtrace]
[info] Running PhoenixReactPlaygroundWeb.Endpoint with cowboy 2.8.0 at 0.0.0.0:4000 (http)
[info] Access PhoenixReactPlaygroundWeb.Endpoint at http://localhost:4000
Interactive Elixir (1.10.4) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)>
webpack is watching the files…
[hardsource:c5e8e0dd] Using 22 MB of disk space.
[hardsource:c5e8e0dd] Writing new cache c5e8e0dd...
[hardsource:c5e8e0dd] Tracking node dependencies with: package-lock.json, yarn.lock.
Hash: 3e7fe0019f22e1eb2892
Version: webpack 4.41.5
Time: 3247ms
Built at: 08/01/2020 9:11:27 PM
Asset Size Chunks Chunk Names
../favicon.ico 1.23 KiB [emitted]
../images/phoenix.png 13.6 KiB [emitted]
../robots.txt 202 bytes [emitted]
app.js 2.75 MiB app [emitted] app
Entrypoint app = app.js
[./assets/css/phoenix.css] 670 bytes {app} [built] [failed] [1 error]
[./assets/js/Root.tsx] 3.76 KiB {app} [built]
[./assets/js/app.tsx] 865 bytes {app} [built]
[./assets/js/pages/index.tsx] 233 bytes {app} [built]
[./deps/phoenix_html/priv/static/phoenix_html.js] 2.21 KiB {app} [built]
[./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {app} [built]
+ 31 hidden modules
ERROR in ./assets/css/phoenix.css
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError
(1:1) Unknown word
1 | var api = require("!../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js");
| ^
2 | var content = require("!!./phoenix.css");
3 |
@ ./assets/js/app.tsx 5:0-28
watcher00090
on 2 Aug 2020
I solved it by changing the css loader section of the 'module' variable in my webpack.config.js to
{
test: /\.css$/i,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
modules: true,
},
},
],
}
changed from
{
test: /.css$/,
use: [
"css-loader",
"style-loader"
]
}
Hi guys, I'm not coming with the secured solution but I will give you a tip how to find an origin of the error. So I had a similar error:
ERROR in css/2835.b6385168fc1bbc79a717.css from Css Minimizer
C:\path\to\the\css\2835.b6385168fc1bbc79a717.css:174:3: Unknown word [css/2835.b6385168fc1bbc79a717.css:174,3]
at Input.error (C:\path\to\the\node_modules\cssnano\node_modules\postcss\lib\input.js:128:16)
In my case what was happening is that the file contained return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg", _extends({... on that line which was wrong for the css minifier.
This line was added by "@svgr/webpack": "^5.5.0", which is specific svg loader that I used for my React app.
In your case it could be something else, check the error you receive in the terminal, then comment the minimizer option in your Webpack config, generate the build and check the generated css file to see what is happening there.
Hope it helps. Cheers
ozaytsev86
on 14 Jan 2021
Make sure you're using the right version of Node if you're using nvm to manage multiple versions. In my case I finally ran nvm version and realized I was on 8.0. Once I switched to the version appropriate for our project (nvm use 10) it compiled fine. This may be a less likely scenario for many, but here's hoping it helps someone.
bosscube
on 21 Jan 2021
Related issues
TheHolyWaffle
·
4Comments
Legends
·
4Comments
mike1808
·
3Comments
PetrShypila
·
4Comments
grrowl
·
3Comments
Most helpful comment
@fangshuaituo you have multiple loader for
cssplease check your configuration, see on error,css-loaderagain execute on extracted file