Menu
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?
815
asked Nov 19 '25 18:11
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.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
