template-ejs-loader icon indicating copy to clipboard operation
template-ejs-loader copied to clipboard

path.startsWith issue

Open temiwale88 opened this issue 2 years ago • 1 comments

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

temiwale88 avatar Sep 05 '23 14:09 temiwale88

same error here 😢, was anyone able to fix it?

mauroandocilla avatar Feb 02 '24 16:02 mauroandocilla