client/webpack.client.rails.hot.config.js: importLoaders 1 => 0?

[vsai]

In 001a3ae, it looks like the importLoaders value for 'css-loader' was changed from 1 to 0.
Is this expected? Don't see why this should've changed.

[justin808]

Hey -- maybe! can use some help on getting hot reloading, etc. working!

[vsai]

Hey @justin808 I've taken a look at it but that didn't seem to fix it. I'm looking to see how to get webpack hot reloading working, but I'm not too experienced with node+webpack configs, and not too sure how to go about debugging them, and had a few questions if you could help me out?

(1)
localhost:3500/webpack-dev-server (lists the files as so:)

app-bundle.js
app-bundle (magic html for app-bundle.js) (webpack-dev-server)
vendor-bundle-1de0b2efad7346d3638c.js
vendor-bundle-1de0b2efad7346d3638c (magic html for vendor-bundle-1de0b2efad7346d3638c.js) (webpack-dev-server)
manifest.json

clicking app-bundle.js / vender-bundle-[hash].js / manifest.json correctly displays the file.
clicking app-bundle / vendor-bundle-[hash] says that there is an error proxying through http://lvh.me:3500
Could this be an issue with webpack-dev-server itself? Maybe the proxy is not defined properly? Maybe contentBase is not defined correctly?
FWIW, the build output includes:

Using a URL as contentBase is deprecated and will be removed in the next major version. Please use the proxy option instead.
proxy: {
       "*": "<your current contentBase configuration>"
}

(2)
In webpack.client.rails.hot.config.js,

output: {
  filename: '[name].js',
  path: webpackOutputPath,
},

doesn't include

publicPath: `/${webpackPublicOutputDir}/`

Is this needed? A public path was defined in the old configuration.

(3)

<%= stylesheet_pack_tag('vendor-bundle', media: 'all', 'data-turbolinks-track': true) %>
<%= stylesheet_pack_tag('app-bundle', media: 'all', 'data-turbolinks-track': true) %>

In hot reloading, this generates:

<link rel="stylesheet" media="all" href="/webpack/development/.css" data-turbolinks-track="true">
<link rel="stylesheet" media="all" href="/webpack/development/.css" data-turbolinks-track="true">

Without any actual css filename. Is this expected not to generate the correct links for css files? I'm guessing so because we don't hot reload css files onto the page. But just wanted to confirm.

(4)

<script src="/webpack/development/vendor-bundle-24a27ea485f3069d2d99.js" data-turbolinks-track="true"></script>
<script src="/webpack/development/app-bundle.js" data-turbolinks-track="true"></script>

These are returning 404s too. But I think that's part of the hot-reloading problem not finding the correct files, right?

(5)
In config/webpacker_lite.yml, hot_reloading_enabled_by_default: false, but there's no script that passes HOT_RELOAD in as an ENV variable, when running hot-assets.
Is this expected too? Should one of the scripts when running the rails server set this to be true?

[szyablitsky]

@vsai just remove rails-static-client-assets entry from Procfile.dev
You should have either hot assets or static ones in procfile because they both write in manifest.json and write different things. One process overwrites the other's version of manifest.json

[justin808]

@szyablitsky should this one be left open? Any todo's from this one? Docs? Code?

[szyablitsky]

@justin808 I do not know what is your preferred config for development.
For me, after trying react-on-rails 8 with webpacker_lite I decided to keep only two Procfiles: Procfile.dev (without static client, with hot reolading) and Procfile.static (with static client, without hot reloading).

[justin808]

@szyablitsky if you can update this repo the way we did for https://github.com/shakacode/react_on_rails spec/dummy, that would be amazing!

See: https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/hot-reloading-rails-development.md

[justin808]

@vsai @szyablitsky What's next on this task?

[szyablitsky]

@justin808 right now we are on tight schedule to the first beta of our project, so I can't help you with documentation fixes in near future.
I think you should close this issue and open another clearly named about patching hot reloading documentation to the current state.

[justin808]

Closing b/c the issue is stale.