Mientras estaba configurando React dentro del proyecto Django, encontré este error
ModuleBuildError en la compilación del módulo falló (de ./node_modules/babel-loader/lib/index.js): SyntaxError: C:\Users\1Sun\Cebula3\cebula_react\assets\js\index.js: Soporte para la sintaxis experimental 'classProperties ' no está habilitado actualmente (17:9):
15 | 16 | class BodyPartWrapper extends Component { > 17 | state = { | ^ 18 | 19 | } 20 | Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.Entonces, instalé @babel/plugin-proposal-class-properties y puse esto en babelrc
paquete.json
{ "name": "cebula_react", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "webpack-dev-server --config ./webpack.config.js --mode development", "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config prod.config.js" }, "keywords": [], "author": "", "license": "ISC", "babel": { "presets": [ "@babel/preset-env", "@babel/preset-react" ] }, "devDependencies": { "@babel/cli": "^7.0.0", "@babel/core": "^7.0.0", "@babel/plugin-proposal-class-properties": "^7.0.0", "@babel/preset-env": "^7.0.0", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.2", "babel-plugin-transform-class-properties": "^6.24.1", "react-hot-loader": "^4.3.6", "webpack": "^4.17.2", "webpack-bundle-tracker": "^0.3.0", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.8" }, "dependencies": { "react": "^16.5.0", "react-dom": "^16.5.0" } }babelrc
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ "@babel/plugin-proposal-class-properties" ] }Sin embargo, el error aún existe. ¿Cuál es el problema?
Cambio
"plugins": [ "@babel/plugin-proposal-class-properties" ]Para
"plugins": [ [ "@babel/plugin-proposal-class-properties", { "loose": true } ] ]esto funcionó para mí
Primero instale: @babel/plugin-proposal-class-properties como dependencia de desarrollo:
npm install @babel/plugin-proposal-class-properties --save-devLuego edite su .babelrc para que sea exactamente así:
{ "presets": [ "@babel/preset-env", "@babel/preset-react" ], "plugins": [ [ "@babel/plugin-proposal-class-properties" ] ] }Archivo .babelrc ubicado en el directorio raíz, donde se encuentra package.json .
Tenga en cuenta que debe reiniciar su servidor de desarrollo webpack para que los cambios surtan efecto.
Solo resuelvo este problema agregando @babel/plugin-proposal-class-properties en el complemento de configuración del paquete web. La sección del módulo de mi webpack.config.js se ve así
module: { rules: [ { test: path.join(__dirname, '.'), exclude: /(node_modules)/, loader: 'babel-loader', options: { presets: ['@babel/preset-env', '@babel/react',{ 'plugins': ['@babel/plugin-proposal-class-properties']}] } } ] }