List item
I am trying to implement less-loader in my web pack, for that
I've installed less-loader successfully to my env which is also getting reflected in package.json and node_modules. But still when I'm building webpack it's not getting 'less' module.
module: {
rules: [{
test: /\.tsx?$/,
loader: 'ts-loader',
exclude: /node_modules/,
options: {
// disable type checker - we will use it in fork plugin
transpileOnly: true
}
},
{
test: /\.less$/,
use: [{
loader: 'style-loader'
},
{
loader: 'css-loader',
},
{
loader: 'less-loader',
}
]
}
Warning: less-loader#5.0.0" has unmet peer dependency "l ess#^2.3.1 ||
^3.0.0".
ERROR in ./src/app/features/common/common.less
(/gudena/node_modules/css-loader/dist/cjs.js!/gudena/node_modules/less-loader/dist/cjs.js!./src/app/features/common/common.less)
app_1_9a4398ee6236 | [CLIENT] Module build failed (from
/gudena/node_modules/less-loader/dist/cjs.js): app_1_9a4398ee6236
| [CLIENT] Error: Cannot find module 'less'
Please let me know what is restricting 'less' loader to be detected.
Related
I'm learning to build my react project using Webpack.
I already have configuration a webpack.config.js to load CSS file.
webpack.config.js:
module.exports = {
...
module: {
rules: [
{
test: /\.css$/,
exclude: /(node_modules)/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
],
},
{
test: /\.scss$/,
exclude: /(node_modules)/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
},
...
],
},
...
}
npm run build
This problem appeared.
Module parse failed: Unexpected token (6:3) You may need an
appropriate loader to handle this file type, currently no loaders are
configured to process this file. See
https://webpack.js.org/concepts#loaders | * Copyright 2011-2020
Twitter, Inc. | * Licensed under MIT
(https://github.com/twbs/bootstrap/blob/main/LICENSE)
> */:root{--blue:#007bff;--indigo:#6610f2;--purple:#6f42c1;--pink:#e83e8c;--red:#dc3545;
..... ```
I don't understand what should to do. Thank you.
Not sure why you exclude node_modules why you're still importing css from there which means just remove exclude: /(node_modules)/ then would work:
{
test: /\.css$/,
// exclude: /(node_modules)/, // Remove this
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' },
],
},
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
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.
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