Geek Answers Handbook

Unexpected character when using extract-text-webpack-plugin

For some reason, this configuration fails when trying to build using extract-text-webpack-plugin. I tried to work with extract-text-webpack-plugin for several days and I had a lot of problems trying to output css. I feel that I configured it correctly after looking through many manuals and looking at many questions, but maybe I am missing something.

webpack.config.js

var entry_object = {}; entry_object[build_js_dir + "file.js"] = static_js + 'file.js'; entry: entry_object, output: { path: './', filename: '[name]', chunkFileName: "[id].chunk.js" }, module: { loaders: [{ test: /\.js$/, include: path.resolve(__dirname), exclude: /node_modules/, loader: 'babel-loader', query: { presets: ['react', 'es2015'] } }, { test: /\.scss$/, loader: ExtractTextPlugin.extract("css-loader!sass-loader") } ]} plugins: [ new ExtractTextPlugin("[name].css"), ] }

Error Details:

 ~/src/$ webpack --show-error-details Hash: ab317ccc65911901bea4 Version: webpack 1.13.0 Time: 1032ms Asset Size Chunks Chunk Names ./static/build/js/file.js 51.7 kB 0 [emitted] ./static/build/js/file.js [1] ./static/scss/style.scss 0 bytes [built] [failed] + 1 hidden modules ERROR in ./static/scss/style.scss Module parse failed: /home/zdelagrange/src/portal/cust-portal/bitsight/static/scss/style.scss Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '@' (1:0) at Parser.pp.raise (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:920:13) at Parser.pp.getTokenFromCode (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2813:8) at Parser.pp.readToken (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2508:15) at Parser.pp.nextToken (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:2500:71) at Parser.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:1615:10) at Object.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/node_modules/acorn/dist/acorn.js:882:44) at Parser.parse (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/lib/Parser.js:902:15) at DependenciesBlock.<anonymous> (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack/lib/NormalModule.js:104:16) at DependenciesBlock.onModuleBuild (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:310:10) at nextLoader (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) at /home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 at Storage.finished (/home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) at /home/zdelagrange/src/portal/cust-portal/bitsight/node_modules/graceful-fs/graceful-fs.js:78:16 at FSReqWrap.readFileAfterClose [as oncomplete] (fs.js:405:3) @ ./static/js/file.js 3:0-29

but when I use this for the scss loader, it works fine:

 { test: /\.scss$/, include: /.scss$/, exclude: [ static_scss, static_scss_pdf ], loaders : [ 'style-loader', 'css-loader?sourceMap', 'sass-loader?sourceMap' ] },
+5
source share
2 answers

The OP problem is unexpected @ (probably tied to @import ).
The same error message occurs when it tries to solve something like url(./filename.png)

 ERROR in ./~/jquery-ui/themes/base/images/ui-icons_cc0000_256x240.png Module parse failed: /myproject/node_modules/jquery-ui/themes/base/images/ui-icons_cc0000_256x240.png Unexpected character ' ' (1:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character ' ' (1:0)

I needed to install url-loader and file-loader and add them as loaders in webpack:

 npm install --save url-loader npm install --save file-loader

webpack.config.js

 module: { loaders: [ { test: /\.css$/, loader: "style-loader!css-loader" }, { test: /\.png$/, loader: "url-loader?limit=100000" } ] }

Now he happily embeds these files:

  $ webpack ... [69] ./~/css-loader!./~/jquery-ui/themes/base/tooltip.css 528 bytes {4} [built] [70] ./~/css-loader!./~/jquery-ui/themes/base/theme.css 18.7 kB {4} [built] [71] ./~/jquery-ui/themes/base/images/ui-icons_444444_256x240.png 5.05 kB {4} [built] [72] ./~/jquery-ui/themes/base/images/ui-icons_555555_256x240.png 5.05 kB {4} [built]
+2
source

You are missing a comma at the end of the object in front of the plugins. It should be:

 ]}, plugins: [ new ExtractTextPlugin("[name].css"), ] }

I stumbled upon this because I had the same problem as you. If the comma is not a problem, I got it working by following this guide: http://www.jonathan-petitcolas.com/2015/05/15/howto-setup-webpack-on-es6-react-application-with-sass .html

+1
source

More articles:


All Articles