質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

webpack5のpugで変数を取得できない

umesister
umesister

総合スコア0

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0リアクション

0クリップ

888閲覧

投稿2021/10/13 11:07

編集2021/10/18 09:30

前提・実現したいこと

webpack環境でA.pugというファイルで_B.pugで定義している変数を呼び出したい。

発生している問題・エラーメッセージ

webpack5でPugの変数を使う際に別ファイルで定義している変数を呼び出す(include)と以下のようなエラーが表示され、
変数の値が取得・展開できません。

ERROR in Template execution failed: TypeError: Cannot read property 'name' of undefined ERROR in TypeError: Cannot read property 'name' of undefined - A.pug:16 /Users//webpack_sample_v1_pug/src/pug/A.pug:16:471 - A.pug:16 template /Users//webpack_sample_v1_pug/src/pug/A.pug:16:2110 - index.js:450 [webpack_sample_v1_pug]/[html-webpack-plugin]/index.js:450:16 - task_queues.js:97 processTicksAndRejections internal/process/task_queues.js:97:5 - async Promise.all

該当のソースコード

_B.pug

pug

//- _B.pug - var site = {}; - site.name = 'サイト名';

A.pug

pug

// A.pug include /_B.pug doctype html html(lang="jp") head meta(charset="UTF-8") meta(http-equiv="X-UA-Compatible", content="IE=edge") meta(name="viewport", content="width=device-width, initial-scale=1.0") title= site.name // ここの変数を取得できない body script(src="./js/bundle.js")

webpackファイル

webpack.config.js

javascript

// webpack.config.js const path = require("path"); const MODE = "development"; const globule = require("globule"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const webpack = require("webpack"); const app = { mode: MODE, entry: ["./src/js/index.js"], output: { path: path.resolve(__dirname, "dist"), filename: "./js/bundle.js", }, devtool: "source-map", module: { rules: [ { test: /.js$/, use: [ { loader: "babel-loader", options: { presets: ["@babel/preset-env"], }, }, ], }, { test: /.pug$/, use: [ { loader: "pug-loader", options: { pretty: true, root: path.resolve(__dirname, "src/pug"), }, }, ], }, ], }, devServer: { static: { watch: true, directory: `${__dirname}/src`, }, open: true, }, plugins: [ new webpack.ProvidePlugin({ $: "jquery", }), ], target: ["web", "es5"], devtool: "source-map", watchOptions: { ignored: /node_modules/, }, }; const templates = globule.find("./src/pug/**/*.pug", { ignore: ["./src/pug/**/_*.pug"], }); templates.forEach((template) => { const fileName = template.replace("./src/pug/", "").replace(".pug", ".html"); app.plugins.push( new HtmlWebpackPlugin({ filename: `${fileName}`, template: template, inject: false, minify: false, }) ); }); module.exports = app;

package.json

json

{ "scripts": { "build": "webpack --mode production", "dev": "webpack --mode development", "watch": "webpack --mode development --watch", "start": "webpack serve --mode development" }, "devDependencies": { "@babel/core": "^7.15.5", "@babel/preset-env": "^7.15.6", "autoprefixer": "^10.3.7", "babel-loader": "^8.2.2", "copy-webpack-plugin": "^9.0.1", "css-loader": "^6.2.0", "globule": "^1.3.3", "html-webpack-plugin": "^5.3.2", "html-webpack-pug-plugin": "^3.0.0", "mini-css-extract-plugin": "^2.3.0", "path": "^0.12.7", "postcss": "^8.3.9", "postcss-loader": "^6.1.1", "pug": "^2.0.4", "pug-loader": "^2.4.0", "sass": "^1.39.2", "sass-loader": "^12.1.0", "style-loader": "^3.2.1", "webpack": "^5.52.1", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.2.0" }, "dependencies": { "jquery": "^3.6.0" }, "browserslist": [ "> 3% in JP", "ie 11", "android 4.4", "last 1 versions" ] }

ディレクトリ構造

ディレクトリ構造
※distも同じ階層構造です。

試したこと

・A.pug内で変数を定義、そして展開すると問題なくコンパイルができました。
・_B.pugで変数作成・タグに変数の値を代入した状態で、includeすると展開ができました。※下記参照願います。

pug

// _B.pug - var text = 'サンプル';

pug

// A.pug @include _B.pug // 結果 'サンプル'が表示される

どうかよろしくお願い致します。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

runnynose

2021/10/20 07:14

試して回答しているわけではないんですけど、気になった点を記載します。 > - site.name = 'サイト名'; ここの記述でインデントが入っているんですけど、これは関係ないですかね??
umesister

2021/10/22 10:47

コメントありがとうございます。 こちらは問題ないですね。^^;

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Pug

Pug(旧Jade)とは、HTMLを書くためのテンプレートエンジン。タグで囲む必要がないなど記述を省略できるため、HTMLの記述が簡単になります。ファイル分割も可能で、変数やループなど便利な機能も備わっています。

コンパイルエラー

コンパイルのフェーズで生成されるエラーです。よく無効なシンタックスやタイプが含まれているとき発生します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。