how to configure Ant Design with Webpack 3
Solution 1
The error seems to be coming from the inability to resolve .less
files. Adding this to webpack.config.js
should help resolve them:
resolve: {
extensions: ['.js', '.jsx', '.less']
},
You have specified context as src
folder in the structure. This means the entry has to be changed to ./index.js
or just ./index
If you did not mean to have context
key, removing it will also do the work.
Solution 2
For me i just had to use import 'antd/dist/antd.min.css
instead of import 'antd/dist/antd.css
https://github.com/ant-design/ant-design/issues/33327#issuecomment-997355323
Solution 3
Webpack configuration (webpack.config.js):
const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const fs = require('fs');
const lessToJs = require('less-vars-to-js');
const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, 'ant-theme-vars.less'), 'utf8'));
module.exports = {
watch: true,
context: path.resolve(__dirname, './src'),
entry: {
app: './index.js',
},
output: {
path: path.resolve(__dirname, './dist'),
filename: '[name].bundle.js',
},
devtool: 'source-map',
resolve: {
alias: {
moment: 'moment/src/moment'
},
},
module: {
rules: [
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
presets: ['env','react','stage-2']
}
},
{
loader: 'babel-loader',
exclude: /node_modules/,
test: /\.js$/,
options: {
presets: ['env','react','stage-2'],
plugins: [
['import', { libraryName: "antd", style: true }]
]
},
},
{
test: /\.scss?$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
loader: 'css-loader!sass-loader'
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract([
{loader: "css-loader"},
{loader: "less-loader",
options: {
modifyVars: themeVariables,
root: path.resolve(__dirname, './')
}
}
])
},
{
test: /\.(woff|woff2|eot|ttf|otf|svg|png|jpg,pdf)$/,
loader: "file-loader"
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
]
},
plugins: [
new ExtractTextPlugin('style.css')
],
devServer: {
port: 9000,
contentBase: 'dist'
}
};
And package.json:
{
"name": "ant-design-app",
"version": "1.0.0",
"description": "Ant design",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --config webpack.config.js --progress --inline",
"build": "webpack -p --config webpack.config.js"
},
"repository": {
"type": "git",
"url": ""
},
"author": "Sivadass",
"license": "MIT",
"dependencies": {
"antd": "^3.1.4",
"moment": "^2.20.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
},
"devDependencies": {
"babel-core": "^6.24.1",
"babel-loader": "^7.0.0",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-import": "^1.6.3",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-preset-env": "^1.6.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.9",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^0.11.2",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"less-vars-to-js": "^1.2.1",
"node-sass": "^4.7.2",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"style-loader": "^0.18.2",
"sugarss": "^1.0.1",
"webpack": "^3.10.0",
"webpack-dev-server": "^2.11.1"
}
}
Ant theme variables configuration (ant-theme-vars.less):
@primary-color: #4099ff;
@font-size-base: 16px;
@font-family : "Proxima Nova", Helvetica Neue, Helvetica, Arial, sans-serif;
@btn-font-size-lg: 15px;
@btn-padding-lg : 8px 32px;
@btn-padding-sm : 4px 16px;
Franva
I am a software engineer, working on the .NET platform. I am interested in developing mobile apps, Computer Vision, Image Processing, playing guitar and piano, travelling, cooking etc.
Updated on June 04, 2022Comments
-
Franva almost 2 years
Fix and solution:
Thanks to @BoyWithSilver, long story short, here are what I did to fix my problems:
- added .less into extensions section
- removed unnecessary codes in webpack.config.json e.g. removed the extract-text-webpack-plugin
- downgrade less from 3.0.1 to 2.7.0 fixed heaps of errors: length of undefined in index.less file in antd.
Update 3
Here is my package.json
{ "name": "mobx-reactjsx", "version": "1.0.0", "description": dfsdfsdfsd", "scripts": { "start": "webpack-dev-server --config webpack.config.js --progress --inline", "lint": "eslint src" }, "keywords": [ "react", "reactjs", "boilerplate", "mobx", "starter-kit", "firebase", "re-base" ], "author": "Winston Fan", "license": "MIT", "homepage": "https://horizontalvision.azurewebsites.net/", "devDependencies": { "autoprefixer": "^8.0.0", "babel-core": "^6.9.1", "babel-loader": "^7.1.2", "babel-plugin-import": "^1.6.4", "babel-plugin-transform-decorators-legacy": "^1.3.4", "babel-preset-es2015": "^6.9.0", "babel-preset-react": "^6.5.0", "babel-preset-stage-1": "^6.5.0", "css-loader": "^0.28.9", "extract-text-webpack-plugin": "^3.0.2", "less": "^3.0.1", "less-loader": "^4.0.5", "less-vars-to-js": "^1.2.1", "postcss-loader": "^2.1.0", "style-loader": "^0.20.2", "webpack": "^3.5.5", "webpack-dev-server": "^2.7.1" }, "dependencies": { "antd": "^3.2.1", "firebase": "^4.9.1", "mobx": "^3.5.1", "mobx-react": "^4.4.1", "mobx-react-devtools": "^4.2.15", "re-base": "^3.2.2", "react": "^16.2.0", "react-dom": "^16.2.0" } }
Update 2:
After removed the context option : // context: path.resolve(__dirname, 'dist'), in webpage.config.js
-
added
javascriptEnabled: true under less-loader in webpack.config.json
I received these errors.
ERROR in ./node_modules/antd/lib/button/style/index.less Module build failed:
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read property 'length' of undefined in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less (line 1, column -1) @ ./node_modules/antd/lib/button/style/index.js 5:0-23 @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
ERROR in ./node_modules/antd/lib/style/index.less Module build failed:
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read property 'length' of undefined in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less (line 1, column -1) @ ./node_modules/antd/lib/button/style/index.js 3:0-33 @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
ERROR in ./node_modules/antd/lib/style/index.less Module build failed: ModuleBuildError: Module build failed:
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read property 'length' of undefined in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less (line 1, column -1) at runLoaders (F:\temp\Playground\mobx-reactjsx\node_modules\webpack\lib\NormalModule.js:195:19) at F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:364:11 at F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:230:18 at context.callback (F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at at process._tickCallback (internal/process/next_tick.js:169:7) @ ./node_modules/antd/lib/style/index.less @ ./node_modules/antd/lib/button/style/index.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
ERROR in ./node_modules/antd/lib/button/style/index.less Module build failed: ModuleBuildError: Module build failed:
/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read property 'length' of undefined in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less (line 1, column -1) at runLoaders (F:\temp\Playground\mobx-reactjsx\node_modules\webpack\lib\NormalModule.js:195:19) at F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:364:11 at F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:230:18 at context.callback (F:\temp\Playground\mobx-reactjsx\node_modules\loader-runner\lib\LoaderRunner.js:111:13) at at process._tickCallback (internal/process/next_tick.js:169:7) @ ./node_modules/antd/lib/button/style/index.less @ ./node_modules/antd/lib/button/style/index.js @ ./src/index.js @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js??ref--1-2!node_modules/antd/lib/style/index.less: [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/style/index.less 302 bytes {0} [built] [failed] [1 error]
ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/style/index.less Module build failed: /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read property 'length' of undefined in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less
(line 1, column -1) Child extract-text-webpack-plugin node_modules/extract-text-webpack-plugin/dist node_modules/css-loader/index.js!node_modules/less-loader/dist/cjs.js??ref--1-2!node_modules/antd/lib/button/style/index.less: [0] ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/button/style/index.less 302 bytes {0} [built] [failed] [1 error]
ERROR in ./node_modules/css-loader!./node_modules/less-loader/dist/cjs.js?{"modifyVars":{"@primary-color":"#193D71"},"root":"F://temp//Playground//mobx-reactjsx","javascriptEnabled":true}!./node_modules/antd/lib/button/style/index.less Module build failed: /* stylelint-disable declaration-bang-space-before,no-duplicate-selectors */ ^ Cannot read property 'length' of undefined in F:\temp\Playground\mobx-reactjsx\node_modules\antd\lib\style\color\bezierEasing.less
(line 1, column -1) webpack: Failed to compile.
Update 1:
Here is my webpack.config.json
var path = require('path'); var webpack = require('webpack'); const fs = require('fs'); const ExtractTextPlugin = require("extract-text-webpack-plugin"); const lessToJs = require('less-vars-to-js'); const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './scripts/ant-theme-vars.less'), 'utf8')); module.exports = { watch: true, context: path.resolve(__dirname, './src'), devtool: 'source-map', entry: [ './src/index.js' ], output: { path: path.resolve(__dirname, './dist'), filename: '[name].bundle.js' }, plugins: [ new webpack.HotModuleReplacementPlugin(), new ExtractTextPlugin('style.css') ], resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [{ test: /\.jsx?$/, use: ['babel-loader'], include: path.join(__dirname, 'src') }, { test: /\.less$/, use: ExtractTextPlugin.extract([ {loader: "css-loader"}, {loader: "less-loader", options: { modifyVars: themeVariables, root: path.resolve(__dirname, './') } } ]) }, { test: /\.css$/, use: ExtractTextPlugin.extract({ use: "css-loader" }) },] } };
now error message becomes:
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js Module not found: Error: Can't resolve './src/index.js' in '/Users/Winston/tmp/Playground/mobx-reactjsx/src' @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
I do have index.js under projectfolder/src
I'm trying to integrate Ant Design with Less support and the Import on Demand feature which is here: https://ant.design/docs/react/use-with-create-react-app in Advanced Guide section.
In this section, it uses react-app-rewired but my project uses webpack 3(my project is based on this https://github.com/mobxjs/mobx-react-boilerplate), so cannot use the rewired command in my case.
So I found another article: https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f
Here is my code:
package.json
"start": "webpack-dev-server --hot --open",
webpack.config.json
const fs = require('fs'); const lessToJs = require('less-vars-to-js'); const themeVariables = lessToJs(fs.readFileSync(path.join(__dirname, './scripts/ant-theme-vars.less'), 'utf8')); .... module:{ ..... rules:[ ..... test: /\.less$/, use: [ {loader: "style-loader"}, {loader: "css-loader"}, {loader: "less-loader", options: { modifyVars: themeVariables } } ] ] }
index.js
import {Button} from 'antd'; <Button type="primary">Hi!</Button>
.babelrc
{ "presets": [ "react", "es2015", "stage-1" ], "plugins": [ ["import", {"libraryName": "antd", "style": true} ], "transform-decorators-legacy" ] }
-
Agney about 6 yearsWhat is the issue you are facing?
-
Franva about 6 years@BoyWithSilverWings forgot to upload the error messages >_<; after 5 hours debugging, my brain stopped working O_O. Updated, please see the error messages
-
Agney about 6 yearsIt seems that the loader is not resolving
.less
files. Try addingresolve: {extensions: ['.js', '.jsx', '.less']},
to the webpack.config.js file -
Franva about 6 years@BoyWithSilverWings thanks man, it solves one, another appears.
-
Franva about 6 yearsthanks Sivadass, I have updated my webpack.config.json and new error message comes. Please see my update 1.
-
Franva about 6 yearsthanks man, it solves one, another appears. Please see my update 1 picture for my project structure.
-
Agney about 6 years@Franva What is the version of
less
you are using? -
Franva about 6 yearshi it's ^3.0.1. I added my package.json in update 3 section
-
Agney about 6 years@Franva Drop it down to 2.7.0 and check again
-
Franva about 6 yearswill do it now. do I need to downgrade my less-loader as well? If yes, what version?
-
Franva about 6 yearsgosh~! it solves that problem~! thanks!!!! The last one thing is, the antd style for Button(I use Button in my project) doesn't come through
-
Agney about 6 yearsLet us continue this discussion in chat.
-
Asking about 3 years@Sivadass N, could you help please stackoverflow.com/questions/66453633/…