Unexpected token (1:0) #import "./variables"; Getting this error using webpack
my webpack.config is like this module:
{
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.scss$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{ loader: "sass-loader" }
]
}
]
}
Any one help me to sort the issue
Sass-loader seems to be incompatible with webpack 4.
You can use mini-css-extract-plugin which I use with webpack 4.
https://github.com/webpack-contrib/mini-css-extract-plugin
People are facing this #import issue with webpack 4. Take a look at following thread.
https://gist.github.com/mburakerman/629783c16acf5e5f03de60528d3139af
Related
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
I am trying to integrate a very simple React app written in TypeScript with Storybook. I tried to follow several issues on the Storybook issue list, but can't tell what is the latest information. When I try to run the Storybook, I get the following error:
ERROR in ./.storybook/config.js
Module not found: Error: Can't resolve '../stories' in
'react-mobx-mui-ts-seed/.storybook' # ./.storybook/config.js 6:4-25
Can someone please point me to where I may be going wrong? The full project is available on Github here: https://github.com/archfirst/react-mobx-mui-ts-seed
Here's my webpack.config.js for Storybook:
const path = require('path');
const SRC_PATH = path.join(__dirname, '../src');
module.exports = {
module: {
rules: [
{ test: /\.ts$/, loader: 'ts-loader', exclude: /node_modules/ },
{ test: /\.tsx$/, loader: 'ts-loader', exclude: /node_modules/ },
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
exclude: /node_modules/
},
{
test: /\.css$/,
use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
}
]
},
resolve: {
modules: [SRC_PATH, 'node_modules']
},
plugins: []
};
Thanks in advance.
Edit: I have this working now. You can visit the Github project link for the updated working code.
While using react-day-picker, i get the following error:
You may need an appropriate loader to handle this file type.
| /* DayPicker styles */ |
| .DayPicker { | display: -webkit-box; |
display: -ms-flexbox; #
./src/components/portfolio/RecordInvestorDetail.react.js 47:0-41
Module parse failed: /home/yash/Documents/CRONJ/waccal/node_modules/react-day-picker/lib/style.css Line 3: Unexpected token .
_
You must install and enable style-loader and css-loader for Webpack:
npm install style-loader css-loader --save-dev
Then add those loaders in webpack.config.js:
{
module: {
rules: [
{
test: /\.css$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" }
]
}
]
}
}
I resolved the error by adding
loaders : [
'style',
]
I already had
loaders : [
'style-loader',
'css-loader',
'autoprefixer?browsers=last 2 version',
'sass-loader?includePaths[]=' + paths.src('styles')
]
Now the loaders are
loaders : [
'style',
'style-loader',
'css-loader',
'autoprefixer?browsers=last 2 version',
'sass-loader?includePaths[]=' + paths.src('styles')
]
I had this configuration before:
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
}
And got the issue fixed by removing the line:
exclude: /node_modules/
I wasnt allowing webpack to compile the files from react-day-picker by having this.
the correct:
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
}
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
I want to add .scss support in my app, which was created using create-react-app.
I did eject npm run eject and installed necessary dependencies: npm install sass-loader node-sass --save-dev
Inside config/webpack.config.dev.js I added to the loaders this snippet:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
},
So the beginning of the loaders array now look like so:
loaders: [
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: require('./babel.dev')
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
loader: 'style!css!postcss'
},
// LOAD & COMPILE SCSS
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
},
Now in my jsx when I try to import scss file:
import './assets/app.scss';
I get an error:
Uncaught Error: Cannot find module "./assets/app.scss"
So my config must be wrong as I'm not able to load .scss files. How to adjust config to load .scss files in ejected create-react-app?
Check the first loader, first it get all the files and it excludes the other loaders files
loaders: [
{
exclude: [
/\.html$/,
/\.(js|jsx)$/,
/\.css$/,
/\.json$/,
/\.svg$/
],
loader: 'url',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
so adding
/\.sass$/,
/\.scss$/,
to exclude, seems that fixed the same problem I had :D
When trying to integrate sass into empty react project I used this article. The solution presented there did not work and received the similar error as in the subject.
In my case replacing style-loader with require.resolve('style-loader') helped:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: [require.resolve('style-loader'), require.resolve('css-loader'), require.resolve('sass-loader')]
},
OK, I found the solution - changed from this:
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ["style", "css", "scss"]
},
to this:
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
},
And now my .scss files are loading!!
You probably have to use
include: paths.appSrc,
option to enable webpack hot-reload. So you config snippet could looks like
{
test: /\.scss$/,
include: paths.appSrc,
loaders: ['style', 'css', 'sass']
},
as per Latest Configuration [CRA]
::webpack.config.dev.js::
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.scss$/,
loaders: [
require.resolve("style-loader"), // creates style nodes from JS strings
require.resolve("css-loader"), // transl ates CSS into CommonJS
require.resolve("sass-loader") // compiles Sass to CSS
]
},
Check this loader settings for the latest versions.
{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}