1

react_on_rails gem を使用して、react フロントエンドを既存の Rails バックエンドに追加しています。私はすべてを立ち上げて実行するのに多くの問題を抱えています。箱から出してすぐに正しく動作しなかったため、宝石が正しく動作するようになるまでに丸一日かかりました...最終的にRailsサーバーを（フォアマン経由で）適切に起動しましたが、webpackerをロードするとエラーが発生します。エラー：environment.toWebpackConfig is not a function

この問題を解決するためにグーグル全体を見てきましたが、私が読んだ記事はどれも役に立ちませんでした. 誰かが私が間違っていることを知っていますか?

完全なトレース:

16:25:11 client.1 | /Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/cli.js:244
16:25:11 client.1 |                             throw err;
16:25:11 client.1 |                             ^
16:25:11 client.1 |
16:25:11 client.1 | TypeError: environment.toWebpackConfig is not a function
16:25:11 client.1 |     at Object.<anonymous> (/Users/elliot/ft_wilderness_patrol/server/current/config/webpack/development.js:5:30)
16:25:11 client.1 |     at Module._compile (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/v8-compile-cache/v8-compile-cache.js:178:30)
16:25:11 client.1 |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
16:25:11 client.1 |     at Module.load (internal/modules/cjs/loader.js:599:32)
16:25:11 client.1 |     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
16:25:11 client.1 |     at Function.Module._load (internal/modules/cjs/loader.js:530:3)
16:25:11 client.1 |     at Module.require (internal/modules/cjs/loader.js:637:17)
16:25:11 client.1 |     at require (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/v8-compile-cache/v8-compile-cache.js:159:20)
16:25:11 client.1 |     at WEBPACK_OPTIONS (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/convert-argv.js:133:13)
16:25:11 client.1 |     at requireConfig (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/convert-argv.js:135:6)
16:25:11 client.1 |     at /Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/convert-argv.js:142:17
16:25:11 client.1 |     at Array.forEach (<anonymous>)
16:25:11 client.1 |     at module.exports (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/convert-argv.js:140:15)
16:25:11 client.1 |     at yargs.parse (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/cli.js:241:39)
16:25:11 client.1 |     at Object.parse (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/node_modules/yargs/yargs.js:563:18)
16:25:11 client.1 |     at /Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/cli.js:219:8
16:25:11 client.1 |     at Object.<anonymous> (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack-cli/bin/cli.js:538:3)
16:25:11 client.1 |     at Module._compile (internal/modules/cjs/loader.js:689:30)
16:25:11 client.1 |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
16:25:11 client.1 |     at Module.load (internal/modules/cjs/loader.js:599:32)
16:25:11 client.1 |     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
16:25:11 client.1 |     at Function.Module._load (internal/modules/cjs/loader.js:530:3)
16:25:11 client.1 |     at Module.require (internal/modules/cjs/loader.js:637:17)
16:25:11 client.1 |     at require (internal/modules/cjs/helpers.js:20:18)
16:25:11 client.1 |     at Object.<anonymous> (/Users/elliot/ft_wilderness_patrol/server/current/node_modules/webpack/bin/webpack.js:155:2)
16:25:11 client.1 |     at Module._compile (internal/modules/cjs/loader.js:689:30)
16:25:11 client.1 |     at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
16:25:11 client.1 |     at Module.load (internal/modules/cjs/loader.js:599:32)
16:25:11 client.1 |     at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
16:25:11 client.1 |     at Function.Module._load (internal/modules/cjs/loader.js:530:3)
16:25:11 client.1 | exited with code 1
16:25:11 system   | sending SIGTERM to all processes
16:25:11 web.1    | - Gracefully stopping, waiting for requests to finish
16:25:11 web.1    | === puma shutdown: 2018-10-25 16:25:11 -0700 ===
16:25:11 web.1    | - Goodbye!
16:25:11 web.1    | Exiting
16:25:11 web.1    | terminated by SIGTERM

エラーの原因となっているファイル:

// development.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')

module.exports = environment.toWebpackConfig() この問題を解決するために必要と思われる別のファイル:

// environment.js
const { environment } = require('@rails/webpacker')


environment.config.set('resolve.extensions', ['.jsx'])

environment.loaders.append('jsx', {
    test: /\.jsx$/,
    use: 'babel-preset-react'
  })

module.exports = {
    environment,
}

もともと、Rails サーバーを react_on_rails gem で初めて動作させたときunexpected token <div>、デフォルトでは、スターター 'hello world' ページのインポート ステートメントに jsx 拡張機能が含まれていないという事実が原因であるというエラーがスローされていました。 、また、私が自分で行ったwebpacker構成ファイルの拡張子を解決しません。おそらく私はそれを正しくしなかったと思いますか?

私の調査では、jsx 拡張機能を使用するには babel が必要であるという印象を受けましたか? これは正しいです？@rails/webpacker の問題セクションで、 /setを支持して非推奨になっていることに気づきましたが、これらのいずれかを使用して拡張機能を解決しようとすると、resolve.extensions 行でエラーが発生し、関数ではないと表示されます。拡張機能を適切に解決しているように感じますが、jsx 拡張機能を使用するために必要なものが他にないのでしょうか?appendprependenvironment.prepend

ご意見をお待ちしております。

4

1 に答える 1