Ant-design: импортировать тему antd, сборка webpack показывает ошибку .bezierEasingMixin?

это ошибка менее новой версии !!!!! близко!

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

Вы можете попробовать включить опцию встроенного javascript.

где установить эту опцию?

версия: [email protected]

[email protected] в порядке.

[email protected] , необходимо

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

Но ошибки все равно есть:

@Lovesueee трек с https://github.com/less/less.js/issues/3113

Похоже, что antd должен реализовать меньше плагинов вместо использования функции hack. Когда мы можем ожидать исправления @yesmeck?

Исправлено в https://github.com/ant-design/ant-design/commit/9634bea391dd2b7b17f1e89383577e248081a044

Очень хорошо, не могли бы вы опубликовать новую версию с этим исправлением? Спасибо!

@bkniffler В эти выходные.

@bkniffler Вы можете использовать менее 2.7 в качестве обходного пути.

@yesmeck не уверен, почему, но я все еще получаю исключение даже с выпуском 3.3.0. При понижении до 2.7 все работает как положено.

@madisvain { loader: 'less-loader', options: { javascriptEnabled: true } } если вы используете less @ 3

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

"style": true,

Работа!

Что не так с конфигурацией и стиль не сообщается или не отображается?

antd 3.6.3
менее 2.7.2
менее загрузчик 4.1.0

@webMasterMrBin Старайтесь не разбирать файлы css через less-loader

@ afc163 Спасибо за дополнение к основам webpack

Я не извлекал приложение create-response-app, я использую react-app-rewire-less , и когда я обновляю пакет с 2.1.1 до 2.1.2, возникла та же проблема.

Мое решение - оставить версию "2.1.1" в package.json .

Надеюсь, это поможет.

@FeynmanDNA или вы можете добавить эту опцию в config-overrides.js:

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

@froston спасибо! меня устраивает

Я добавил сценарий @froston на консоль, которую я получаю:

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)

любой совет?

@froston : Помогите Grt. Хорошо работает 💯

Разве небезопасно включать встроенный javascript?

Привет, @ulisescarreonalvarez , ты исправил это?

@hecomp

Привет, просто измените package.json на это:

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

к этому:

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

Привет, @ulisescarreonalvarez, какая у тебя версия antd?
Получил это сейчас.
./src/resources/_antd.less Module build failed: Error: Cannot find module 'less'

У меня 3.5.3

@ulisescarreonalvarez, можешь поделиться своим 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

Разве небезопасно включать встроенный javascript?

Может быть. Опасность заключается в том, что для библиотек Less часто бывает «онлайн-конфигурация» переменных, позволяющая создавать темы. Если вы не дезинфицируете этот ввод, вы по сути оцениваете любой код, например:

@theme-color: `code_to_delete_my_whole_computer_oops()`

Таким образом, заставляя пользователей переопределить параметр javascriptEnabled для продолжения использования этой библиотеки, вы, по сути, открываете потенциальную дыру в безопасности, которую предотвращает ее отключение. Правда, это происходит только тогда, когда вы помещаете неанитизированный ввод в Less с этой опцией, но без этой опции неанитизированный ввод просто не будет анализироваться. Вот почему лучше исправить библиотеку дизайна и использовать синтаксис @plugin а не принудительно использовать параметр javascriptEnabled: true .

@ matthew-dean Не могли бы вы помочь нам в этом?

@ afc163 Конечно. Во-первых, что на самом деле делает эта гигантская функция? Непонятно, что на выходе.

Мол, эта строка устанавливает this.colorEasing . Но почему? Какое значение здесь должно быть у this ? Он пытается передать глобальные объекты другому модулю? https://github.com/ant-design/ant-design/blob/cfdf06213b952451600ae659e69fa302a7baf271/components/style/color/bezierEasing.less#L102

Основываясь на проблеме, которую я подал некоторое время назад, похоже, что да, вы намеренно пропускаете глобальные переменные в корневое пространство имен. https://github.com/ant-design/ant-design/issues/11097

@ matthew-dean Спасибо за ответ на мой вопрос!

@ afc163 Сделал здесь пиар. https://github.com/ant-design/ant-design/pull/13242

Надеюсь, это поможет.

Привет, чувак ， Я столкнулся с такой ошибкой, когда использую antd.

./src/index.less
Ошибка сборки модуля:

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

и мой config-overrides.js
const {injectBabelPlugin} = require ('rewired-app-rewired');
const rewireLess = require ('react-app-rewire-less');

module.exports = переопределение функции (config, env) {
config = injectBabelPlugin (
['import', {libraryName: 'antd', libraryDirectory: 'es', style: true}], // измените импорт css на меньше
config
);
config = rewireLess.withLoaderOptions ({
javascriptEnabled: true
}) (конфигурация, env);
вернуть конфиг;
};

мой package.json вот так

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

Привет, я пытаюсь перенести проект с jsx на jsx + ts.
Фактически это объединение шаблона администратора с чем-то, что уже разработано с использованием JHipster.

Я получаю следующую ошибку, которую, как я вижу, были у других в этой цепочке ...

ОШИБКА в ./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)
Ошибка сборки модуля (из ./node_modules/less-loader/dist/cjs.js):
.antCheckboxFn ();
^
Невозможно прочитать свойство eval, равное нулю
в Documentswscleanui-typescriptnode_modulesantdlibcheckboxstyleindex.less (строка 4, столбец 0)

и в моей конфигурации веб-пакета я использую вариант javascript с меньшей загрузкой.
При отключении отображается ошибка «Встроенный Javascript», а при включении отображается указанное выше.

Любые идеи?

webpack.dev.js
модуль: {
правила: [
{
тест: /.less$/,
использовать: [
{loader: 'style-loader' // создает узлы стиля из строк JS
}, {
loader: 'css-loader', // переводит CSS на CommonJS
параметры: {importLoaders: 1}
},
{
загрузчик: 'less-loader',
параметры: {
javascriptEnabled: true
}
}]
},
{
тест: /.(sa|sc|c)ss$/,
используйте: ['style-loader', 'css-loader', 'postcss-loader', {
загрузчик: 'sass-loader',
варианты: {реализация: 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"
    ]
  }
}
]

Для тех, у кого все еще возникает эта проблема при использовании node-less-chokidar .

Похоже, для этого был PR, но он не объединялся более 2 месяцев. Вы можете внести изменения, внесенные в коммит этого PR, в свой файл \node_modules\node-less-chokidar\bin\node-less-chokidar самостоятельно (всего пара строк), и это сработает.

Вот подробности фиксации

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

РЕДАКТИРОВАТЬ: это было объединено, чтобы освоить вчера в node -less-chokidhar

Если номер версии плагина (less-loader) равен 6 или выше ：
"less-loader": "^ 6.1.0",
"меньше": "^ 2.7.3",

Новый способ написания этого
{
загрузчик: "меньше-загрузчик",
параметры: {
lessOptions: {
javascriptEnabled: правда,
}
}
}

Если номер версии плагина (less-loader) равен 6 или выше ：
"less-loader": "^ 6.1.0",
"меньше": "^ 2.7.3",

Новый способ написания этого
{
загрузчик: "меньше-загрузчик",
параметры: {
lessOptions: {
javascriptEnabled: правда,
}
}
}

Формат кода стиля:

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