Ant-design: import the antd theme, webpack build show .bezierEasingMixin error ?

this less new version bug!!!!! close!

 Inline JavaScript is not enabled. Is it set in your options?

You can try turn on the inline javascript option.

where to set this option ?

version: [email protected]

[email protected] 是OK的。

[email protected]，需要开启 配置项 javascriptEnabled: true

{ loader: 'less-loader', options: { javascriptEnabled: true } }

但依然有错误：

@Lovesueee track with https://github.com/less/less.js/issues/3113

Seems like its up to antd to implement less plugins instead of using the function hack. When can we expect a fix @yesmeck?

Fixed in https://github.com/ant-design/ant-design/commit/9634bea391dd2b7b17f1e89383577e248081a044

Very nice, could you publish a new version with this fix? Thanks!

@bkniffler This weekend.

@bkniffler You can use less 2.7 as a workaround.

@yesmeck not sure why but I still get the exception even with 3.3.0 release. When downgrading to 2.7 everything works as expected.

@madisvain { loader: 'less-loader', options: { javascriptEnabled: true } } if you are using less@3

[email protected]
[email protected]
[email protected]
.babelrc

"style": true,

work!

配置好不报错 样式还是不显示是怎么了

antd 3.6.3
less 2.7.2
less-loader 4.1.0

@webMasterMrBin Try not to parse css files via less-loader

@afc163 多谢 补充了下webpack 基础

I didn't eject the create-react-app, and I am using react-app-rewire-less, and when i update the package from 2.1.1 to 2.1.2, the same issue occurred.

My solution is keep the version to "2.1.1" in package.json.

Hope it helps.

@FeynmanDNA or you can add this option to config-overrides.js:

config = rewireLess.withLoaderOptions({
  javascriptEnabled: true 
})(config, env);

@froston thanks! it works for me

I added the @froston script on the console i get:

Failed to compile
./src/resources/_antd.less
Module build failed: 


.antCheckboxFn();
^
Cannot read property 'eval' of null
      in /Users/ulisescarreon/Sites/doux_repositories/cleanui-admin-template-react/node_modules/antd/lib/checkbox/style/index.less (line 4, column 0)

any advice?

@froston : Grt help. Works well 💯

Isn't it unsafe to enable inline javascript?

Hey @ulisescarreonalvarez did you get it fixed?

@hecomp

Hi just change on package.json this:

"react-app-rewire-less": "^2.1.1",

to this:

"react-app-rewire-less": "2.1.1",

Hi @ulisescarreonalvarez what's your antd version?
Getting this now.
./src/resources/_antd.less Module build failed: Error: Cannot find module 'less'

Mine is 3.5.3

@ulisescarreonalvarez can you share your config-override.js?

@hecomp config-overrides.js:

const rewired = require('react-app-rewired')
const rewireLess = require('react-app-rewire-less')
const rewireEslint = require('react-app-rewire-eslint')

function rewire(config, env) {
  const cssLoader = rewired.getLoader(
    config.module.rules,
    rule => rule.test && String(rule.test) === String(/\.css$/)
  )
  const sassLoader = {
    test: /\.scss$/,
    use: [...(cssLoader.loader || cssLoader.use), 'sass-loader']
  }
  const oneOf = config.module.rules.find(rule => rule.oneOf).oneOf
  oneOf.unshift(sassLoader)

  config = rewired.injectBabelPlugin('transform-decorators-legacy', config)
  config = rewireLess(config, env)
  config = rewireEslint(config, env)
  config = rewireLess.withLoaderOptions({
    javascriptEnabled: true 
  })(config, env);

  return config
}

module.exports = rewire

jsconfig.json:

{
  "compilerOptions": {
    "target": "ES6",
    "experimentalDecorators": true
  },
  "exclude": ["node_modules"]
}

package.json:

