Ant-design: impor tema semut, webpack build show .bezierEasingMixin error ?

bug versi yang kurang baru ini!!!!! Menutup!

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

Anda dapat mencoba mengaktifkan opsi javascript sebaris.

di mana mengatur opsi ini?

versi: [email protected]

[email protected] tidak masalah.

[email protected] , item konfigurasi javascriptEnabled: true perlu diaktifkan

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

Tapi masih ada kesalahan:

@Lovesueee melacak dengan https://github.com/less/less.js/issues/3113

Sepertinya antd untuk mengimplementasikan lebih sedikit plugin daripada menggunakan fungsi hack. Kapan kita bisa mengharapkan perbaikan @yesmeck?

Diperbaiki di https://github.com/ant-design/ant-design/commit/9634bea391dd2b7b17f1e89383577e248081a044

Sangat bagus, bisakah Anda menerbitkan versi baru dengan perbaikan ini? Terima kasih!

@bkniffler Akhir pekan ini.

@bkniffler Anda dapat menggunakan kurang dari 2,7 sebagai solusi.

@yesmeck tidak yakin mengapa tetapi saya masih mendapatkan pengecualian bahkan dengan rilis 3.3.0. Saat menurunkan ke 2,7 semuanya berfungsi seperti yang diharapkan.

@madisvain { loader: 'less-loader', options: { javascriptEnabled: true } } jika Anda menggunakan less@3

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

"style": true,

kerja!

Apa yang salah dengan konfigurasi dan gaya tidak dilaporkan atau tidak ditampilkan?

semut 3.6.3
kurang 2.7.2
lebih sedikit pemuat 4.1.0

@webMasterMrBin Cobalah untuk tidak mem-parsing file css melalui less-loader

@afc163 Terima kasih telah melengkapi dasar-dasar webpack

Saya tidak mengeluarkan create-react-app, dan saya menggunakan react-app-rewire-less , dan ketika saya memperbarui paket dari 2.1.1 ke 2.1.2, masalah yang sama terjadi.

Solusi saya adalah menjaga versi ke "2.1.1" di package.json .

Semoga membantu.

@FeynmanDNA atau Anda dapat menambahkan opsi ini ke config-overrides.js:

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

@froston terima kasih! itu bekerja untuk saya

Saya menambahkan skrip @froston di konsol yang saya dapatkan:

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)

ada saran?

@froston :

Bukankah tidak aman untuk mengaktifkan javascript sebaris?

Hai @ulisescarreonalvarez apakah Anda sudah memperbaikinya?

@hecomp

Hai, ubah saja package.json ini:

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

untuk ini:

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

Hai @ulisescarreonalvarez apa versi antd Anda?
Mendapatkan ini sekarang.
./src/resources/_antd.less Module build failed: Error: Cannot find module 'less'

Milik saya adalah 3.5.3

@ulisescarreonalvarez dapatkah Anda membagikan config-override.js Anda?

@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"]
}

paket.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

Bukankah tidak aman untuk mengaktifkan javascript sebaris?

Hal ini dapat. Bahayanya adalah terkadang perpustakaan Less memiliki "konfigurasi online" untuk variabel guna mengaktifkan tema. Jika Anda tidak membersihkan input itu, maka pada dasarnya Anda mengevaluasi kode apa pun seperti:

@theme-color: `code_to_delete_my_whole_computer_oops()`

Jadi dengan memaksa pengguna untuk mengganti opsi javascriptEnabled untuk terus menggunakan perpustakaan ini, Anda pada dasarnya membuka lubang keamanan potensial yang mencegah penonaktifan. Benar, itu hanya terjadi ketika Anda memasukkan input yang tidak bersih ke dalam Less dengan opsi itu, tetapi tanpa opsi tersebut, input yang tidak bersih tidak akan diuraikan. Itulah mengapa lebih baik untuk memperbaiki perpustakaan desain dan menggunakan sintaks @plugin daripada memaksakan opsi javascriptEnabled: true .

@matthew-dean Bisakah Anda membantu kami mencapainya?

