htmlWebpackPlugin.options not available in pug template

perry-mitchell commented 2 years ago

Coming from the original pug loader, using the latest version of this library I get the following error during compilation:

  - Error: Cannot find module 'pug-walk'

  - Require stack:

  - - /home/perry/git/buttercup-browser-extension/node_modules/@webdiscus/pug-loader/src/index.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/loader-runner/lib/loadLoader.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/loader-runner/lib/LoaderRunner.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/webpack/lib/NormalModuleFactory.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/webpack/lib/Compiler.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/webpack/lib/webpack.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/webpack/lib/index.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/webpack-cli/lib/webpack-cli.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/webpack-cli/lib/bootstrap.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/webpack-cli/bin/cli.js

  - - /home/perry/git/buttercup-browser-extension/node_modules/webpack/bin/webpack.js

  - loader:933 Function.Module._resolveFilename
    node:internal/modules/cjs/loader:933:15

  - loader:778 Function.Module._load
    node:internal/modules/cjs/loader:778:27

  - loader:1005 Module.require
    node:internal/modules/cjs/loader:1005:19

  - helpers:102 require
    node:internal/modules/cjs/helpers:102:18

  - index.js:6 Object.<anonymous>
    [buttercup-browser-extension]/[@webdiscus]/pug-loader/src/index.js:6:14

  - loader:1101 Module._compile
    node:internal/modules/cjs/loader:1101:14

  - loader:1153 Object.Module._extensions..js
    node:internal/modules/cjs/loader:1153:10

  - loader:981 Module.load
    node:internal/modules/cjs/loader:981:32

  - loader:822 Function.Module._load
    node:internal/modules/cjs/loader:822:12

  - loader:1005 Module.require
    node:internal/modules/cjs/loader:1005:19

  - helpers:102 require
    node:internal/modules/cjs/helpers:102:18

  - loadLoader.js:19 loadLoader
    [buttercup-browser-extension]/[loader-runner]/lib/loadLoader.js:19:17

  - LoaderRunner.js:182 iteratePitchingLoaders
    [buttercup-browser-extension]/[loader-runner]/lib/LoaderRunner.js:182:2

  - LoaderRunner.js:178 iteratePitchingLoaders
    [buttercup-browser-extension]/[loader-runner]/lib/LoaderRunner.js:178:10

  - LoaderRunner.js:189 
    [buttercup-browser-extension]/[loader-runner]/lib/LoaderRunner.js:189:18

  - loadLoader.js:53 handleResult
    [buttercup-browser-extension]/[loader-runner]/lib/loadLoader.js:53:2

  - NormalModule.js:753 processResult
    [buttercup-browser-extension]/[webpack]/lib/NormalModule.js:753:19

  - NormalModule.js:855 
    [buttercup-browser-extension]/[webpack]/lib/NormalModule.js:855:5

  - LoaderRunner.js:399 
    [buttercup-browser-extension]/[loader-runner]/lib/LoaderRunner.js:399:11

  - LoaderRunner.js:185 
    [buttercup-browser-extension]/[loader-runner]/lib/LoaderRunner.js:185:11

  - loadLoader.js:33 loadLoader
    [buttercup-browser-extension]/[loader-runner]/lib/loadLoader.js:33:11

Haven't seen anything regarding pug-walk, but it seems like a requirement?

perry-mitchell commented 2 years ago

After installing pug-walk, I see this:

