$RefreshSig$ is not defined error after using tutorial

[tonekk]

Hi,

I just created a new rails app following the tutorial.
When running foreman start -f Procfile.dev-static, I get the following errors when going to http://localhost:3000/hello_world:
(Btw I had to change Procfile.dev-static to:

# You can run these commands in separate shells
web: rails s -p 3000

# Next line runs a watch process with webpack to compile the changed files.
# When making frequent changes to client side assets, you will prefer building webpack assets
# upon saving rather than when you refresh your browser page.
# Note, if using React on Rails localization you will need to run
# `bundle exec rake react_on_rails:locale` before you run bin/webpacker
webpack: sh -c 'rm -rf public/packs/* || true && bin/shakapacker -w'

as it used webpacker before.)

When running with rails s and shakapacker-dev-server, I get:

How to solve this?

Thanks 🙏

[justin808]

@ahangarha is working on updates.

[Judahmeek]

@tonekk I think this was user error... Kinda, anyway...

The $RefreshSig$ is not defined error you have is caused when the react-refresh babel plugin is used, but a corresponding Webpack plugin is not.

The logic the ReactOnRails installation generator adds is that the react-refresh babel plugin is used if the WEBPACK_SERVE environment variable is defined, which is usually only if webpack-dev-server is running.

The Webpack plugin, however, is only added if Shakapacker determines that the dev_server is running (which it checks by websocket) & that you've configured CSS to be inlined..

Since you're trying to use Procfile.dev-static, that's not happening, which means that the react-refresh babel plugin shouldn't be being used.

Since it apparently was, my guess is that you have webpack-dev-server running either in the background or on another tab.

You can check for this by adding something like:

  if(process.env.WEBPACK_SERVE) {
    throw "process.env.WEBPACK_SERVE shouldn't be defined!!!"
  }

to your babel.config.js.