Webpacker 无法编译 React 代码：无效的配置对象

Question

我正在尝试将一个正常工作的 Rails 5/React 应用程序（通过 npm 使用 webpack）更新到 Rails 6。我通过开始使用 webpacker=rails 创建一个新的 rails 应用程序来做到这一点，以便（理论上）它会做事对我来说更容易。我已经复制了所有相关代码，只是无法让 webpacker 编译我的 React 代码。

我的相关文件结构是：

Project
   |- app
       |- javascript
              |- packs
                   |- reactFrontend
                           |- /components, /actions, etc.
                   |- application.js
                   |- ProjectEntry.jsx

运行 bin/webpack-dev-server 报错：

✖ ｢wds｣: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   function | object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string]
   -> The entry point(s) of the compilation.
   Details:
    * configuration.entry['reactFrontend/components/dropdown_modal/dropdown_modal'] should be a string.
      -> The string is resolved to a module which is loaded upon startup.
    * configuration.entry['reactFrontend/components/dropdown_modal/dropdown_modal'] should be an array:
      [non-empty string]
      -> A non-empty array of non-empty strings
    * configuration.entry['reactFrontend/components/dropdown_modal/dropdown_modal'] should be one of these:
      [non-empty string]
      -> All modules are loaded upon startup. The last one is exported.
    * configuration.entry['reactFrontend/components/dropdown_modal/dropdown_modal'] should be one of these:
      non-empty string | [non-empty string]
      -> An entry point with name

我在这里和其他地方看到过一些具有相同一般错误的帖子，但不幸的是，他们的解决方案并不完全适合我。它引用的模态组件在旧版本的应用程序中运行良好。 我尝试过的一件事是将我的“reactFrontend”文件夹放在 /javascript 之外，但放在 /packs 之外，并且 webpacker 成功编译（当然，只是没有我的所有 React 代码），所以它成功找到了 packs 文件夹。

我的 webpacker.yml 文件，以防万一：

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  additional_paths: ['app/javascript/packs/reactFrontend']  <-- have tried with and without

我只能渲染我的 root.html.erb，它位于 app/views/static_pages 中

Answer 1

原来我需要两个 javascript_pack_tag：一个用于 application.js，另一个用于我的 React 入口文件。