I want to load my css's styles.
import '../assets/home/css/style.css'
I'm using 'style-loader', 'css-loader' but I got this error message:
Module not found: Error: Can't resolve 'style-loader' in
'/Users/sm_emamian/Desktop/react js/shadyab' #
./app/containers/Intro.js 23:0-39
my webpack.config.js:
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/,
include: __dirname
},
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader' ]
}
],
resolve: {
extensions: ['.js', '.jsx', '.css']
}
}
}
npm install style-loader --save-dev
Also style-loader should be used with the 'loader', not 'use'.
Webpack config line:
test: /\.css$/,
loader: 'style-loader!css-loader'
Ref: https://github.com/webpack-contrib/style-loader
Related
I'm building out a react/TS app and am running into this compiler error. I'm sure it's a config issue, but alas, I can't figure out which config. I'm not sure if it has to do with the generic specifically, or if I will see the "unexpected token" error show up in other circumstances as well.
ERROR in ./src/App.tsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/.../src/App.tsx: Unexpected token (15:4)
13 | const [coordinates, setCoordinates] = useState<
14 | CoordinatesQueryType | undefined
> 15 | >();
| ^
16 |
Webpack config follows. FWIW I added "react" to module.rule.options, but then i got another error that said I was missing "babel-preset-react", installed that, then another error, and then didn't wanna go down the rabbit hole.
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.tsx",
mode: "development",
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
resolve: { extensions: ["*", ".js", ".jsx", ".ts", ".tsx"] },
output: {
path: path.resolve(__dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js"
},
devServer: {
port: 4000,
hot: true
},
plugins: [new webpack.HotModuleReplacementPlugin()]
};
And babel.rc:
{
"presets": ["#babel/env", "#babel/preset-react", "#babel/preset-flow"],
"plugins": ["#babel/plugin-transform-runtime"]
}
Is there any setup for typescript?
I think you are missing this in babel presets:
#babel/preset-typescript
And also I can't see any ts-loader in your webpack config. So you would not get typechecking even though you compile typescript. To fix this:
Change current rule for babel to match only js files
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
Install necessary tools:
yarn add -D #babel/preset-typescript ts-loader
Add #babel/preset-typescript to babel.rc presets.
Add ts-loader to webpack.config.js module rules.
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
options: { presets: ["#babel/env"] }
},
// Typescript loader
{
test: /\.(ts|tsx)$/,
exclude: /node_modules/,
use: ["ts-loader"],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"]
}
]
},
I think this should be able to fix the problem.
Also, you are having both options\presets and .babelrc, try to use only one of these for configuration.
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
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' ],
}]