ERROR in   Error: Child compilation failed:
  Module build failed (from ./node_modules/@webdiscus/pug-loader/src/index.js):
  TypeError: Cannot read properties of undefined (reading 'options')
      at eval (eval at output (/home/perry/git/buttercup-browser-extension/node_modules/@webdiscus/p  ug-loader/src/loader.js:84:11), <anonymous>:9:160)
      at template (eval at output (/home/perry/git/buttercup-browser-extension/node_modules/@webdisc  us/pug-loader/src/loader.js:84:11), <anonymous>:10:7)
      at Object.output (/home/perry/git/buttercup-browser-extension/node_modules/@webdiscus/pug-load  er/src/loader.js:87:12)
      at Object.compilePugContent (/home/perry/git/buttercup-browser-extension/node_modules/@webdisc  us/pug-loader/src/index.js:138:27)
      at Object.module.exports (/home/perry/git/buttercup-browser-extension/node_modules/@webdiscus/  pug-loader/src/index.js:147:21)
  ModuleBuildError: Module build failed (from ./node_modules/@webdiscus/pug-loader/src/index.js):
  TypeError: Cannot read properties of undefined (reading 'options')
      at eval (eval at output (/home/perry/git/buttercup-browser-extension/node_modules/@webdiscus/p  ug-loader/src/loader.js:84:11), <anonymous>:9:160)
      at template (eval at output (/home/perry/git/buttercup-browser-extension/node_modules/@webdisc  us/pug-loader/src/loader.js:84:11), <anonymous>:10:7)
      at Object.output (/home/perry/git/buttercup-browser-extension/node_modules/@webdiscus/pug-load  er/src/loader.js:87:12)
      at Object.compilePugContent (/home/perry/git/buttercup-browser-extension/node_modules/@webdisc  us/pug-loader/src/index.js:138:27)
      at Object.module.exports (/home/perry/git/buttercup-browser-extension/node_modules/@webdiscus/  pug-loader/src/index.js:147:21)

Using this in loaders:

            {
                test: /\.pug$/,
                loader: "@webdiscus/pug-loader"
            },

And new PugPlugin() in plugins.

webdiscus commented 2 years ago

Hallo @perry-mitchell,

thank you for the issue report. I will research you interest case.

Do you can please show complete webpack.config.js. How you run the webpack?

webpack serve
webpack --mode=production
webpack --watch

What is version of pug-plugin or @webdiscus/pug-loader? Latest is "@webdiscus/pug-loader": "^1.6.2".

Requirements:

Webpack 5, but in package.json is the "webpack": "^4.44.1".
pug 3.0.2, but in package.json is the "^2.0.3".

Here is 100% working example hello world. No need extra instal pug-walk.

Please, create a small example with reproducible issue.

webdiscus commented 2 years ago

Haven't seen anything regarding pug-walk, but it seems like a requirement?

in the package.json dependencies is "pug": ">=3.0.2". The pug self require own dependencies, including pug-walk. Also, possible you should delete node_module, package-lock.json and run new install: npm i. It should be enough. By me local it works, without extra install of pug-walk.

webdiscus commented 2 years ago

I have upgraded by me local your project up to Webpack 5 and can reproduce the issue. The problem is in the template.pug:

title= htmlWebpackPlugin.options.title

The object htmlWebpackPlugin is undefined.

The temporary solution

change in the webpack.config.js, at line 12

const INDEX_TEMPLATE = path.resolve(__dirname, './resources/template.pug');

to

const INDEX_TEMPLATE = path.resolve(__dirname, './resources/template.pug?htmlWebpackPlugin={"options": {"title":"Buttercup"}}');

The added resource query ?htmlWebpackPlugin={"options":{"title":"Buttercup"}} "describe" the JSON object structure of htmlWebpackPlugin.options.title passed in the plugin:

       new HtmlWebpackPlugin({
            title: "Buttercup", // <==
            template: INDEX_TEMPLATE,
            filename: "popup.html",
            inject: "body",
            chunks: ["popup"]
        }),

I try to find any solution for that.

perry-mitchell commented 2 years ago

@webdiscus Wow! That was fast. Thanks a ton for looking into this.. I'll take a look at your suggestion asap. Really appreciate the help.

webdiscus commented 2 years ago

@perry-mitchell added supports the htmlWebpackPlugin.options in pug template, v1.6.4

You can pass any object/variabele into pug template with the following ways:

via query parameters, e.g. template.pug?htmlWebpackPlugin={"options":{"title":"Buttercup"}}