{
  "name": "Project",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "devDependencies": {
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "husky": "^0.14.3",
    "lint-staged": "^4.0.2",
    "node-sass": "^4.9.0",
    "prettier": "^1.5.3",
    "querystring": "^0.2.0",
    "react-app-rewire-eslint": "^0.2.3",
    "react-app-rewire-less": "2.1.1",
    "react-app-rewired": "^1.5.2",
    "react-dnd": "^2.6.0",
    "react-dnd-html5-backend": "^2.6.0",
    "react-scripts": "^1.1.4",
    "redux-devtools-extension": "^2.13.0",
    "redux-logger": "^3.0.1",
    "sass-loader": "^7.0.1"
  },
  "dependencies": {
    "@rowno/sparkline": "^3.0.1",
    "ajv": "^6.5.0",
    "antd": "^3.5.3",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.1",
    "chart.js": "^2.7.2",
    "chartist": "^0.10.1",
    "chartist-plugin-tooltip": "^0.0.11",
    "classnames": "^2.2.5",
    "d3-dsv": "^1.0.8",
    "d3-format": "^1.2.1",
    "d3-scale": "^1.0.7",
    "d3-time-format": "^2.1.1",
    "draft-js": "^0.10.5",
    "enquire-js": "^0.2.1",
    "fetch-jsonp": "^1.1.3",
    "immutability-helper": "^2.7.0",
    "immutable": "^3.8.2",
    "jquery": "^3.3.1",
    "lodash": "^4.17.10",
    "moment": "^2.19.3",
    "moment-timezone": "^0.5.14",
    "peity-react": "^0.0.7",
    "popper.js": "^1.14.3",
    "prop-types": "^15.5.10",
    "rc-drawer-menu": "^0.5.7",
    "react": "^16.4.0",
    "react-avatar-editor": "^10.2.1",
    "react-c3js": "^0.1.20",
    "react-chartist": "^0.13.1",
    "react-chartjs-2": "^2.7.0",
    "react-container-query": "^0.11.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.4.0",
    "react-draft-wysiwyg": "^1.12.13",
    "react-helmet": "^5.2.0",
    "react-infinite-scroller": "^1.1.4",
    "react-loadable": "^5.4.0",
    "react-redux": "^5.0.7",
    "react-redux-spinner": "^1.1.3",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-router-redux": "^5.0.0-alpha.6",
    "react-stockcharts": "^0.7.0-beta.22",
    "react-syntax-highlighter": "^7.0.4",
    "react-transition-group": "^2.3.1",
    "react-virtualized": "^9.18.5",
    "redux": "^3.7.2",
    "redux-act": "^1.3.0",
    "redux-thunk": "^2.2.0",
    "reqwest": "^2.0.5",
    "webpack": "^3.12.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "eject": "react-scripts eject",
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "src/**/*.js": [
      "prettier --tab-width 2 --print-width 100 --single-quote --trailing-comma all --no-semi --parser babylon --write"
    ]
  }
}

@Remimstr

Isn't it unsafe to enable inline javascript?

It can be. The danger is that it's sometimes common for Less libraries to have an "online configuration" for variables to enable theming. If you don't sanitize that input, then you're essentially evaluating any code like:

@theme-color: `code_to_delete_my_whole_computer_oops()`

So by forcing users to override the javascriptEnabled option to continue using this library, you're essentially opening a potential security hole that disabling it prevents. True, it only happens when you've put unsanitized input into Less with that option, but without the option, the unsanitized input simply wouldn't parse. That's why it's better to fix the design library and use the @plugin syntax rather than forcing the javascriptEnabled: true option.

@matthew-dean Could you help us achieving that?

@afc163 Sure. First, what is this giant function actually doing? It's not clear what the output is.

Like, this line is setting this.colorEasing. But why? What is the value of this supposed to be here? Is it trying to leak globals to another module? https://github.com/ant-design/ant-design/blob/cfdf06213b952451600ae659e69fa302a7baf271/components/style/color/bezierEasing.less#L102

Based on an issue I filed a while ago, it appears that yes, you're leaking globals into the root namespace on purpose. https://github.com/ant-design/ant-design/issues/11097

@matthew-dean Thank you for addressing my question!

@afc163 Made a PR here. https://github.com/ant-design/ant-design/pull/13242

Hope that helps.

hey man，I met an error seems like to this,when I use antd .

./src/index.less
Module build failed:

// https://github.com/ant-design/ant-motion/issues/44
.tinyColorMixin();
^

and my config-overrides.js
const { injectBabelPlugin } = require('react-app-rewired');
const rewireLess = require('react-app-rewire-less');

module.exports = function override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // change importing css to less
config
);
config = rewireLess.withLoaderOptions({
javascriptEnabled: true
})(config, env);
return config;
};

my package.json like this

"react-app-rewire-less": "^2.1.3",
"react-app-rewired": "^1.6.2",

Hey - I'm trying to migrate a project from jsx to jsx + ts.
It's actually merging an admin template with something already developed using JHipster.

I'm getting the following error that I see others have had in this thread...

ERROR in ./src/resources/_antd.less (./node_modules/css-loader??ref--9-1!./node_modules/less-loader/dist/cjs.js??ref--9-2!./src/resources/_antd.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
.antCheckboxFn();
^
Cannot read property 'eval' of null
in Documentswscleanui-typescriptnode_modulesantdlibcheckboxstyleindex.less (line 4, column 0)

and in my webpack config I'm using the less-loader javascript option.
Disabling this shows the 'Inline Javascript' error, and Enabling shows the above.

Any ideas?

webpack.dev.js
module: {
rules: [
{
test: /.less$/,
use: [
{loader: 'style-loader' // creates style nodes from JS strings
}, {
loader: 'css-loader', // translates CSS into CommonJS
options:{ importLoaders: 1}
},
{
loader: 'less-loader',
options: {
javascriptEnabled: true
}
}]
},
{
test: /.(sa|sc|c)ss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', {
loader: 'sass-loader',
options: { implementation: sass }
}
]
},
]
}
`

package.json

[{
  "name": "tensor-base-template",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "devDependencies": {
    "@types/chai": "4.1.4",
    "@types/enzyme": "3.1.13",
    "@types/jest": "23.3.1",
    "@types/lodash": "4.14.116",
    "@types/mocha": "5.2.5",
    "@types/node": "10.9.2",
    "@types/react": "16.4.12",
    "@types/react-dom": "16.0.7",
    "@types/react-redux": "6.0.6",
    "@types/react-router-dom": "4.3.0",
    "@types/redux": "3.6.31",
    "@types/selenium-webdriver": "3.0.10",
    "@types/webpack-env": "1.13.6",
    "autoprefixer": "9.2.0",
    "browser-sync": "2.26.3",
    "browser-sync-webpack-plugin": "2.2.2",
    "cache-loader": "1.2.2",
    "chai": "4.1.2",
    "chai-as-promised": "7.1.1",
    "copy-webpack-plugin": "4.5.2",
    "core-js": "2.5.7",
    "cross-env": "5.2.0",
    "css-loader": "1.0.0",
    "enzyme": "3.5.0",
    "enzyme-adapter-react-16": "1.3.0",
    "enzyme-to-json": "3.3.4",
    "file-loader": "2.0.0",
    "fork-ts-checker-webpack-plugin": "0.4.9",
    "friendly-errors-webpack-plugin": "1.7.0",
    "generator-jhipster": "5.7.0",
    "html-webpack-plugin": "3.2.0",
    "husky": "1.1.0",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.5.0",
    "jest-junit": "5.1.0",
    "jest-sonar-reporter": "2.0.0",
    "json-loader": "0.5.7",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "lint-staged": "7.3.0",
    "mini-css-extract-plugin": "0.4.2",
    "mocha": "5.2.0",
    "moment-locales-webpack-plugin": "1.0.7",
    "optimize-css-assets-webpack-plugin": "5.0.0",
    "postcss-loader": "3.0.0",
    "prettier": "1.14.3",
    "protractor": "5.4.0",
    "react-infinite-scroller": "1.2.0",
    "redux-mock-store": "1.5.3",
    "rimraf": "2.6.2",
    "sass": "1.13.0",
    "sass-loader": "7.1.0",
    "simple-progress-webpack-plugin": "1.1.2",
    "sinon": "6.1.5",
    "source-map-loader": "0.2.4",
    "sourcemap-istanbul-instrumenter-loader": "0.2.0",
    "stripcomment-loader": "0.1.0",
    "style-loader": "0.22.1",
    "swagger-ui": "2.2.10",
    "terser-webpack-plugin": "1.0.2",
    "thread-loader": "1.2.0",
    "to-string-loader": "1.1.5",
    "ts-jest": "23.1.4",
    "ts-loader": "4.5.0",
    "ts-node": "7.0.1",
    "tslint": "5.11.0",
    "tslint-config-prettier": "1.15.0",
    "tslint-eslint-rules": "5.4.0",
    "tslint-loader": "3.6.0",
    "tslint-react": "3.6.0",
    "typescript": "3.0.1",
    "webpack": "4.17.1",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.6",
    "webpack-merge": "4.1.4",
    "webpack-notifier": "1.7.0",
    "workbox-webpack-plugin": "3.4.1",
    "write-file-webpack-plugin": "4.3.2",
    "xml2js": "0.4.19"
  },
  "dependencies": {
    "@rowno/sparkline": "^3.0.1",
    "antd": "^3.11.2",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.1",
    "classnames": "^2.2.5",
    "enquire-js": "^0.2.1",
    "immutability-helper": "^2.7.0",
    "immutable": "^3.8.2",
    "lodash": "^4.17.10",
    "moment": "^2.19.3",
    "moment-timezone": "^0.5.14",
    "peity-react": "^0.0.7",
    "prop-types": "^15.5.10",
    "rc-drawer": "^1.4.4",
    "react": "^16.4.12",
    "react-container-query": "^0.11.0",
    "react-custom-scrollbars": "^4.2.1",
    "react-dom": "^16.4.7",
    "react-helmet": "^5.2.0",
    "react-hot-loader": "3.1.1",
    "react-infinite-scroller": "^1.1.4",
    "react-loadable": "^5.4.0",
    "react-redux": "5.0.7",
    "react-redux-spinner": "^1.1.3",
    "react-router": "^4.2.0",
    "react-router-dom": "4.3.1",
    "react-router-redux": "^5.0.0-alpha.6",
    "redux": "^3.7.2",
    "redux-act": "^1.3.0",
    "redux-devtools": "3.4.1",
    "redux-devtools-dock-monitor": "1.1.3",
    "redux-devtools-extension": "^2.13.7",
    "redux-devtools-log-monitor": "1.4.0",
    "redux-logger": "^3.0.6",
    "redux-promise-middleware": "5.1.1",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "prettier:format": "prettier --write \"src/**/*.{json,ts,tsx,css,scss}\"",
    "lint": "tslint --project tsconfig.json -e 'node_modules/**'",
    "lint:fix": "npm run lint -- --fix",
    "cleanup": "rimraf target/www",
    "start": "npm run webpack:dev",
    "start-tls": "npm run webpack:dev -- --env.tls",
    "test": "npm run lint && jest --coverage --logHeapUsage -w=2 --config src/test/javascript/jest.conf.js",
    "test:watch": "npm test -- --watch",
    "webpack:dev": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --port=9060 --env.stats=minimal",
    "webpack:dev-verbose": "npm run webpack-dev-server -- --config webpack/webpack.dev.js --inline --port=9060 --profile --progress --env.stats=normal",
    "webpack:build:main": "npm run webpack -- --config webpack/webpack.dev.js --env.stats=minimal",
    "webpack:build": "npm run cleanup && npm run webpack:build:main",
    "webpack:prod:main": "npm run webpack -- --config webpack/webpack.prod.js --profile",
    "webpack:prod": "npm run cleanup && npm run webpack:prod:main",
    "webpack:test": "npm run test",
    "webpack-dev-server": "node --max_old_space_size=4096 node_modules/webpack-dev-server/bin/webpack-dev-server.js",
    "webpack": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js"
  },
  "lint-staged": {
    "src/**/*.js": [
      "prettier --tab-width 2 --print-width 100 --single-quote --trailing-comma all --no-semi --parser babylon --write"
    ]
  }
}
]

For those who are still having this issue when using node-less-chokidar.

seems like there has been a PR for this but it was not merged for over 2 months. You can do the changes made in the commit of that PR in your \node_modules\node-less-chokidar\bin\node-less-chokidar file yourself (its just couple of lines) and it works.

Here is the commit details

https://github.com/sampi/node-less-chokidar/pull/14/commits/934af235d16f63edaf9b8ae04eb22e3b82917701

EDIT: this has been merged to master yeterday in node-less-chokidhar

If the plug-in version（less-loader） number is 6 or higher：
"less-loader": "^6.1.0",
"less": "^2.7.3",

The new way of writing it is
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
}
}
}

If the plug-in version（less-loader） number is 6 or higher：
"less-loader": "^6.1.0",
"less": "^2.7.3",

The new way of writing it is
{
loader: "less-loader",
options: {
lessOptions: {
javascriptEnabled: true,
}
}
}

Format code style:

{
  loader: 'less-loader',
  options: {
    lessOptions: {
      javascriptEnabled: true
    }
  }
}