webdiscus / pug-plugin

Renders Pug template to HTML or template function. Resolves source files of scripts, styles, images in Pug . Uses Pug template as entry point.
https://webdiscus.github.io/pug-plugin/hello-world
ISC License
73 stars 8 forks source link

Support Node v12.x #50

Closed alexandr-kazakov closed 2 years ago

alexandr-kazakov commented 2 years ago
  1. I have nodejs v12.18.3
  2. Run webpack command
  3. Get this error: Снимок экрана 2022-11-12 в 14 20 44

On node v16.x it’s working fine, but I need 12.x.

My webpack.config.js:


const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const PugPlugin = require('pug-plugin');

module.exports = {
  mode: 'development',
  stats: 'maximal',
  entry: './src/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js'],
  },
  devServer: {
    static: {
      directory: path.join(__dirname, 'dist'),
    },
    hot: true,
    port: 3000,
    historyApiFallback: true,
    compress: true,
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        include: path.resolve(__dirname, 'src'),
        use: [
          {
            loader: 'ts-loader',
            options: {
              configFile: path.resolve(__dirname, 'tsconfig.json'),
            },
          },
        ],
        exclude: /(node_modules)/,
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.pug$/,
        loader: PugPlugin.loader,
        exclude: /(node_modules)/,
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'src/index.html',
    }),
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash].css',
    }),
  ],
};
webdiscus commented 2 years ago

Hi @alexandr-kazakov,

Don't use the Pug plugin together with html-webpack-plugin and mini-css-extract-plugin. Just one Pug plugin replaces the functionality of both html-webpack-plugin and mini-css-extract-plugin to make usage of Pug much easy. Please, see correct use examples of pug-plugin.

In your use case of the Webpack config should be used the @webdiscus/pug-loader instead of the pug-plugin.

Add the exact version 2.8.2 of @webdiscus/pug-loader supported node 12 in package.json:

"devDependencies": {
  "@webdiscus/pug-loader": "2.8.2"
}

In Webpack module rule change the Pug loader:

     {
        test: /\.pug$/,
        loader: '@webdiscus/pug-loader',
        exclude: /(node_modules)/,
      },

You can find last version supported node 12: