webpackを利用した時にnode_moduleのvue.jsをrequireで読み込めなくて困っています。→ 訂正 importで読み込めなくて困っています。

Question

webpackを利用した時にnode_moduleをrequireで読み込めなくて困っています。
→ 訂正　webpackを利用した時にnode_moduleをimportで読み込めなくて困っています。

まずnpmでパッケージをインストールし、　(npm install)
webpackでビルド (npm run build)

までは成功したのですが、その後実際に使用するためにvue.jsをrequireで読み込もうとしたのですが、Uncaught ReferenceError: require is not defined　が発生してしまいました。
コンソールでwindowにvueが含まれていなかったので読み込めないのかもしれませんが。

↓　変更

webpack-config.js、そのほかの設定を見直しし、
importで読み込めるように調整をしていますがうまくいきませんでした。

どなたかわかる方いらっしゃいましたらお願いします。

本文のソースコードの追記は長くなってしまうため、ソースコードをそのまま変更しました。

// フォルダ構成を修正　
- Project
    - wwwroot
        - dist
            - main.js
        - js
            - Test1
                - index.js
        - src
            - index.js
            - index.html (エントリポイント用のhtml)
        - node_modules

    - Views
        - Test1
            - Index.html

// package.jsonを修正
{
  "name": "webapp",
  "version": "1.0.0",
  "description": "webapp use webpack",
  "repository": "webapp",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.7",
    "@babel/preset-env": "^7.16.11",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.7.1",
    "html-webpack-plugin": "^5.5.0",
    "mini-css-extract-plugin": "^2.5.3",
    "vue-loader": "^17.0.0",
    "vue-style-loader": "^4.1.3",
    "webpack": "^5.70.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.7.4"
  },
  "dependencies": {
    "@popperjs/core": "^2.11.4",
    "bootstrap": "^5.1.3",
    "core-js": "^3.21.1",
    "vue": "^3.2.31"
  }
}

// webpack-config.jsを修正
const path = require("path");

const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { VueLoaderPlugin } = require("vue-loader");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    entry: {
        main: "./src/index.js",
        TestManagement_SampleLists: "./js/views/transaction.testmanagement/TestManagement_SampleLists/index.js"
    },
    output: {
        filename: "[name].js",
        path: __dirname + "/dist"
    },
    devtool: "source-map",
    mode: "development",
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, "/src"),
                loader: "babel-loader",
                options: { presets: ["@babel/preset-env"] }
            },
            {
                test: /\.vue$/,
                loader: "vue-loader"
            },
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"],
            }
        ],
    },

    resolve: {
        // Webpackで利用するときの設定
        alias: {
            "bootstrap$": "./bootstrap/dist/js/bootstrap.js",
            "vue$": "./vue/dist/vue.esm-bundler.js"
        },
        extensions: ["*", ".js", ".vue"],
    },

    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/index.html",
        }),
        new MiniCssExtractPlugin({
            filename: "./css/site.css",
            chunkFilename: "[name].css"
        }),
        new VueLoaderPlugin(),
        new webpack.DefinePlugin({
            __VUE_OPTIONS_API__: false,
            __VUE_PROD_DEVTOOLS__: false,
        })
    ]
};

// app.js -> index.jsに変更、修正
import "@popperjs/core";
import "bootstrap";
import "vue";

import "../js/Test1/index.js

// htmlを修正
<script src="./dist/main.js"></script>

<div id="app">

</div>

<!-- 画面ごとのjavascript -->
<!-- webpackから実行できるようになった -->
<!-- <script type="module" src="./js/Test1/index.js" defer></script> -->

// javascriptを修正
import { createApp } from "vue"; // 入らない

const app = createApp({

});

app.mount("#app");

現在の画面のコンソール
webpack-dev-serverを起動し、javascriptでブレークをすることはできたが、createAppが空だった。

Comments

[maisumakun]

> vue.jsをrequireで読み込もうとしたのですが

当該のファイルは、どのように使おうとしたのですか？

[mee12]

コメントありがとうございます。

<script type="module" src="./dist/app.bundle.js"></script>を

const createApp = require("vue");

const app = createApp({

});

