Webpack Module not found: Error: Can't resolve './src'

Question

I am trying to set up a webpack build pipeline using typescript. I want to set up separate development and production builds as per the documentation: https://webpack.js.org/guides/production/#setup

I don't have much code in the project yet, just a simple index.ts file that pulls in a css file, a png file, and a printMe function imported from a print.ts file. (Examples taken from the webpack docs)

When I try to build either on dev or production I get the following error:

ERROR in main
Module not found: Error: Can't resolve './src' in 'C:\Code\Treads'
resolve './src' in 'C:\Code\Treads'
  using description file: C:\Code\Treads\package.json (relative path: .)
    Field 'browser' doesn't contain a valid alias configuration
    using description file: C:\Code\Treads\package.json (relative path: ./src)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        C:\Code\Treads\src is not a file
      .js
        Field 'browser' doesn't contain a valid alias configuration
        C:\Code\Treads\src.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        C:\Code\Treads\src.json doesn't exist
      .wasm
        Field 'browser' doesn't contain a valid alias configuration
        C:\Code\Treads\src.wasm doesn't exist
      as directory
        existing directory C:\Code\Treads\src
          using description file: C:\Code\Treads\package.json (relative path: ./src)
            using path: C:\Code\Treads\src\index
              using description file: C:\Code\Treads\package.json (relative path: ./src/index)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Code\Treads\src\index doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Code\Treads\src\index.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Code\Treads\src\index.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Code\Treads\src\index.wasm doesn't exist

Not sure if I'm missing something here or if the configuration is off. This is my first time trying to use webpack for a website build so I could be missing something simple.

Project structure is as follows:

├───dist
├───node_modules
└───src
    ├───assets
    ├───css
    ├───game
    └───types
        └─── png.d.ts
    free.png
    index.ts
    print.ts
    style.css
package-lock.json
package.json
README.md
tsconfig.json
webpack.common.js
webpack.dev.js
webpack.prod.js

package.json

{
  "name": "treads",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack serve --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "author": "Anonymous",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "^6.8.1",
    "css-minimizer-webpack-plugin": "^5.0.1",
    "html-webpack-plugin": "^5.5.3",
    "mini-css-extract-plugin": "^2.7.6",
    "style-loader": "^3.3.3",
    "ts-loader": "^9.5.0",
    "typescript": "^5.2.2",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1",
    "webpack-merge": "^5.10.0"
  },
  "dependencies": {
    "@types/bootstrap": "^5.2.8",
    "@types/d3": "^7.4.2",
    "bootstrap": "^5.3.2",
    "d3": "^7.8.5"
  }
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "moduleResolution": "node",
    "typeRoots": ["./node_modules/@types", "./src/types"],
    "allowJs": true,
    "sourceMap": true,
    "outDir": "./dist/",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitAny": true,
    "skipLibCheck": true
  }
}

webpack.common.js

module.exports = (env) => {
    console.log(`Environment: ${env}`)

    return {
        entry: './src/index.ts',
        optimization: {
            moduleIds: 'deterministic',
            runtimeChunk: 'single',
            splitChunks: {
                chunks: 'all',
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        chunks: 'all',
                    },
                },
            },
        },
        module: {
            rules: [
                {
                    test: /\.(png|svg|jpg|jpeg|gif)$/i,
                    type: 'asset/resource',
                },
                {
                    test: /\.tsx?$/,
                    use: 'ts-loader',
                    exclude: /node_modules/,
                },
            ],
        },
        resolve: {
            extensions: ['.js', '.jsx', '.ts', '.tsx', '...'],
        },
    }
};

webpack.dev.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = (env) => {
    console.log(env)

    const dev = {
        mode: 'development',
        devtool: 'inline-source-map',
        devServer: {
            static: './dist',
        },
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Development',
            }),
        ],
        output: {
            filename: '[name].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            clean: true
        },
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: ['style-loader', 'css-loader'],
                },
            ],
        },
    }
    return merge(common, dev)
};

webpack.prod.js

const path = require('path');
const common = require('./webpack.common.js');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

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

module.exports = (env) => {
    console.log(env)

    const prod = {
        mode: 'production',
        devtool: 'source-map',
        plugins: [
            new HtmlWebpackPlugin({
                title: 'Production',
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename: "[id].css",
            }),
        ],
        output: {
            filename: '[name].[contenthash].bundle.js',
            path: path.resolve(__dirname, 'dist'),
            clean: true
        },
        optimization: {
            minimizer: [
                new CssMinimizerPlugin(),
            ],
        },
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    use: [
                        {
                            loader: MiniCssExtractPlugin.loader,
                            options: {},
                        },
                        "css-loader",
                    ],
                }
            ],
        },
    }
    return merge(common, prod)
};

style.css

.hello {
    color: red;
    background: url('./free.png');
}

index.ts

import * as d3 from 'd3';
import './src/style.css';
import Icon from './src/free.png';
import printMe from './print';

function component() {
    const element = document.createElement('div');
    const btn = document.createElement('button');
 
    element.innerHTML = 'Hello World';
    element.classList.add('hello')

    const myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

    btn.innerHTML = 'Click me and check the console!';
    btn.onclick = printMe;

    element.appendChild(btn);
 
    return element;
  }
 
  document.body.appendChild(component());

print.ts

export default function printMe(): void {
  console.log('I get called from print.js!');
}

I've tried several different things to try to solve the problem, all of which resulted in m getting the same error as above:

1. Make sure to resolve *.js, *.jsx, *.ts, *.tsx files and include defaults via '...'
2. Ensured entry point (index.ts) has an accurate relative path (./src/index.ts)
3. Updated Node JS and npm to latest versions
4. Mapping the "browser" property in package.json to point ./src to ./dist
5. Compiling .ts files into .js files before trying to build

Answer 1

The exported common is a function as it seems. What happens if you use it as is - merge(common(env), dev(env))).

As well as i'd suggest you to check the merged config, how it looks like - based on the error message you are receiving the entry is wrong.