Recibo la advertencia en el título cuando intento ejecutar el modo de desarrollo. Este script solía funcionar bien para un sitio web anterior, pero ahora siempre recibo esta advertencia.
Este es mi paquete.json:
{ "name": "frontend", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack --mode development --watch", "build": "webpack --mode production" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.13.10", "@babel/preset-env": "^7.13.12", "@babel/preset-react": "^7.12.13", "babel-loader": "^8.2.2", "react": "^17.0.2", "react-dom": "^17.0.2", "webpack": "^5.27.2", "webpack-cli": "^4.5.0" }, "dependencies": { "@babel/plugin-proposal-class-properties": "^7.13.0", "@material-ui/core": "^4.11.3", "@material-ui/icons": "^4.11.2", "react-router-dom": "^5.2.0" } }Y mi webpack.config.js:
const path = require("path"); const webpack = require("webpack"); module.exports = { entry: "./src/index.js", output: { path: path.resolve(__dirname, "./static/frontend"), filename: "[name].js", }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: { loader: "babel-loader", }, }, ], }, optimization: { minimize: true, }, plugins: [ new webpack.DefinePlugin({ "process.env": { // This has effect on the react lib size NODE_ENV: JSON.stringify("production"), }, }), ], };He buscado por todas partes pero no pude encontrar nada similar a esta advertencia.
The value in NODE_ENV: JSON.stringify("this_value_here") should match the value inside package.json "scripts": { "dev": "webpack --mode development --watch", "build": "webpack --mode production" }, Si está ejecutando "npm run dev" , mantenga JSON.stringify("development") , si está ejecutando "npm run build" , cámbielo a JSON.stringify("production") . Básicamente, haz que coincida con el tipo de modo que estás ejecutando.
Este error significa que intentó reasignar process.env.NODE_ENV en la llamada DefinePlugin con el valor diferente al que tenía antes.
Puede configurarlo implícitamente agregando la opción de mode a la configuración, o agregando la clave nodeEnv a la optimization . O simplemente configure la variable de entorno antes de ejecutar webpack.
Y parece que ese es tu caso. Configuró NODE_ENV=development en algún lugar, ejecutó el paquete web y luego está tratando de reasignarlo a production .
Compruebe cómo ejecuta el paquete web y el valor del entorno NODE_ENV.
Está diciendo que "intenta ejecutar el modo de desarrollo". De acuerdo con su package.json , eso significa ejecutar:
webpack --mode development --watch (NOTA: sintaxis v4)
mode es el modo que se utilizará cuando se ejecuta el paquete web, es decir, durante el " tiempo de compilación " (o "tiempo de compilación").DefinePlugin verifica esa variable cuando intenta definirla para su " tiempo de ejecución " (que es diferente del " tiempo de compilación ") y, por lo tanto, le advierte si los dos son diferentes ( código aquí ). Asegúrese de que el mode en su objeto webpack.config (o en el comando CLI, que lo reemplaza en el objeto de configuración) sea el mismo que pasa a DefinePlugin .
webpack.config.js ? Si desea poder proporcionar el parámetro de mode desde la CLI o un script de package.json , y aún así el DefinePlugin no emite una advertencia (lo que significa que obtiene ese valor de la CLI y lo conecta al DefinePlugin ), haga esto:
Cambia el contenido de tu webpack.config.js desde tu module.exports = { mode: ..., rules: ... }; (o export default { ... } object de configuración predeterminado { ... } ) a una function como se muestra a continuación. Esta función funciona exactamente igual (usted return el objeto de configuración final), pero permite leer las variables de entorno del primer parámetro env , así como las opciones de la CLI del paquete web del segundo argumento argv :
module.exports = (env, argv) => { // `mode` is `'XX'` if you ran webpack like so: `webpack watch --mode XX` (v5 syntax) const mode = argv.mode || 'development'; // dev mode by default // ... return { mode, // this is optional, since webpack already knows the `mode` from the CLI parameter // ... plugins: [ // ... new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(mode) }) ] // ... }; };PD : Estás usando Webpack@4. Si usaste Webpack@5, tendrías que cambiar
webpack --mode development --watch
para
webpack watch --mode development .
PPS : Siempre prefiera 'process.env.NODE_ENV': JSON.stringify('X') sobre 'process.env': JSON.stringify({ NODE_ENV: 'X' }) , ya que el primero reemplaza de manera segura todas las ocurrencias del process.env.NODE_ENV en su código con "X" , mientras que este último reemplaza cualquier ocurrencia de process.env con { "NODE_ENV": "X" } . Eso, a su vez, es probable que arruine otras variables de entorno. Ejemplo: process.env.Y se convertirá en ({ "NODE_ENV": "X" }).Y que no está undefined .
intenta cambiar
new webpack.DefinePlugin({ "process.env": { // This has effect on the react lib size NODE_ENV: JSON.stringify("production"), }, }),para
plugins: [ new webpack.DefinePlugin({ 'process.env.NODE_ENV' : JSON.stringify('production') }) ]¡Gracias por ayudar a todos, muy apreciado!
Terminé reemplazando "producción" con "desarrollo" en el siguiente fragmento de webpack.config:
plugins: [ new webpack.DefinePlugin({ "process.env": { // This has effect on the react lib size NODE_ENV: JSON.stringify("development"), }, }), ]Se deshizo de la advertencia, pero me pregunto qué impacto tiene esto.