Closed perry-mitchell closed 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.
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.
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
.
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.
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.
@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.
@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:
template.pug?htmlWebpackPlugin={"options":{"title":"Buttercup"}}
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}
@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
.
@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.
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.
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:
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,
},
],
},
// ...
};
link(href=require('./styles.scss') rel='stylesheet')
script(src=require('./main.js'))
<link href="/assets/css/styles.05e4dd86.css" rel="stylesheet">
<script src="/assets/js/main.f4b855d8.js"></script>
// 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.
Coming from the original pug loader, using the latest version of this library I get the following error during compilation:
Haven't seen anything regarding
pug-walk
, but it seems like a requirement?