Webpack does not resolve less loader - reactjs

Question

I'm getting crazy about the configuration of my React-Typescript-Webpack application. It is built from scratch - no create-react-app - and should work with the UI library "antd" and "storybook" as well.
After countless hours I now receive following error:
ERROR in ./node_modules/antd/lib/button/style/index.less 1:0
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
... which tells that webpack does not recognize the settings for less in webpack.config.js, right?
I just don't understand why, because I thought that I added everything necessary ... Can you please help and tell me what I'm doing wrong here?
Here is webpack.config.js:
const path = require("path");
const fs = require("fs");
const lessToJs = require("less-vars-to-js");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
mode: "none",
entry: {
app: path.join(__dirname, "src", "index.tsx"),
},
target: "web",
resolve: {
extensions: [".ts", ".tsx", ".js", ".less"],
},
module: {
rules: [
{
loader: "babel-loader",
exclude: /node_modules/,
test: /\.js$/,
options: {
plugins: [["import", { libraryName: "antd", style: true }]],
},
},
{
test: /\.less$/,
use: [
{ loader: "style-loader" },
{ loader: "css-loader" },
{loader: "less-loader"},
],
},
{
use: ["style-loader", "css-loader"],
test: /\.css$/,
},
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: "/node_modules/",
},
],
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
},
plugins: [
new HtmlWebpackPlugin({
template: path.join(__dirname, "src", "index.html"),
}),
],
};
And the babel.rc file:
{
"presets": [
"#babel/preset-env",
"#babel/preset-typescript",
"#babel/preset-react"
],
"plugins": [
"#babel/proposal-class-properties",
"#babel/proposal-object-rest-spread",
"#babel/plugin-proposal-class-properties",
["import",
{
"libraryName": "antd",
"style": true // or 'css'
}]
]
}
And the dependencies from package.json:
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/plugin-proposal-object-rest-spread": "^7.10.4",
"#babel/preset-env": "^7.10.4",
"#babel/preset-react": "^7.10.4",
"#babel/preset-typescript": "^7.10.4",
"antd": "^4.4.1",
"babel-plugin-import": "^1.13.0",
"css-loader": "^3.6.0",
"less": "2.7.2",
"less-vars-to-js": "^1.3.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"style-loader": "^1.2.1"
},
"devDependencies": {
"#babel/core": "^7.10.4",
"#storybook/addon-actions": "^5.3.19",
"#storybook/addon-links": "^5.3.19",
"#storybook/addons": "^5.3.19",
"#storybook/react": "^5.3.19",
"#types/antd": "latest",
"#types/react": "^16.8.24",
"#types/react-dom": "^16.0.5",
"#types/webpack": "4.1.4",
"babel-loader": "^8.1.0",
"html-webpack-plugin": "^4.3.0",
"less-loader": "^6.2.0",
"ts-loader": "^6.2.1",
"typescript": "^3.4.3",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10",
"webpack-dev-server": "^3.11.0"
}
For example, I use antd in App.tsx just like this:
import React, { FC } from 'react';
import { Button } from 'antd';
import './App.css';
import 'antd/dist/antd.css';
const App: FC = () => (
<div className="App">
<Button type="primary">Button</Button>
</div>
);
export default App;
When I run npm run build / npm start, everything works fine. The error appears when running npm run storybook as stated in the storybook docs.
Full error stack:
ERROR in ./node_modules/antd/lib/button/style/index.less 1:0
Module parse failed: Unexpected character '#' (1:0)
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
> #import '../../style/themes/index';
| #import '../../style/mixins/index';
| #import './mixin';
# ./node_modules/antd/lib/button/style/index.js 5:0-23
# ./stories/2-Button.stories.js
# ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.js[\\/]?)$
# ./.storybook/generated-entry.js
# multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
ERROR in ./node_modules/antd/lib/style/index.less 1:0
Module parse failed: Unexpected character '#' (1:0)
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
> #import './themes/index';
| #import './core/index';
|
# ./node_modules/antd/lib/button/style/index.js 3:0-33
# ./stories/2-Button.stories.js
# ./stories sync ^\.\/(?:(?:(?!\.)(?:(?:(?!(?:|[\\/])\.).)*?)[\\/])?(?!\.)(?=.)[^\\/]*?\.stories\.js[\\/]?)$
# ./.storybook/generated-entry.js
# multi ./node_modules/#storybook/core/dist/server/common/polyfills.js ./node_modules/#storybook/core/dist/server/preview/globals.js ./.storybook/generated-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=true
Help will be much appreciated!

Answer 1

Please notice you have two rules for .less,
One executes after the other completes.
Try taking one of them off please.

Answer 2

I had the same problem and here are the steps I did to resolve;
My package.json,
"css-loader": "^3.5.3",
"less": "^3.12.2",
"less-loader": "^7.0.0",
"style-loader": "^1.2.0",
"url-loader": "^4.1.0",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
My webpack rules config,
{
test: /\.less$/,
use: [
"style-loader",
"css-loader",
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
Note: Before less 3.11, the javascriptEnabled is directly inside options