bookofgreg / react-rails-example-app

Minimal basic demonstration React-Rails sample application using Webpacker

React-Rails Demo Application

This repo is an example of a simple working Rails 5, Webpack(er)3, React-Rails 2.3+ application.

Where generators are used, the git commit will be the command ran to get to the current application state so it will hopefully be easy to follow along at home.

How to test the Demo Application

1) Install the JS packages:

$ yarn install # or npm install

2) Install GEM packages:

$ bundle install

3) In one terminal run the rails server:

$ rails s

4) In another terminal run the webpack server:

$ ./bin/webpack-dev-server

5) Visit the welcome page

http://localhost:3000/welcome/index

Branches

This repo contains two trees, one Webpacker and one Sprockets.

Each branch illustrates a react-rails ability.

• master -> Webpacker 3
• sprockets -> Sprockets 3
• rails-production-version -> Sprockets 3 + serving production prebundled react
• rails-assets-sprockets -> Sprockets 3 + using Rails-Assets.org (failed)
• generate-new-component -> Webpacker 3 + new style component
• without-ujs -> Sprockets 3 + removing UJS and making component globally accessible
• jsx-file-example -> Webpacker 3 + file named .JSX
• coffeescript-example -> Webpacker 3 + Coffeescript WITH JSX

react-rails-example-app's Issues

./bin/webpack-dev-server fails with Error: Cannot find module 'webpack-cli/bin/config-yargs'

39e7c56

npm install
rails s

Seems fine, on other shell:

./bin/webpack-dev-server

fails with:

The CLI moved into a separate package: webpack-cli
Please install 'webpack-cli' in addition to webpack itself to use the CLI
-> When using npm: npm i -D webpack-cli
-> When using yarn: yarn add -D webpack-cli
internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /home/ciro/git/react-rails-example-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/ciro/git/react-rails-example-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/ciro/git/react-rails-example-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}

OK, I run:

npm i -D webpack-cli
./bin/webpack-dev-server

but problem persists:

internal/modules/cjs/loader.js:883
  throw err;
  ^

Error: Cannot find module 'webpack-cli/bin/config-yargs'
Require stack:
- /home/ciro/git/react-rails-example-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/home/ciro/git/react-rails-example-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js:65:1)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/ciro/git/react-rails-example-app/node_modules/webpack-dev-server/bin/webpack-dev-server.js'
  ]
}

This is the relevant SO apparently: https://stackoverflow.com/questions/40379139/cannot-find-module-webpack-bin-config-yargs

I try:

./bin/webpack serve

but fails with:

ERROR in Entry module not found: Error: Can't resolve 'serve' in '/home/ciro/git/react-rails-example-app'

A bit more webpack knowledge or trial and error is needed :-)

Ubuntu 20.10, Ruby 2.7, node.js v14.16.0. You might also want to track the package-lock.json that currently gets generated by npm.

Has anybody tried upgrading this app to Rails 7? and Shakapacker?

Has anybody tried upgrading this app to Rails 7? and Shakapacker?

I might take a try at this.

But I hate to duplicate the work if somebody else has done this.