CODEWITHSUNDEEP
javascriptnode.jswebpackejs
Florian_
Florian_

Reputation: 51

Module not found when run build webpack with ejs module

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
    
    > [email protected] 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! [email protected] build-prod: `webpack --mode production`
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the [email protected] 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?

Upvotes: 4

Views: 5021

Answers (3)

Alan Omar
Alan Omar

Reputation: 4217

If you look closely to the error log you will see:

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.

which is indicates that you need polyfill some node core modules, in your case you need to polyfill both fs and path. to do that add the following to your webpack.config.js:

module.exports = {
   ...
   resolve: {
    extensions: [".js"],
    fallback: {
      "fs": false,
      "path": require.resolve("path-browserify")
    }
  },
};

and install path-browserify. npm install path-browserify.

Upvotes: 1

pabloespinosa12
pabloespinosa12

Reputation: 50

I had the same problem and you only need to install raw-loader to integrate .ejs files and HtmlWebPackPluging to copy your .ejs into the dist folder in order to use them. Just add the following property (plugins) into your webpack.config.js with this information:

In your configuration it will look like this:

module.exports = {
    mode: 'development',
    target: 'web',
    module: {
        rules: [
            {
                test: /\.ejs$/,
                use: {
                    loader: 'ejs-loader'
                }
            }
        ]
    },
    plugins: [
       new HtmlWebPackPlugin({
          template: '!!raw-loader!./path-to-ejs-file/index.ejs',
          filename: "./index.ejs"
    })
}

HtmlWebpackPluging is used as I said to copy your HTML (ejs in this case) to your dist/public folder and raw-loader allows you to use ejs with this pluging.

Upvotes: 0

SpaceNinjaApe
SpaceNinjaApe

Reputation: 312

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/"]
   }
}

Upvotes: 0

Related Questions