I am using webpack 2 and node 6.9 and trying to implement the css/scss in my project. I have installed all the required loaders like style,sass etc. earlier below was my webpack configuration and it is working fine but scss is not applied on my project,
rules: [{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel-loader',
options: {
cacheDirectory: true
}
}]
to apply the css i have installed all the loaders and i changed the above webpack configuration to below
rules: [{
test: /\.scss$/,
loader: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
'css-loader',
'babel-loader',
'postcss',
{
loader: 'sass-loader',
query: {
sourceMap: false,
presets: ['es2015'],
}
}
],
})
}]
};
plugins: [
new ExtractTextPlugin("style.css"),
]
but it is still not working for me. i have tried some other configurations also but everytime it is giving me same error as below,
Uncaught Error: Module parse failed: \index.js Unexpected token (7:3)
You may need an appropriate loader to handle this file type.
ReactDOM.render((
<App />
), document.getElementById('root'));
at Object.<anonymous> (bootstrap 6298272…:708)
at __webpack_require__ (bootstrap 6298272…:659)
at bootstrap 6298272…:708
at bootstrap 6298272…:708
Can anyone help me to get rid of the error and apply the scss. Thanks in advance!!
Able to make it work. Below is the code:
rules: [{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: [ "style-loader", "css-loader", 'sass-loader' ],
}]
Related
Error appears while build app with webpack. Can someone help me with that?
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> * {
| color:red;
| }
webpack.config
module: {
rules: [{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
}, {
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}]
},
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
WOFF files are failing to load and I am not getting an idea to why file-loader is failing to load WOFF, WOFF2 and SVG.
Here is my Webpack 4 loaders config:
module: {
rules: [
{
//tell webpack to use jsx-loader for all *.jsx files
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
exclude: /node_modules/,
loader: "file-loader"
},
{
test: /\.(eot|ttf)$/,
loader: "file-loader",
},
{
test: /\.html$/,
exclude: /node_modules/,
loader: 'html-loader'
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader", "sass-loader"]
}
]
}
Please suggest a solution to me.
You can user webpack url-loader for that and it will resolve your problem.If you are using npm you can install npm install url-loader --save-dev and in your webpack.config.js you can write module settings like this
{test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,loader: 'url-loader?limit=100000'}
and import images like import img from './image.svg'
Github : https://github.com/webpack-contrib/url-loader
NPM : https://www.npmjs.com/package/url-loader
{
test: /\.woff(2)?$/,
use: [
{
loader: 'url-loader',
options: {
limit: 10000,
name: './font/[hash].[ext]',
mimetype: 'application/font-woff'
}
}
]
}
It worked for me. And also you can use resolve-url-loader
https://www.npmjs.com/package/resolve-url-loader
Error Terminal
ERROR in ./~/semantic-ui-css/semantic.css
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected character '#' (11:0)
Error Console chrome
Uncaught Error: Cannot find module "semantic-ui-css/semantic.css"
I found the error it's in this line import 'semantic-ui-css/semantic.css'; so i search for this kind of error, i just installed url-loader and keeps the same error, here's my webpack config
module: {
loaders: [
{ test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
{ test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/, <--- this delete a lot of errors with semantic, but wont work with "Unexpected character '#'"
loader: 'url-loader?limit=100000'
},
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'eslint-loader'
},
{
test: /\.css$/,
loaders: [
'style-loader?sourceMap',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]'
],
exclude: /node_modules/
},
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]',
'resolve-url-loader',
'sass-loader'
],
exclude: /node_modules/
}
]
}
so, how should i fix this issue? i think it's something with import 'semantic-ui-css/semantic.css'; for something that i dont get it yet, maybe because it dosnt have import (this section) from 'semantic-ui-css/semantic.css';
change this:
{
test: /\.css$/,
loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ],
exclude: /node_modules/
},
to this:
{
test: /\.css$/,
loaders: [ 'style-loader?sourceMap', 'css-loader?modules&importLoaders=1&localIdentName=[path]___[name]__[local]___[hash:base64:5]' ]
}
In other words... remove the exclude.
Another option is to not change as mentioned above... And you probably dont want to assume css modules for all node_modules. I think this way is better... So, instead add an additional rule:
{
test: /\.css$/,
include: path.resolve('node_modules'),
use: [
{
loader: 'style-loader',
options: {
sourceMap: true
}
}, {
loader: 'css-loader',
options: {
sourceMap: true
}
}
}]
}`
I'm currently converting an application to typescript. My npm start is working without any problem but when I try to run react-storybook I have this error
ERROR in ./src/conf.json
Module build failed: SyntaxError: Unexpected token m in JSON at position 0
at Object.parse (native)
at Object.module.exports (/node_modules/json-loader/index.js:7:48)
# ./srcReact/actions/ApiActions.js 4:16-46
Both are using the same loaders in webpack.config.js
loaders: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/
],
loader: 'url-loader',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [ path.resolve(__dirname, '../') ],
exclude: [ path.resolve(__dirname, 'bundles') ],
query: {
presets: ['react', 'es2015'],
plugins: ['transform-decorators-legacy'],
cacheDirectory:true
},
exclude: /(node_modules|bower_components)/
},
{
test: /\.css$/,
include: [ path.resolve(__dirname, '../') ],
exclude: [ path.resolve(__dirname, 'bundles') ],
loader: "style-loader!css-loader"
},
{
test: /\.svg$/,
loader: "svg-loader"
},
{
test: /\.json$/,
loader: "json-loader"
}
]
I also have a json.d.ts for the json
declare module "*.json" {
const value: any;
export default value;
}
After some tests it looks like the storybook is not able to load my json defition (json.d.ts).
Thanks
Finally got it working by changing my module declaration to
declare module "!json!*" {
const value: any;
export default value;
}
Adding the first ! removed the confusion between the json-loader and the typescript module. Got inspired by this github issue https://github.com/webpack-contrib/json-loader/issues/13
Migrating from a working Webpack v1 config to Webpack 2. But running into an error while trying to run the build:
ERROR in ./src/index.jsx
Module build failed: TypeError: /home/pierce/Projects/my-js-app/src/index.jsx: Cannot create property 'mappings' on string
I have updated my loaders to match the new format:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader"
},
{
test: /\.(jpg|png)$/,
loader: 'file-loader',
query: {
name: '[path][name].[hash].[ext]',
},
},
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
{
test: /\.scss$/,
use: [
{
loader: 'style-loader'
},
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: { sourceMap: true }
}
]
},
{
test: /\.(woff|woff2|eot|ttf|svg)(\?v=\d+\.\d+\.\d+)?/,
loader: 'url-loader',
query: {
limit: 100000
}
},
{
test: /\.icon-svg$/,
use: [{loader:'babel-loader'}, {loader: 'svg-react-loader'}]
},
// Bootstrap 3
{
test: /bootstrap-sass\/assets\/javascripts\//,
loader: 'imports-loader?jQuery=jquery'
}
]
},
It's as if something is not being compiled the way it was before, therefore causing a TypeError.
Turns out I was babelifing twice.
If you're also splitting your webpack.config.js into separate files for your different environments, be sure that webpack.dev.config.js does not include a babel-loader entry if your webpack.base.config.js does.
Otherwise, if you use the loader twice the 2nd time around will cause an error. This wasn't a Webpack 2 error but a webpack splitting-configs-and-missing-a-small-thing error
Encountered a similar issue in my compilation. Found out that I was using babel loader for .js and .jsx both.
Removed .jsx and its working as expected.
A snippet of my webpack.config.js looks like this.
{
test: /\.js$/,
exclude: [/(node_modules)/],
use: [
{
loader: 'react-hot-loader'
},
{
loader: 'babel-loader',
options: {
presets: ['react', 'es2015', 'stage-0'],
plugins: [
'transform-class-properties',
'transform-decorators-legacy'
]
}
}
]
}
In case someone else is having the same issue, I had to remove the following from loader for it to work
{
test: /\.jsx?$/,
use: ['react-hot-loader/webpack']
}
In my case it helped when I removed devtool: 'inline-source-map' from webpack