Module not found when run build webpack with ejs module

Question

I have a simple project where I use the ejs module and webpack without a lot of configuration.
When I run the index.js with node everything is fine.
When I try to run build I get following error message:

Error Message:

        PS C:\Users\Florian\Desktop\template_ejs_webpack> npm run build-prod
    
    > template_mit_ejs@1.0.0 build-prod C:\Users\Florian\Desktop\template_ejs_webpack
    > webpack --mode production
    
    assets by status 10.1 KiB [cached] 1 asset
    modules by path ./node_modules/ejs/lib/*.js 30.1 KiB
      ./node_modules/ejs/lib/ejs.js 26.1 KiB [built] [code generated]
      ./node_modules/ejs/lib/utils.js 4.07 KiB [built] [code generated]
    ./src/index.js 301 bytes [built] [code generated]
    ./node_modules/ejs/package.json 1.47 KiB [built] [code generated]
    
    ERROR in ./node_modules/ejs/lib/ejs.js 47:9-22
    Module not found: Error: Can't resolve 'fs' in 'C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib'
    resolve 'fs' in 'C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib'
      Parsed request is a module
      using description file: C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\package.json (relative path: ./lib)
        Field 'browser' doesn't contain a valid alias configuration
        resolve as module
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib\node_modules doesn't exist or is not a directory
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\node_modules doesn't exist or is not a directory
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\node_modules doesn't exist or is not a directory
          looking for modules in C:\Users\Florian\Desktop\template_ejs_webpack\node_modules
            single file module
              using description file: C:\Users\Florian\Desktop\template_ejs_webpack\package.json (relative path: ./node_modules/fs)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs.wasm doesn't exist
            C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\fs doesn't exist
          C:\Users\Florian\Desktop\node_modules doesn't exist or is not a directory
          C:\Users\Florian\node_modules doesn't exist or is not a directory
          C:\Users\node_modules doesn't exist or is not a directory
          C:\node_modules doesn't exist or is not a directory
     @ ./src/index.js 4:12-26
    
    ERROR in ./node_modules/ejs/lib/ejs.js 48:11-26
    Module not found: Error: Can't resolve 'path' in 'C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
            - install 'path-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "path": false }
    resolve 'path' in 'C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib'
      Parsed request is a module
      using description file: C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\package.json (relative path: ./lib)
        Field 'browser' doesn't contain a valid alias configuration
        resolve as module
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\lib\node_modules doesn't exist or is not a directory
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\ejs\node_modules doesn't exist or is not a directory
          C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\node_modules doesn't exist or is not a directory
          looking for modules in C:\Users\Florian\Desktop\template_ejs_webpack\node_modules
            single file module
              using description file: C:\Users\Florian\Desktop\template_ejs_webpack\package.json (relative path: ./node_modules/path)
                no extension
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path doesn't exist
                .js
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path.js doesn't exist
                .json
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path.json doesn't exist
                .wasm
                  Field 'browser' doesn't contain a valid alias configuration
                  C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path.wasm doesn't exist
            C:\Users\Florian\Desktop\template_ejs_webpack\node_modules\path doesn't exist
          C:\Users\Florian\Desktop\node_modules doesn't exist or is not a directory
          C:\Users\Florian\node_modules doesn't exist or is not a directory
          C:\Users\node_modules doesn't exist or is not a directory
          C:\node_modules doesn't exist or is not a directory
     @ ./src/index.js 4:12-26
    
    webpack 5.24.1 compiled with 2 errors in 906 ms
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! template_mit_ejs@1.0.0 build-prod: `webpack --mode production`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the template_mit_ejs@1.0.0 build-prod script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     C:\Users\Florian\AppData\Roaming\npm-cache\_logs\2021-02-24T13_35_40_240Z-debug.log

Folder Structure:

    template_ejs_webpack
    |--dist
    |  |--index.html
    |--node_modules
    |--src
    |  |--index.js
    |--package-lock.json
    |--package.json
    |--template.ejs
    |--webpack.config.js

index.js:

    "use strict"
    
    
    const ejs = require("ejs")
    
    const planet = "Mars"
    
    ejs
        .renderFile("./template.ejs", { planetVar: planet })
        .then((templateHTML) => {
            console.log(templateHTML)
        })

index.html:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="output"></div>
    
        <script src="./main.js"></script>
    </body>
    </html>

template.ejs:

    <p>Mission accomplished. Landed on <%= planetVar %></p>

package.json:

    {
        "name": "template_mit_ejs",
        "version": "1.0.0",
        "description": "",
        "main": "script.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1",
            "build": "webpack",
            "build-prod": "webpack --mode production",
            "watch": "webpack --watch"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {},
        "devDependencies": {
            "ejs": "^3.1.6",
            "ejs-loader": "^0.5.0",
            "webpack": "^5.24.1",
            "webpack-cli": "^4.5.0"
        }
    }

webpack.config.js:

    module.exports = {
        mode: 'development',
        target: 'web',
        module: {
            rules: [
                {
                    test: /\.ejs$/,
                    use: {
                        loader: 'ejs-loader'
                    }
                }
            ]
        }
      };

Does anyone have a suggestion what is wrong with my code?

Answer 1

First of all, it seems that your config is missing an entry point. There are a lot of missing information and i would strongly advice you to look into webpacks Documentation for module resolution.

You also may want to exclude node_modules.

module: {
   ...
   rules{
     ...
     exclude: ["/node_modules/"]
   }
}