我正在使用 react_on_rails gem 将反应前端添加到我们现有的 rails 后端。我在让一切正常运行时遇到了很多麻烦。花了一整天的时间才让 gem 正常工作,因为它开箱后不能正常工作......我终于让我的 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
弃用,赞成append
/ prepend
,但是如果我尝试使用其中任何一个来解决扩展,它会在 resolve.extensions 行出错,说environment.prepend
这不是一个功能。我觉得我正在正确解决扩展,但可能缺少使用 jsx 扩展所需的其他内容?
任何输入表示赞赏,谢谢!