Ant-design: استيراد موضوع antd ، webpack build show. خطأ bezierEasingMixin؟

هذا أقل إصدار جديد علة !!!!! أغلق!

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

يمكنك محاولة تشغيل خيار جافا سكريبت المضمّن.

أين يتم تعيين هذا الخيار؟

الإصدار: [email protected]

[email protected] على ما يرام.

[email protected] ، عنصر التكوين javascriptEnabled: true يحتاج إلى التشغيل

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

لكن لا تزال هناك أخطاء:

تتبع Lovesueee مع https://github.com/less/less.js/issues/3113

يبدو أن الأمر متروك لـ antd لتنفيذ عدد أقل من المكونات الإضافية بدلاً من استخدام اختراق الوظيفة. متى نتوقع إصلاح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 } } إذا كنت تستخدم أقل من 3

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

"style": true,

الشغل!

ما الخطأ في التكوين ولم يتم الإبلاغ عن النمط أو عدم عرضه؟

أنتد 3.6.3
أقل من 2.7.2
أقل محمل 4.1.0

webMasterMrBin حاول عدم تحليل ملفات css عبر

@ afc163 شكرًا لك على استكمال أساسيات webpack

لم أقوم بإخراج تطبيق create-react-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)

اي نصيحه؟

@ فروستون : مساعدة GRT. يعمل بشكل جيد 💯

أليس من غير الآمن تمكين جافا سكريبت مضمنة؟

مرحبًا ulisescarreonalvarez هل

تضمين التغريدة

مرحبًا فقط غير على package.json هذا:

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

الى هذا:

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

مرحبًا ulisescarreonalvarez ما هي نسختك القديمة؟
الحصول على هذا الآن.
./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"
    ]
  }
}

تضمين التغريدة

أليس من غير الآمن تمكين جافا سكريبت مضمنة؟

يمكن أن يكون. يكمن الخطر في أنه من الشائع أحيانًا أن يكون لدى مكتبات أقل "تكوين عبر الإنترنت" للمتغيرات لتمكينها. إذا لم تقم بتعقيم هذا الإدخال ، فأنت تقوم بشكل أساسي بتقييم أي رمز مثل:

@theme-color: `code_to_delete_my_whole_computer_oops()`

لذلك من خلال إجبار المستخدمين على تجاوز خيار javascriptEnabled لمواصلة استخدام هذه المكتبة ، فأنت تفتح بشكل أساسي ثغرة أمنية محتملة يمنعها تعطيلها. صحيح ، هذا يحدث فقط عندما تضع إدخالاً غير صحيح في Less باستخدام هذا الخيار ، ولكن بدون الخيار ، لن يتم تحليل الإدخال غير الصحيح ببساطة. هذا هو السبب في أنه من الأفضل إصلاح مكتبة التصميم واستخدام بناء الجملة @plugin بدلاً من فرض الخيار javascriptEnabled: true .

@ ماثيو دين هل يمكنك مساعدتنا في تحقيق ذلك؟

@ 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

@ ماثيو دين شكرا لك على معالجة سؤالي!

@ 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 {injectionBabelPlugin} = تتطلب ('reaction-app-rewired') ؛
const RewireLess = تتطلب ('رد فعل-تطبيق-إعادة أسلاك- أقل') ؛

module.exports = function override (config، env) {
التكوين = injectionBabelPlugin (
['import'، {libraryName: 'antd'، libraryDirectory: 'es'، style: true}]، // تغيير استيراد css إلى أقل
التكوين
) ؛
التكوين = RewireLess.withLoaderOptions ({
javascriptEnabled: صحيح
}) (config، env)؛
عودة التكوين ؛
} ؛

مجموعتي. json مثل هذا

"تفاعل-تطبيق-جهاز-إعادة أسلاك-أقل": "^ 2.1.3"،
"رد فعل-تطبيق-تم إعادة توصيله": "^ 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)

وفي تهيئة حزمة الويب الخاصة بي ، أستخدم خيار جافا سكريبت الأقل تحميلًا.
يؤدي تعطيل هذا إلى إظهار الخطأ "Inline Javascript" ، ويظهر التمكين ما ورد أعلاه.

أيه أفكار؟

webpack.dev.js
وحدة: {
قواعد: [
{
الاختبار: /.less$/ ،
استعمال: [
{لودر: 'style-loader' // يُنشئ عُقد نمط من سلاسل JS
} ، {
مُحمل: 'css-loader' ، // يترجم CSS إلى CommonJS
الخيارات: {importLoaders: 1}
} ،
{
محمل: 'محمل أقل' ،
والخيارات: {
javascriptEnabled: صحيح
}
}]
} ،
{
الاختبار: /.(sa|c|c)ss$/ ،
use: ['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 .

يبدو أنه كان هناك علاقات عامة لهذا ولكن لم يتم دمجه لأكثر من شهرين. يمكنك إجراء التغييرات التي تم إجراؤها في الالتزام بهذا العلاقات العامة في ملف \node_modules\node-less-chokidar\bin\node-less-chokidar بك بنفسك (سطرين فقط) وهو يعمل.

هنا هو الالتزام التفاصيل

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

تحرير: تم دمج هذا لإتقان ما بعد اليوم في node-less-chokidhar

إذا كان رقم إصدار المكون الإضافي （محمل أقل هو 6 أو أعلى
"محمل أقل": "^ 6.1.0"،
"أقل": "^ 2.7.3"،

الطريقة الجديدة لكتابتها هي
{
محمل: "محمل أقل" ،
والخيارات: {
أقل الخيارات: {
javascriptEnabled: صحيح ،
}
}
}

إذا كان رقم إصدار المكون الإضافي （محمل أقل هو 6 أو أعلى
"محمل أقل": "^ 6.1.0"،
"أقل": "^ 2.7.3"،

الطريقة الجديدة لكتابتها هي
{
محمل: "محمل أقل" ،
والخيارات: {
أقل الخيارات: {
javascriptEnabled: صحيح ،
}
}
}

تنسيق نمط التعليمات البرمجية:

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