template-ejs-loader
template-ejs-loader copied to clipboard
path.startsWith issue
Describe the bug When I run npm start for my nodejs project, I get the error:
C:\Projects\[project_name]\node_modules\webpack\lib\FileSystemInfo.js:2055
if (path.startsWith(managedPath)) {....
To Reproduce
See my webpack.config.js here:
Click me
const path = require('path');
const fs = require('fs');
const NodeExternals = require('webpack-node-externals');
const Dotenv = require('dotenv-webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = (env, argv) => {
const isProduction = argv.mode === 'production';
const dotenvGeneral = new Dotenv({ path: './.env' });
// Load the environment-specific .env file
const dotenvEnvironment = new Dotenv({
path: `./.env.${isProduction ? 'production' : 'development'}`,
});
// Function to discover all EJS files in the views directory and its subdirectories
function discoverEJSFiles(startPath) {
const result = [];
function finder(currentPath) {
const files = fs.readdirSync(currentPath);
files.forEach((file) => {
const filePath = path.join(currentPath, file);
const stat = fs.statSync(filePath);
if (stat.isDirectory()) {
finder(filePath); // Recurse into subdirectories
} else if (file.endsWith('.ejs')) {
result.push(filePath);
}
});
}
finder(startPath);
// console.log(result);
return result;
}
// Generate HtmlWebpackPlugin instances for all discovered EJS files
const ejsFiles = discoverEJSFiles('./src/views');
const htmlWebpackPlugins = ejsFiles.map((ejsFile) => {
const htmlFile = ejsFile.replace('.ejs', '.html');
return new HtmlWebpackPlugin({
template: ejsFile,
filename: htmlFile,
minify: {
removeComments: true,
collapseWhitespace: true,
conservativeCollapse: true,
},
});
});
return {
entry: './src/app.js',
target: 'node', // Bundle for Node.js environment
mode: process.env.NODE_ENV || 'development',
output: {
path: path.resolve(__dirname, 'dist'), // Output directory
filename: 'app.bundle.js', // Output bundle filename
clean: true, // Clean the 'dist' directory before each build
},
externals: [NodeExternals()], // Exclude Node.js modules from the bundle
plugins: [
dotenvGeneral,
dotenvEnvironment,
// Add all HTMLWebpackPlugin instances generated for EJS files
...htmlWebpackPlugins,
new CopyWebpackPlugin({
patterns: [
{ from: './src/public', to: 'public' }, // Copy public assets
{ from: './manifest.webmanifest', to: '' }, // Copy manifest file
],
}),
],
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader', // Transpile JavaScript files
options: {
presets: ['@babel/preset-env'],
plugins: [
['@babel/plugin-transform-runtime', { regenerator: true }],
],
},
},
},
{
test: /\.ejs$/,
use: ['html-loader', 'template-ejs-loader'], // Process EJS templates
},
{
test: /\.(png|svg|jpg)$/,
type: 'asset/resource', // Handle images
generator: {
filename: 'public/images/[name][ext]', // Output image filenames
},
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'], // Handle CSS files
},
],
},
resolve: {
alias: {
'@babel/preset-env': require.resolve('@babel/preset-env'),
},
},
output: {
// ... other output options
environment: {
arrowFunction: false,
destructuring: false,
forOf: false,
module: false,
},
},
};
}
Expected behavior I expected a successful build of my ejs templates with minification applied.
Version
- Webpack ^5.1.4
- ejs ^3.1.9
Additional context Here's my project structure:
Click me
project-root/
├─ src/
│ ├─ controller/
│ ├─ middleware/
│ ├─ models/
│ ├─ public/
│ │ ├─ images/
│ │ ├─ css/
│ │ ├─ js/
│ │ │ ├─ scripts/
│ ├─ routes/
│ ├─ upload/
│ ├─ utils/
│ ├─ views/ --my ejs files are here
│ ├─ app.js
│ ├─ .env
│ ├─ .env.development
│ ├─ .env.product
└─ manifest.webmanifest
└─ webpack.config.js
same error here 😢, was anyone able to fix it?