app.mount("#app");

のようにで使用しようとしてました。

答えになっていなければすみません。

Answer 1

ブラウザで直接requireを処理することはできません（<script type="module">はimportなら通しますが、それでもnpm経由のモジュールを取得することは実質的にできません）。

当該のファイルをWebpack処理に通して、その結果をブラウザから読み込む必要があります。

Comments

[mee12]

ご回答ありがとうございます。
requireと<script type="module">のimportについてわかりました。

Webpack処理を通して、その結果をブラウザに読み込むにはどうすればよいでしょうか？

[maisumakun]

app.jsから当該JavaScriptファイルをimportしましょう。

[mee12]

現在は　app.js内にimportを書いて　app.jsをwebpackでビルドして、app.bundle.jsになったところでつまずいてました。

[maisumakun]

> app.bundle.jsになったところでつまずいてました。

同じエラーが出続けている状況ですか？

[mee12]

いまは requireをやめて、webpack-config.jsの修正をしました。

・webpack-config.jsをデフォルトに修正
module.exports = {
entry: {
main: "./src/index.js"
},
output: {
filename: "[name].js",
path: __dirname + "/dist"
},

・webpack.config.jsのalias
"vue$': 'vue/dist/vue.esm-bundler.js"を追加

・npm run build

・実際にはhtmlから画面固有のjavascriptを script type="module" srcで呼び出していて、その中で、
import { createApp } from "vue";

const app = createApp({

});

app.mount("#app");

をしています。

その結果importする時にエラーしているみたいで、パスがおかしいと言われています。
Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

aliasを下記とすると、npm run buildが通らないのでダメでした。
"vue$": "../node_modules/vue/dist/vue.esm-bundler.js"

[maisumakun]

> 実際にはhtmlから画面固有のjavascriptを script type="module" srcで呼び出していて

呼び出すファイルもWebpackで事前処理の必要があります（一緒にapp.jsから呼び出す、もしくはwebpack.configで処理対象に追加する）。そのままtype="module"で呼んでもnpmパッケージが処理できません。

[mee12]

なるほどです。画面ごとにscriptを変える場合はwebpackにどのような設定をすれば良いでしょうか？

いまやりたいこととしては、SPAじゃなくマルチページアプリでjavascript使いたいということです。
サーバー側がMVCアプリなのでvueプロジェクトを構築するわけにもいかず。

ネットで以下のような記事を見つけました。

MPA(マルチページアプリ)でwebpackを使う
https://www.key-p.com/blog/staff/archives/107125

記事によると、srcフォルダにindex.htmlとindex.jsを置いているようです。
jsフォルダとViewsフォルダに分けるような使い方ができるのか調査中です。

まずはwebpack-config.jsに画面ごとのエントリーポイントを設定してみましたがうまくいきませんでした。

importができていない状況です。
バンドルのためのjsファイルのimportのパスか、aliasのパスの間違いがあるかもしれません
エントリポイントの複数設定については必要のようです。

- 実現したいこと -

- wwwroot
　- dist
　- main.js
　- js
　　- Test1
　　　- index.js　※1View固有のjsファイル
　- src
　　- index.html
　　- index.js　　　 ※バンドルのためのjsファイル
　- node_modules
　- package.json
　- webpack-config.js

- Views
　- Test1
　　- Index.html　※Controllerで開くhtmlファイル
---------------------------------------------------------

[mee12]

bundleしたファイルを実行でき、画面固有のjavascriptも実行できましたが、importでcreateAppが入りませんでした。
本文のソースを修正しました。

Answer 2

解決できないため一旦終了します

Answer 3

node.jsはやってなくて受け売りですが、
webpack.config.js に

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
  }

を足すとか。

webpack + Vue(webpack.config.js書き方の例) - Qiita
Webpack 5を使ったvue.jsの環境構築とSFCの利用方法 | アールエフェクト

Comments

[mee12]

ご回答ありとうございます。
私の環境はVue.js3でしたので、
"vue$": "vue/dist/vue.esm-bundler.js"のようにして、ビルドして再実行しましたが、うまくいきませんでした。

コンソールのwindowに何ももないようです。