@Emma029posted at 2024-02-06

webpackerのエラーを解決したいです

Q&A

Closed

解決したいこと

Ruby on Railsで投稿サイトのようなWebアプリをつくっています。
webpackerをインストール後，コンパイルしようとしたのですが，以下のエラーが発生してしまいました。
解決方法を教えて下さい。

発生している問題・エラー

# rails webpacker:compile
Warning: you are using an unstable release of Node.js (v19.9.0). If you encounter issues with Node.js, consider switching to an Active LTS release. More info: https://docs.npmjs.com/try-the-latest-stable-version-of-node
Compiling...
Compilation failed:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be an non-empty object.
   -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.

ブラウザ上のエラー

Webpacker::Manifest::MissingEntryError in Posts#index
Showing /app/app/views/layouts/application.html.erb where line #16 raised:

Webpacker can't find application.js in /app/public/packs/manifest.json. Possible causes:
1. You want to set webpacker.yml value of compile to true for your environment
   unless you are using the `webpack -w` or the webpack-dev-server.
2. webpack has not yet re-run to reflect updates.
3. You have misconfigured Webpacker's config/webpacker.yml file.
4. Your webpack configuration is not creating a manifest.
Your manifest contains:
{
}
Extracted source (around line #16):
14
15
16
17
18
19
              

    <%= stylesheet_pack_tag 'application', media: 'all' %>
    <%= javascript_pack_tag "application", "data-turbo-track": "reload", defer: true %>
  </head>

  <body>

Rails.root: /app

Application Trace | Framework Trace | Full Trace
app/views/layouts/application.html.erb:16

該当するソースコード

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>RunteqExamination</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
          rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all' %>
    <%= javascript_pack_tag "application", "data-turbo-track": "reload", defer: true %>
  </head>

  <body>
    <%= render 'shared/header' %>
    <%= render 'shared/flash_message' %>
    <div class="main pt-5">
      <%= yield %>
    </div>

  </body>
</html>

自分で試したこと

Webpackがまだ再実行されていないかもしれないと思い，bin/webpackを実行しましたが同じエラーが発生してしまいました。

# bin/webpack
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be an non-empty object.
   -> Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.

参考にした記事

https://prathamesh.tech/2019/08/26/understanding-webpacker-in-rails-6/
https://qiita.com/kazumawada/items/776e841420aa60d804ae

Are you sure you want to delete the question?