Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Below are the webpack configuration files.

webpack.config.client.js

JavaScript
const path = require('path');
const webpack = require('webpack');
const CURRENT_WORKING_DIR = process.cwd();

const config = {
  name: 'browser',
  mode: 'development',
  // mode: 'production',
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(CURRENT_WORKING_DIR, 'client/main.js'),
  ],
  output: {
    path: path.join(CURRENT_WORKING_DIR, '/dist'),
    filename: 'bundle.js',
    publicPath: '/dist/',
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // To bundle image assests so that other JS code can also access
      // and load it other than the component in which it was imported into.
      {
        test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
        use: 'file-loader',
      },
    ],
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin(),
  ],
  resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom',
    },
  },
};

module.exports = config;


webpack.config.server.js

JavaScript
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const CURRENT_WORKING_DIR = process.cwd();

const config = {
  name: 'server',
  entry: [path.join(CURRENT_WORKING_DIR, './server/server.js')],
  target: 'node',
  output: {
    path: path.join(CURRENT_WORKING_DIR, '/dist/'),
    filename: 'server.generated.js',
    publicPath: '/dist/',
    libraryTarget: 'commonjs2',
  },
  externals: [nodeExternals()],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      // To bundle image assests so that other JS code can also access
      // and load it other than the component in which it was imported into.
      {
        test: /\.(ttf|eot|svg|gif|jpg|png)(\?[\s\S]+)?$/,
        use: 'file-loader',
      },
    ],
  },
};

module.exports = config;


When I run yarn build, I get the following error.

JavaScript
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

ERROR in main
Module not found: Error: Can't resolve './src' in '/home/prithvi/Desktop/socialize'
resolve './src' in '/home/prithvi/Desktop/socialize'
  using description file: /home/prithvi/Desktop/socialize/package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: /home/prithvi/Desktop/socialize/package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/prithvi/Desktop/socialize/src doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/prithvi/Desktop/socialize/src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/prithvi/Desktop/socialize/src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        /home/prithvi/Desktop/socialize/src.wasm doesn't exist
      as directory
        /home/prithvi/Desktop/socialize/src doesn't exist

webpack 5.31.0 compiled with 1 error and 1 warning in 256 ms
error Command failed with exit code 1.


And lastly, as referenced in the error above, below's the package.json

JavaScript
{
  "name": "socialize",
  "version": "1.0.0",
  "description": "A simple MERN-stack based social media app.",
  "main": "index.js",
  "scripts": {
    "development": "nodemon",
    "build": "webpack --config webpack.config.client.production.js && webpack --mode=production --config webpack.config.server.js",
    "start": "NODE_ENV=production node ./dist/server.generated.js"
  },
  "author": "Prithvi",
  "license": "MIT",
  "keywords": [
    "react",
    "node",
    "express",
    "mongodb",
    "mern"
  ],
  "dependencies": {
    "@hot-loader/react-dom": "^17.0.1",
    "@material-ui/core": "^4.11.3",
    "@material-ui/icons": "^4.11.2",
    "compression": "^1.7.4",
    "cookie-parser": "^1.4.5",
    "cors": "^2.8.5",
    "express": "^4.17.1",
    "express-jwt": "^6.0.0",
    "helmet": "^4.4.1",
    "jshint": "^2.12.0",
    "jsonwebtoken": "^8.5.1",
    "loadash": "^1.0.0",
    "mongodb": "^3.6.4",
    "mongoose": "^5.12.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-hot-loader": "^4.13.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.10",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "file-loader": "^6.2.0",
    "nodemon": "^2.0.7",
    "webpack": "^5.24.4",
    "webpack-cli": "^4.5.0",
    "webpack-dev-middleware": "^4.1.0",
    "webpack-hot-middleware": "^2.25.0",
    "webpack-node-externals": "^2.5.2"
  }
}


What I have tried:

It was working 3 days back but, all of a sudden, the webpack is showing this error.
I tried changing all modes to ptroduction from development and vice-versa yet webpack throws the same error. One astonishing thing is that in the production mode, webpack is working perfectly fine and is correctly generating bundle.js.
Posted
Updated 21-Oct-22 1:04am

I have the same error. have you found a solution ?
 
Share this answer
 
v3
Comments
Richard Deeming 20-Sep-21 5:21am    
"Me too" is not a solution to anyone's question.

If you want to ask for more information, then click the "Have a Question or Comment?" button under the question and post a comment. Do not post your comment as a "solution" to the question.
maybe check import statement ./src if is incorrect, other answers say
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900