Tag Archives: Webpack Error

[Solved] Using `babel-preset-react-app` requires that you specify `NODE_ENV` or `BABEL_ENV` environment variables. Valid values are “development”, “test”, and “production”. Instead, received: undefined.

Leave a reply

Running webpack gives the following error:

 

 The reason for the bug is:

The environment variable is not configured properly. Although the mode: ‘development’ configuration item is configured in webpack.dev.js, this environment variable is the environment variable for code running, not the environment variable for babel running, so it needs to be defined.

solution:

// Download cross-env. A library dedicated to defining environment variables 
npm install --save-dev cross- env

// Add the configuration in front of the webpage running command 
in package.json
 "scripts" : {
     "start": "npm run dev" ,
     "dev": " cross-env NODE_ENV=development webpack serve --config ./config /webpack.dev.js" 
 },

[Solved] WebPack Error: Watchpack Error (watcher): Error: ENOSPC: System limit for number of file watchers reache

The following error occurs when the Vue project runs the NPM run serve command in the deepin20 system environment: (webpack error: watchpack error (watcher): error: enospc: system limit for number of file watchers reach)

Cause analysis: the limitation of Linux system causes this error!

Solution:

The problem can be solved by executing the following commands on the terminal:

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
sudo sysctl --system

Webpack Upgrade Error: webpack.NamedModulesPlugin is not a constructor

Use [email protected] time: wrong type: webpack.namedmodulesplugin is not a constructor

Next, webpack.config.js:

const webpack = require('webpack');
const { merge } = require('webpack-merge');

const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: process.env.NODE_ENV,
  entry: {
    index: './app/index.ts',
  },
  plugins: [
    new webpack.NamedModulesPlugin(),
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
  ],
});

Cause of problem: in 5.0, namedmodules plugin has been removed

Refer to upgrading obsolete configuration items

NamedModulesPlugin → optimization.moduleIds: ‘named’

optimization: {
 moduleIds: 'named'
}

Modify configuration:

const webpack = require('webpack');
const { merge } = require('webpack-merge');

const baseConfig = require('./webpack.config.base');

module.exports = merge(baseConfig, {
  mode: process.env.NODE_ENV,
  entry: {
    index: './app/index.ts',
  },
  optimization: {
    moduleIds: 'named'
  },
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development',
    }),
  ],
});

PS. moduleid it seems that the default value is named?Just remove namedmodules plugin.

Webpack Pack and compress ES6 files with errors: ERROR in js/xxxxxx.js from UglifyJs Unexpected token punc ()

Build project, the following error appears

ERROR in js/xxxxxx.js from UglifyJs
Unexpected token: [xxxx.js], expected: punc

It was found that uglifyjs could not resolve the problem of ES6

Solutions:

Upgrade uglifyjs version and modify package.json

  "uglifyjs-webpack-plugin": "^1.0.0-beta.3",

Prod.conf.js

var UglifyJSPlugin = require('uglifyjs-webpack-plugin')
# Modify the plugin in plugins
        new UglifyJSPlugin({
          uglifyOptions: {
            compress: {
              drop_debugger: true, // Note debugger
              drop_console: true, // Note console
              pure_funcs:['console.log'] // remove console
            },
          },
          sourceMap: false,   // Removing the .map file generated after packaging
          parallel: true,
        }),


Runnpm run build, Done!