@afc163 Tentu. Pertama, apa yang sebenarnya dilakukan oleh fungsi raksasa ini? Tidak jelas apa outputnya.

Seperti, baris ini sedang mengatur this.colorEasing . Tapi kenapa? Berapa nilai this seharusnya ada di sini? Apakah itu mencoba membocorkan global ke modul lain? https://github.com/ant-design/ant-design/blob/cfdf06213b952451600ae659e69fa302a7baf271/components/style/color/bezierEasing.less#L102

Berdasarkan masalah yang saya ajukan beberapa waktu lalu, tampaknya ya, Anda sengaja membocorkan global ke root namespace. https://github.com/ant-design/ant-design/issues/11097

@matthew-dean Terima kasih telah menjawab pertanyaan saya!

@afc163 Membuat PR di sini. https://github.com/ant-design/ant-design/pull/13242

Semoga membantu.

hey man，Saya bertemu kesalahan sepertinya ini, ketika saya menggunakan antd .

./src/index.less
Pembuatan modul gagal:

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

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

module.exports = fungsi override(config, env) {
config = injectBabelPlugin(
['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }], // ubah import css menjadi less
konfigurasi
);
config = rewireLess.withLoaderOptions({
javascriptDiaktifkan: benar
})(konfigurasi, env);
kembali konfigurasi;
};

package.json saya seperti ini

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

Hai - Saya mencoba memigrasikan proyek dari jsx ke jsx + ts.
Ini sebenarnya menggabungkan template admin dengan sesuatu yang sudah dikembangkan menggunakan JHipster.

Saya mendapatkan kesalahan berikut yang saya lihat dimiliki orang lain di utas ini ...

GALAT dalam ./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)
Pembuatan modul gagal (dari ./node_modules/less-loader/dist/cjs.js):
.antCheckboxFn();
^
Tidak dapat membaca properti 'eval' dari null
di Documentswscleanui-typescriptnode_modulesantdlibcheckboxstyleindex.less (baris 4, kolom 0)

dan dalam konfigurasi webpack saya, saya menggunakan opsi javascript less-loader.
Menonaktifkan ini menunjukkan kesalahan 'Javascript Sebaris', dan Mengaktifkan menunjukkan yang di atas.

Ada ide?

webpack.dev.js
modul: {
aturan: [
{
tes: /.less$/,
menggunakan: [
{loader: 'style-loader' // membuat node gaya dari string JS
}, {
loader: 'css-loader', // menerjemahkan CSS ke CommonJS
opsi:{ importLoaders: 1}
},
{
pemuat: 'pemuat lebih sedikit',
pilihan: {
javascriptDiaktifkan: benar
}
}]
},
{
tes: /.(sa|sc|c)ss$/,
gunakan: ['style-loader', 'css-loader', 'postcss-loader', {
pemuat: 'sass-loader',
opsi: { implementasi: 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"
    ]
  }
}
]

Bagi mereka yang masih mengalami masalah ini saat menggunakan node-less-chokidar .

sepertinya sudah ada PR untuk ini tetapi tidak digabung selama lebih dari 2 bulan. Anda dapat melakukan perubahan yang dibuat pada komit PR itu di file \node_modules\node-less-chokidar\bin\node-less-chokidar Anda sendiri (hanya beberapa baris) dan itu berhasil.

Ini detail komitnya

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

EDIT: ini telah digabungkan untuk dikuasai hari ini di node-less-chokidhar

Jika nomor versi plug-in less-loader adalah 6 atau lebih tinggi：
"less-loader": "^6.1.0",
"kurang": "^2.7.3",

Cara baru untuk menulisnya adalah
{
pemuat: "pemuat lebih sedikit",
pilihan: {
lessOptions: {
javascriptDiaktifkan: benar,
}
}
}

Jika nomor versi plug-in less-loader adalah 6 atau lebih tinggi：
"less-loader": "^6.1.0",
"kurang": "^2.7.3",

Cara baru untuk menulisnya adalah
{
pemuat: "pemuat lebih sedikit",
pilihan: {
lessOptions: {
javascriptDiaktifkan: benar,
}
}
}

Gaya kode format:

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