Ant-design: importar el tema antd, mostrar la compilación del paquete web .bezierEasingMixin error?

este error de versión menos nueva !!!!! ¡cerrar!

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

Puede intentar activar la opción de JavaScript en línea.

¿Dónde establecer esta opción?

versión: [email protected]

[email protected] está bien.

[email protected] , el elemento de configuración javascriptEnabled: true debe estar activado

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

Pero todavía hay errores:

@Lovesueee pista con https://github.com/less/less.js/issues/3113

Parece que depende de antd implementar menos complementos en lugar de usar la función hack. ¿Cuándo podemos esperar una solución @yesmeck?

Corregido en https://github.com/ant-design/ant-design/commit/9634bea391dd2b7b17f1e89383577e248081a044

Muy bien, ¿podrías publicar una nueva versión con esta corrección? ¡Gracias!

@bkniffler Este fin de semana.

@bkniffler Puede usar menos 2.7 como solución.

@yesmeck no estoy seguro de por qué, pero sigo recibiendo la excepción incluso con la versión 3.3.0. Al bajar de categoría a 2.7, todo funciona como se esperaba.

@madisvain { loader: 'less-loader', options: { javascriptEnabled: true } } si está usando menos @ 3

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

"style": true,

¡trabaja!

¿Qué está mal con la configuración y el estilo no se informa o no se muestra?

antd 3.6.3
menos 2.7.2
less-loader 4.1.0

@webMasterMrBin Trate de no analizar archivos css a través de less-loader

@ afc163 Gracias por complementar los conceptos básicos del paquete web

No expulsé la aplicación create-react-app, y estoy usando react-app-rewire-less , y cuando actualizo el paquete de 2.1.1 a 2.1.2, ocurrió el mismo problema.

Mi solución es mantener la versión "2.1.1" en package.json .

Espero eso ayude.

@FeynmanDNA o puede agregar esta opción a config-overrides.js:

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

@froston gracias! esto funciona para mi

Agregué el script

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)

¿algún consejo?

@froston : Grt ayuda. Funciona bien 💯

¿No es seguro habilitar JavaScript en línea?

Hola @ulisescarreonalvarez , ¿lo

@hecomp

Hola, solo cambia en package.json esto:

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

a esto:

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

Hola @ulisescarreonalvarez ¿cuál es tu versión antd?
Obteniendo esto ahora.
./src/resources/_antd.less Module build failed: Error: Cannot find module 'less'

El mío es 3.5.3

@ulisescarreonalvarez ¿puedes compartir tu 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

¿No es seguro habilitar JavaScript en línea?

Puede ser. El peligro es que a veces es común que las bibliotecas Less tengan una "configuración en línea" para las variables que permitan la creación de temas. Si no desinfecta esa entrada, entonces esencialmente está evaluando cualquier código como:

@theme-color: `code_to_delete_my_whole_computer_oops()`

Entonces, al obligar a los usuarios a anular la opción javascriptEnabled para continuar usando esta biblioteca, esencialmente está abriendo un potencial agujero de seguridad que su desactivación evita. Es cierto que solo sucede cuando ha puesto una entrada sin desinfectar en Less con esa opción, pero sin la opción, la entrada sin desinfectar simplemente no se analizaría. Por eso es mejor arreglar la biblioteca de diseño y usar la sintaxis @plugin lugar de forzar la opción javascriptEnabled: true .

@ matthew-dean ¿Podrías ayudarnos a lograrlo?

@ afc163 Seguro. Primero, ¿qué está haciendo realmente esta función gigante? No está claro cuál es el resultado.

Como, esta línea está configurando this.colorEasing . ¿Pero por qué? ¿Cuál es el valor de this supone que debe estar aquí? ¿Está intentando filtrar globales a otro módulo? https://github.com/ant-design/ant-design/blob/cfdf06213b952451600ae659e69fa302a7baf271/components/style/color/bezierEasing.less#L102

Basado en un problema que presenté hace un tiempo, parece que sí, está filtrando globales al espacio de nombres raíz a propósito. https://github.com/ant-design/ant-design/issues/11097

@ matthew-dean ¡Gracias por responder mi pregunta!

@ afc163 Hizo un PR aquí. https://github.com/ant-design/ant-design/pull/13242

Espero que ayude.

hey hombre, me encontré con un error que se parece a este, cuando uso antd.

./src/index.less
La compilación del módulo falló:

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

y mi 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}], // cambia la importación de css a less
config
);
config = rewireLess.withLoaderOptions ({
javascriptEnabled: verdadero
}) (config, env);
return config;
};

A my package.json le gusta esto

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

Oye, estoy intentando migrar un proyecto de jsx a jsx + ts.
En realidad, está fusionando una plantilla de administración con algo ya desarrollado con JHipster.

Recibo el siguiente error que veo que otros han tenido en este hilo ...

ERROR en ./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)
Error de compilación del módulo (desde ./node_modules/less-loader/dist/cjs.js):
.antCheckboxFn ();
^
No se puede leer la propiedad 'eval' de null
en Documentoswscleanui-typescriptnode_modulesantdlibcheckboxstyleindex.less (línea 4, columna 0)

y en mi configuración de paquete web estoy usando la opción de javascript menos cargador.
Deshabilitar esto muestra el error 'Javascript en línea' y Habilitar muestra lo anterior.

¿Algunas ideas?

webpack.dev.js
módulo: {
normas: [
{
prueba: /.less$/,
usar: [
{loader: 'style-loader' // crea nodos de estilo a partir de cadenas JS
}, {
loader: 'css-loader', // traduce CSS a CommonJS
opciones: {importLoaders: 1}
},
{
cargador: 'less-loader',
opciones: {
javascriptEnabled: verdadero
}
}]
},
{
prueba: /.(sa|sc|c)ss$/,
use: ['style-loader', 'css-loader', 'postcss-loader', {
loader: 'sass-loader',
opciones: {implementación: 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"
    ]
  }
}
]

Para aquellos que todavía tienen este problema al usar node-less-chokidar .

Parece que ha habido un PR para esto, pero no se fusionó durante más de 2 meses. Puede hacer los cambios realizados en la confirmación de ese PR en su archivo \node_modules\node-less-chokidar\bin\node-less-chokidar usted mismo (son solo un par de líneas) y funciona.

Aquí están los detalles de la confirmación

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

EDITAR: esto se ha fusionado para dominar ayer en node-less-chokidhar

Si el número de la versión del complemento （less-loader） es 6 o superior ：
"less-loader": "^ 6.1.0",
"menos": "^ 2.7.3",

La nueva forma de escribirlo es
{
cargador: "less-loader",
opciones: {
lessOptions: {
javascriptEnabled: true,
}
}
}

Si el número de la versión del complemento （less-loader） es 6 o superior ：
"less-loader": "^ 6.1.0",
"menos": "^ 2.7.3",

La nueva forma de escribirlo es
{
cargador: "less-loader",
opciones: {
lessOptions: {
javascriptEnabled: true,
}
}
}

Estilo de código de formato:

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