I'm using the react_on_rails gem to add a react frontend to our existing rails backend. I'm having a lot of trouble getting everything up and running. It took like an entire day just to get the gem working properly because it didn't work correctly out of the box... I finally got my Rails server to properly startup (via foreman) but it errors out when it loads webpacker, with the error: environment.toWebpackConfig is not a function
I've been looking all over google to resolve this issue, but none of the articles I have read have been of any help. Does anyone have any idea what I'm doing wrong?
Full trace:
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
File causing the error:
// development.js
process.env.NODE_ENV = process.env.NODE_ENV || 'development'
const environment = require('./environment')
module.exports = environment.toWebpackConfig() Another file which I feel might be necessary in resolving this issue:
// 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,
}
Originally when I first got the Rails server to work with the react_on_rails gem, it was throwing an error saying unexpected token <div> which was due to the fact that, by default, it doesnt include the jsx extension in the import statement of the starter 'hello world' page, nor does it resolve the extension in the webpacker config file, which I did myself, and I'm guessing that maybe I didn't do it right?
In my research I was given the impression that babel is needed to use the jsx extension? Is this correct? I noticed on the @rails/webpacker issues section, they noted how set is deprecated, in favor of append/prepend, however if I try using either of those to resolve the extension, it errors on the resolve.extensions line, saying environment.prepend is not a fucntion. I feel like I'm resolving the extension properly, but maybe missing something else required to use the jsx extension?
Any input is appreciated, thanks!
