WEBPACK5 ERROR in main Module not found: Error: Can't resolve './src'

Question

You want to build only Express and gql server-related files separately using webpack5.
However, an error occurs when building.

ERROR in main
Module not found: Error: Can't resolve './src' in'/Users/leedonghee/Dropbox/Project/observer/Homepage/v2/server

My files don't use ./src anywhere.

Dir

---

server(root)
├─ dist
├─ model(mongoose & gql)
│   ├─ schema.js
│   └─ main-sliders
│       ├─ model.js
│       ├─ resolver.js
│       └─ schema.graphql
├─ node_modules
├─ index.js
├─ webpack.config.js
├─ .babelrc
├─ .env
├─ package.json
├─ package-lock.json
└─ ...

package.json

---

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "dev:server": "NODE_ENV=development nodemon --exec babel-node index.js",
    "build": "webpack --mode production --progress",
    "start:server": "NODE_ENV=production node ./build/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "core-js": "^3.8.1",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "express-graphql": "^0.12.0",
    "graphql": "^15.4.0",
    "graphql-tools": "^7.0.2",
    "merge-graphql-schemas": "^1.7.8",
    "mongoose": "^5.11.7",
    "path-browserify": "^1.0.1",
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/node": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "nodemon": "^2.0.6",
    "webpack": "^5.10.3",
    "webpack-cli": "^4.2.0",
    "webpack-graphql-loader": "^1.0.2"
  }
}

webpack.config.js

---

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const path = require("path");

module.export = {
  entry: "index.js",
  mode: "production",
  target: "node",
  resolve: {
    modules: ["node_modules"],
    extensions: [".js", ".json"],
    fallback: { path: require.resolve("path-browserify") },
  },
  output: {
    publicPath: "/",
    path: path.resolve(__dirname, "build"),
    filename: "index.js",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.graphql?$/,
        use: [
          {
            loader: "webpack-graphql-loader",
            options: {
              minify: true,
            },
          },
        ],
      },
    ],
  },
  plugins: [new CleanWebpackPlugin()],
};

index.js

---

import express from "express";
import dotenv from "dotenv";
import cors from "cors";
import mongoose from "mongoose";
const { graphqlHTTP } = require("express-graphql");
import schema from "./models/schema";
import "core-js/stable";
import "regenerator-runtime/runtime";

const app = express();
// env --------------------------------------------
dotenv.config();
const { PROD_PORT, DEV_PORT, DB_NAME, DB_URI, NODE_ENV } = process.env;
const port = NODE_ENV === "development" ? DEV_PORT : PROD_PORT;

// DB Setting --------------------------------------------
mongoose.Promise = global.Promise; // db서버 비동기처리
mongoose.connect(DB_URI, {
  useNewUrlParser: true,
  useFindAndModify: false,
  useCreateIndex: true,
  useUnifiedTopology: true,
});
mongoose.connection.once("open", () =>
  console.log(`????  Connected to "${DB_NAME}" MongoDB server.`)
);
mongoose.connection.on("error", (error) => console.error(`???? Error: :`, error));

// Get React Build File --------------------------------------------
const homepage = require("path").join(__dirname, "..", "homepage", "build");
app.use(express.static(homepage));
app.get("/", (req, res) => {
  res.sendFile("index.html", { homepage });
});

app.use(
  "/graphql",
  cors(),
  graphqlHTTP({
    schema: schema,
    graphiql: NODE_ENV === "development" ? true : false,
  })
);

app.listen(port, () => {
  console.log(
    `\n???? Server running on http://localhost:${port}\n${
      NODE_ENV === "development" ? "⚙️  Development" : "????  Production"
    } mode`
  );
});

.babelrc

---

{
    "presets": [
        ["@babel/preset-env" ,
            {
              "useBuiltIns" : "usage" ,
              "corejs" : 3
            }]
    ]
}

Answer 1

I had the same problem. "Module not found: Error: Can't resolve './src' in" . I am new to webpack too and don't know if 'src' is a required directory or not. However, I created the src directory in my projects folder where package.json and webpack.config.js were present and then moved my index.js in 'src' directory. Also if you look at the documentation for the basic setup and the configuration, they both assume src as a source folder for index.js. There might be some advanced topics where you can get away without having 'src'. Though I haven't reached that far yet. EDIT: It looks like you don't need the src directory. You can simply define your own entry point in your webpack.config.js file.