via HtmlWebpackPlugin options, e.g.

new HtmlWebpackPlugin({
title: "Buttercup", // <-- pass a string
myData: { // <-- pass a custom object
 someVar: 'value',
},
template: 'template.pug',
filename: "popup.html",
}),

usage in pug

div Here is my title #{htmlWebpackPlugin.options.title}
p Here is some variable #{htmlWebpackPlugin.options.myData.someVar}

webdiscus commented 2 years ago

@perry-mitchell

And new PugPlugin() in plugins.

If you are using HtmlWebpackPlugin to extract html from pug, then you should not use new PugPlugin() in plugins.

The pug-plugin is for extract HTML from pug files, defined in webpack entry, e.g.:

const path = require('path');
const PugPlugin = require('pug-plugin');

module.exports = {
  output: {
    path: path.join(__dirname, 'public/'),
    publicPath: '/',
  },

  entry: {
    index: 'src/index.pug', // the `PugPlugin` is required to save rendered HTML to public/index.html
  },

  plugins: [
    new PugPlugin() // extract HTML from pug defined in webpack entry and save to separate file
  ],

  module: {
    rules: [
      {
        test: /\.pug$/,
        loader: PugPlugin.loader, // `@webdiscus/pug-loader` is already included in PugPlugin
      },
    ],
  },
};

If you don't want to define pug files in a webpack entry, just use only @webdiscus/pug-loader.

webdiscus commented 2 years ago

@perry-mitchell the new version (>= 1.6.4) of the pug-loader supports the htmlWebpackPlugin.options in pug template.

But this pug-loader requires Webpack 5. Your old project is using Webpack v4.44.1. Sorry, pug-loader can't work with Webpack 4.

I close the issue.

perry-mitchell commented 2 years ago

Thanks for this!

I was in the process of upgrading to Webpack 5 when this issue arose, so I’ll of course use version 5 going forward.

webdiscus commented 2 years ago

Hello @perry-mitchell,

I released the new version of pug-plugin which can be very useful. This plugin already contains the @webdiscus/pug-loader.

As an example I forked and refactored your repo buttercup-desktop for use with the pug-plugin. That was very little changes. Now the forked repo buttercup-desktop-pug-plugin work fine with pug-plugin. (It's for demo only, I can delete it later) Here your can see the changes in my commit. Please see the comments for changes.

The goal of plugin is that:

define all source files of assets directly in Pug template where that belongs;
the pug template is single entry-point for all resources used in this template;
keep JS free from importing the styles
keep webpack config clean and clear
faster build

Highlights

you can define pug template as webpack entry-point

const PugPlugin = require('pug-plugin');
module.exports = {
entry: {
'index': './src/template/index.pug',
'about': './src/template/pages/about/index.pug',
// ...
},
plugins: [
new PugPlugin(),
],
module: {
rules: [
  {
    test: /\.pug$/,
    loader: PugPlugin.loader,
  },
],
},
// ...
};

source files of scss, js can be used directly in pug, do not need to define them in the webpack entry \ all required resources in pug will be automatically processed by webpack
```
link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.js'))
```

generated HTML contains hashed CSS and JS output filenames

<link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">
<script src="/assets/js/main.f4b855d8.js"></script>

resolves source files in SCSS/CSS and replace them with hashed output filenames
```
// resolve assets in imported package
@use 'material-icons'; 
```

// resolve webpack alias @font-face { font-family: 'Montserrat'; src: url('~Fonts/Montserrat/Montserrat-Regular.woff2'); //-> url(/assets/fonts/Montserrat-Regular.woff2) }

// resolve relative path .header { background-image: url('../images/header.png'); //-> url(/assets/img/header.4fe56ae8.png) }



P.S. sorry for disturb, you can ignore this comment.

webdiscus / pug-loader

htmlWebpackPlugin.options not available in pug template #8

The temporary solution

faster build

Highlights