Ant-design: importer le thème antd, webpack build show .bezierEasingMixin error ?

ce bug de moins nouvelle version !!!!! proche!

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

Vous pouvez essayer d'activer l'option javascript en ligne.

où définir cette option ?

version : [email protected]

[email protected] est OK.

[email protected] , l'élément de configuration javascriptEnabled : true doit être activé

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

Mais il y a encore des erreurs :

@Lovesueee piste avec https://github.com/less/less.js/issues/3113

On dirait que c'est à antd d'implémenter moins de plugins au lieu d'utiliser la fonction hack. Quand pouvons-nous nous attendre à un correctif @yesmeck ?

Corrigé dans https://github.com/ant-design/ant-design/commit/9634bea391dd2b7b17f1e89383577e248081a044

Très bien, pourriez-vous publier une nouvelle version avec ce correctif ? Merci!

@bkniffler Ce week-end.

@bkniffler Vous pouvez utiliser moins de 2.7 comme solution de contournement.

@yesmeck je ne sais pas pourquoi mais j'obtiens toujours l'exception même avec la version 3.3.0. Lors de la rétrogradation à 2,7, tout fonctionne comme prévu.

@madisvain { loader: 'less-loader', options: { javascriptEnabled: true } } si vous utilisez less@3

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

"style": true,

travail!

Quel est le problème avec la configuration et le style n'est pas signalé ou affiché ?

et 3.6.3
moins 2.7.2
moins-chargeur 4.1.0

@webMasterMrBin Essayez de ne pas analyser les fichiers css via less-loader

@afc163 Merci d'avoir complété les bases de webpack

Je n'ai pas éjecté l'application create-react et j'utilise react-app-rewire-less , et lorsque je mets à jour le package de 2.1.1 à 2.1.2, le même problème s'est produit.

Ma solution est de conserver la version sur "2.1.1" dans package.json .

J'espère que ça aide.

@FeynmanDNA ou vous pouvez ajouter cette option à config-overrides.js :

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

@froston merci ! ça marche pour moi

J'ai ajouté le script @froston sur la console que j'obtiens :

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)

aucun conseil?

@froston : Aide Grt. Fonctionne bien

N'est-il pas dangereux d'activer le javascript en ligne ?

Hé @ulisescarreonalvarez , l'avez-vous réparé ?

@hecomp

Bonjour, changez simplement sur package.json ceci :

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

pour ça:

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

Salut @ulisescarreonalvarez quelle est ta version antd ?
Obtenir ceci maintenant.
./src/resources/_antd.less Module build failed: Error: Cannot find module 'less'

Le mien est 3.5.3

@ulisescarreonalvarez pouvez-vous partager votre 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

N'est-il pas dangereux d'activer le javascript en ligne ?

Ça peut être. Le danger est qu'il est parfois courant que les bibliothèques Less aient une "configuration en ligne" pour les variables afin d'activer le thème. Si vous ne nettoyez pas cette entrée, vous évaluez essentiellement n'importe quel code comme :

@theme-color: `code_to_delete_my_whole_computer_oops()`

Ainsi, en forçant les utilisateurs à remplacer l'option javascriptEnabled pour continuer à utiliser cette bibliothèque, vous ouvrez essentiellement une faille de sécurité potentielle que sa désactivation empêche. Certes, cela ne se produit que lorsque vous avez mis une entrée non filtrée dans Less avec cette option, mais sans l'option, l'entrée non filtrée ne serait tout simplement pas analysée. C'est pourquoi il est préférable de corriger la bibliothèque de conception et d'utiliser la syntaxe @plugin plutôt que de forcer l'option javascriptEnabled: true .

@matthew-dean Pourriez-vous nous aider à atteindre cet objectif ?

@afc163 Bien sûr. Premièrement, que fait réellement cette fonction géante ? La sortie n'est pas claire.

Comme, cette ligne définit this.colorEasing . Mais pourquoi? Quelle est la valeur de this censé être ici ? Est-ce qu'il essaie de fuir les globals vers un autre module? https://github.com/ant-design/ant-design/blob/cfdf06213b952451600ae659e69fa302a7baf271/components/style/color/bezierEasing.less#L102

Sur la base d'un problème que j'ai déposé il y a quelque temps, il semble que oui, vous divulguez volontairement des globals dans l'espace de noms racine. https://github.com/ant-design/ant-design/issues/11097

@matthew-dean Merci d'avoir répondu à ma question !

@afc163 a fait un PR ici. https://github.com/ant-design/ant-design/pull/13242

J'espère que cela pourra aider.

Hé mec, j'ai rencontré une erreur qui ressemble à ça, quand j'utilise antd .

./src/index.less
Échec de la création du module :

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

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

module.exports = fonction override(config, env) {
config = injectBabelPlugin(
['import', { libraryName : 'antd', libraryDirectory : 'es', style : true }], // change l'importation de css en less
configuration
);
config = rewireLess.withLoaderOptions({
javascriptActivé : vrai
})(config, env);
retourner la configuration ;
} ;

mon package.json comme ça

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

Hé - J'essaie de migrer un projet de jsx vers jsx + ts.
Il s'agit en fait de fusionner un modèle d'administration avec quelque chose de déjà développé à l'aide de JHipster.

Je reçois l'erreur suivante que je vois que d'autres ont eu dans ce fil ...

ERREUR dans ./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)
Échec de la construction du module (depuis ./node_modules/less-loader/dist/cjs.js) :
.antCheckboxFn();
^
Impossible de lire la propriété 'eval' de null
dans Documentswscleanui-typescriptnode_modulesantdlibcheckboxstyleindex.less (ligne 4, colonne 0)

et dans ma configuration webpack, j'utilise l'option javascript less-loader.
La désactivation affiche l'erreur « Inline Javascript » et l'activation affiche ce qui précède.

Des idées?

webpack.dev.js
module : {
règles: [
{
test : /.less$/,
utilisation: [
{loader: 'style-loader' // crée des nœuds de style à partir de chaînes JS
}, {
loader: 'css-loader', // traduit CSS en CommonJS
options :{ importLoaders : 1}
},
{
loader: 'moins-loader',
choix : {
javascriptActivé : vrai
}
}]
},
{
test : /.(sa|sc|c)ss$/,
utiliser : ['style-loader', 'css-loader', 'postcss-loader', {
chargeur : 'sass-loader',
options : { implémentation : 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"
    ]
  }
}
]

Pour ceux qui ont toujours ce problème lors de l'utilisation de node-less-chokidar .

il semble qu'il y ait eu un PR pour cela, mais il n'a pas été fusionné depuis plus de 2 mois. Vous pouvez effectuer vous-même les modifications apportées au commit de ce PR dans votre fichier \node_modules\node-less-chokidar\bin\node-less-chokidar (ce n'est que quelques lignes) et cela fonctionne.

Voici les détails du commit

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

EDIT: cela a été fusionné pour maîtriser encore aujourd'hui dans node-less-chokidhar

Si la version du plug-in less-loader） le nombre est 6 ou supérieur：
"less-loader": "^6.1.0",
"moins": "^2.7.3",

La nouvelle façon de l'écrire est
{
loader: "moins-loader",
choix : {
moinsOptions : {
javascriptEnabled : vrai,
}
}
}

Si la version du plug-in less-loader） le nombre est 6 ou supérieur：
"less-loader": "^6.1.0",
"moins": "^2.7.3",

La nouvelle façon de l'écrire est
{
loader: "moins-loader",
choix : {
moinsOptions : {
javascriptEnabled : vrai,
}
}
}

Style de code de formatage :

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