在Rails上反应-environment.toWebpackConfig不是函数

时间:2018-10-25 23:55:18

标签: ruby-on-rails reactjs webpack ruby-on-rails-5 react-on-rails

我正在使用react_on_rails gem将react前端添加到我们现有的rails后端。我在启动和运行所有程序时遇到了很多麻烦。为了使gem正常工作,整整花了整整一天的时间,因为它无法正常使用...我终于让我的Rails服务器正确启动(通过领班),但是在加载webpacker时出错了,错误:environment.toWebpackConfig is not a function

我一直在Google各处寻找解决此问题的方法,但是我读过的所有文章都没有任何帮助。有人知道我在做什么错吗?

完整跟踪:

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>,这是由于默认情况下,它在import语句中不包含jsx扩展名起始“ hello world”页面上的内容,也不能解决我自己做的webpacker配置文件中的扩展名,我猜测也许我做错了吗?

在我的研究中,我给人的印象是使用jsx扩展需要babel?它是否正确?我在@ rails / webpacker问题部分中注意到,他们指出set的使用方式已被弃用,而推荐使用append / prepend,但是,如果我尝试使用其中任何一种来解析扩展名,它在resolve.extensions行上出错,表示environment.prepend不是功能。我觉得我正在正确解析该扩展名,但是可能缺少使用jsx扩展名所需的其他内容?

感谢任何输入,谢谢!

1 个答案:

答案 0 :(得分:0)

显然是由于export语句上的花括号大声笑。在此之后,我仍然遇到其他问题,但是后来意识到问题出在Foreman,如果我分别运行webpack-dev-server和rails服务器,那么它就像一个魅力。