Webpacker: Old packs not found when upgrading from 3.0 to 3.2

[sara-dubois]

After upgrading Webpacker to 3.2, no old packs are picked up anymore. And no errors. "webpack: Compiled successfully."

However, when creating a new jsx-file, things seem to work fine. It turns up on the web page as expected.

Steps that have been taken after updating the Webpacker gem:

• Deleting node_modules and yarn.lock
• rails webpacker:install
• rails webpacker:install:react
• yarn
• ./bin/webpack-dev-server

Any clues what's going on here?

Context:

• We're workting with React components
• Rails 5.1
• Both old and and new files are picked up in manifest.json, with no appearent differencies

[gauravtiwari]

@sara-dubois Not sure I understand. You mean files pre upgrade i.e. no old packs? Ahh, I see - did you change packs folder name? And does webpacker.yml has same settings?

[sara-dubois]

OK, I've tried the procedure once again to check if I've missed anything, but no - it's the exact same thing.

To answer your questions - no, the packs folder name has not changed. Nothing files or folders have been changed manually except for updating the css-loader code in config/webpacker/environament.js and renamed all .css files to .scss and their respective references.

Regarding webpacker.yml, rails webpacker:install added these additional lines:

public: localhost:3035
# Inline should be set to true if using HMR
inline: true
overlay: true
compress: true
disable_host_check: true
use_local_ip: false
quiet: false
headers:
  'Access-Control-Allow-Origin': '*'
watch_options:
  ignored: /node_modules/

I don't know if this information is helpful but the packs are rendered in the HTML, but something is preventing the code in them to execute. Again, if I add a new file with the exact same folder path pattern and no other appearant differences - this file gets executed perfectly.

[gauravtiwari]

@sara-dubois I see. Thanks for detailed information

I don't know if this information is helpful but the packs are rendered in the HTML, but something is preventing the code in them to execute

Are you using some gem for rendering react? or mounting manually?

[gauravtiwari]

Seems like if packs are rendering in HTML then it's missing some client side code to mount them on the DOM. It would be helpful if you could share some more information around that.

[sara-dubois]

Hm, no other gems have been used to render React besides Webpacker. To mount a pack we do this

document.addEventListener('DOMContentLoaded', () => {
  var root = document.getElementById('menu-links');
  ReactDOM.render(
    <App />,
    root,
  )
})

And just to recap, before upgrading Webpacker React rendered fine. I should mention though that we've upgraded a bunch of other gems as well but there are no appearent connection to this problem what I can see.

Another bit of information - in addition to not being mounted, the old files are as well not reacting to HMR. If I do some changes to a newly created file, the compilation is run and the page is refreshed. But nothing happens when updating an old file.

[gauravtiwari]

Thank you :)

It seems that old assets are not linked at all. Are you rendering several different packs or just one App pack?

Does your app/javascript folder looks like this?

[sara-dubois]

We're rendering many different packs, sometimes multiple on the same page. Each folder (see screenshot) contains an index.js and index.css that mounts React via an App component (that in turn imports the other components).

The application.js file is untouched (not including any code except for a console.log('Hello World from Webpacker')). And is not referenced by any <%= javascript_pack_tag 'application' %>.

The two files that are working is javascript/packs/hello_react.jsx and javascript/packs/test/index.js (that I created now after upgrade).

[gauravtiwari]

Thanks for sharing. And finally could you please post public/packs/manifest.json?

Also, in the view how are you referencing these packs?

<%= javascript_pack_tag 'booking-page' %>

like so?

---

I would move out everything outside of packs to app/javascript

app/javascript: 
  components: 
    - booking-page 
    - etc.
  packs:
    - booking-page.js # bootstrap booking-page component to dom
    - etc

Then reference in view like so:

<%= javascript_pack_tag 'booking-page' %>

[sara-dubois]

Thank you so much Gaurav for taking the time.

The packs are referenced like this: <%= javascript_pack_tag 'booking-page/index' %>

Thanks for the recommendation! OK so in the packs folder having files that bootstraps to dom and import the related files like this then import App from '../components/booking-page/App'.

Here goes the manifest.json. It's not a 100 % mapping to the folders/files in the screenshot above for the sake of brevity. ATM there's only the manifest.json file in the public/packs folder.

{
  "about-page/App.css": "/packs/about-page/App-75139298ba110372b06248c4f7ad80e8.css",
  "about-page/App.css.map": "/packs/about-page/App-75139298ba110372b06248c4f7ad80e8.css.map",
  "about-page/App.js": "/packs/about-page/App-182e21ded022d03ed2db.js",
  "about-page/App.js.map": "/packs/about-page/App-182e21ded022d03ed2db.js.map",
  "about-page/index.css": "/packs/about-page/index-d41d8cd98f00b204e9800998ecf8427e.css",
  "about-page/index.css.map": "/packs/about-page/index-d41d8cd98f00b204e9800998ecf8427e.css.map",
  "about-page/index.js": "/packs/about-page/index-35dc26c37ab55bf9454d.js",
  "about-page/index.js.map": "/packs/about-page/index-35dc26c37ab55bf9454d.js.map",
  "application.js": "/packs/application-8ee6fb9014351d412c08.js",
  "application.js.map": "/packs/application-8ee6fb9014351d412c08.js.map",
  "booking/App.css": "/packs/booking/App-d41d8cd98f00b204e9800998ecf8427e.css",
  "booking/App.css.map": "/packs/booking/App-d41d8cd98f00b204e9800998ecf8427e.css.map",
  "booking/App.js": "/packs/booking/App-4e752fe0eeb568366808.js",
  "booking/App.js.map": "/packs/booking/App-4e752fe0eeb568366808.js.map",
  "booking/CardSection.css": "/packs/booking/CardSection-6cb308c224f0b502156a358fb7010158.css",
  "booking/CardSection.css.map": "/packs/booking/CardSection-6cb308c224f0b502156a358fb7010158.css.map",
  "booking/CardSection.js": "/packs/booking/CardSection-7b52770b5ef961799079.js",
  "booking/CardSection.js.map": "/packs/booking/CardSection-7b52770b5ef961799079.js.map",
  "booking/CheckoutForm.css": "/packs/booking/CheckoutForm-ae189e50aaa2ddb9e028150468bd2f81.css",
  "booking/CheckoutForm.css.map": "/packs/booking/CheckoutForm-ae189e50aaa2ddb9e028150468bd2f81.css.map",
  "booking/CheckoutForm.js": "/packs/booking/CheckoutForm-4aa608e1c451cad8044d.js",
  "booking/CheckoutForm.js.map": "/packs/booking/CheckoutForm-4aa608e1c451cad8044d.js.map",
  "booking/CheckoutPage.css": "/packs/booking/CheckoutPage-364b9df5f77da500bb0b6c7c90cd0993.css",
  "booking/CheckoutPage.css.map": "/packs/booking/CheckoutPage-364b9df5f77da500bb0b6c7c90cd0993.css.map",
  "booking/CheckoutPage.js": "/packs/booking/CheckoutPage-a0546f7e039fa41bbbff.js",
  "booking/CheckoutPage.js.map": "/packs/booking/CheckoutPage-a0546f7e039fa41bbbff.js.map",
  "booking/FormFields.css": "/packs/booking/FormFields-bb3d2dc2f61b99f3df71da21a19ba325.css",
  "booking/FormFields.css.map": "/packs/booking/FormFields-bb3d2dc2f61b99f3df71da21a19ba325.css.map",
  "booking/FormFields.js": "/packs/booking/FormFields-5e96466f757172545f6e.js",
  "booking/FormFields.js.map": "/packs/booking/FormFields-5e96466f757172545f6e.js.map",
  "booking/index.css": "/packs/booking/index-b734007b52a4cc675c67d73595695b76.css",
  "booking/index.css.map": "/packs/booking/index-b734007b52a4cc675c67d73595695b76.css.map",
  "booking/index.js": "/packs/booking/index-5a68ddc4ebf7938b9b27.js",
  "booking/index.js.map": "/packs/booking/index-5a68ddc4ebf7938b9b27.js.map",
  "booking/SharedStyles.css": "/packs/booking/SharedStyles-1f48515d88b5b7b9d23b5c07351b0704.css",
  "booking/SharedStyles.css.map": "/packs/booking/SharedStyles-1f48515d88b5b7b9d23b5c07351b0704.css.map",
  "booking/SharedStyles.js": "/packs/booking/SharedStyles-099da5793adb0008178e.js",
  "booking/SharedStyles.js.map": "/packs/booking/SharedStyles-099da5793adb0008178e.js.map",
  "booking/SingleInput.css": "/packs/booking/SingleInput-bb3d2dc2f61b99f3df71da21a19ba325.css",
  "booking/SingleInput.css.map": "/packs/booking/SingleInput-bb3d2dc2f61b99f3df71da21a19ba325.css.map",
  "booking/SingleInput.js": "/packs/booking/SingleInput-a68ec9d71f6e1ec99201.js",
  "booking/SingleInput.js.map": "/packs/booking/SingleInput-a68ec9d71f6e1ec99201.js.map",
  "booking/Specification.css": "/packs/booking/Specification-2b5f74b97c6c4fdb98da41ca5966c95b.css",
  "booking/Specification.css.map": "/packs/booking/Specification-2b5f74b97c6c4fdb98da41ca5966c95b.css.map",
  "booking/Specification.js": "/packs/booking/Specification-2d1427d06f73172cdd80.js",
  "booking/Specification.js.map": "/packs/booking/Specification-2d1427d06f73172cdd80.js.map",
  "contact-page/App.css": "/packs/contact-page/App-2c34d2b2206e83179ffc9635da484b7b.css",
  "contact-page/App.css.map": "/packs/contact-page/App-2c34d2b2206e83179ffc9635da484b7b.css.map",
  "contact-page/App.js": "/packs/contact-page/App-fde3be6c94f812ca21b4.js",
  "contact-page/App.js.map": "/packs/contact-page/App-fde3be6c94f812ca21b4.js.map",
  "contact-page/index.css": "/packs/contact-page/index-d41d8cd98f00b204e9800998ecf8427e.css",
  "contact-page/index.css.map": "/packs/contact-page/index-d41d8cd98f00b204e9800998ecf8427e.css.map",
  "contact-page/index.js": "/packs/contact-page/index-d28c607eb352885721dd.js",
  "contact-page/index.js.map": "/packs/contact-page/index-d28c607eb352885721dd.js.map",
  "hello_react.js": "/packs/hello_react-9caa9d165514501371a2.js",
  "hello_react.js.map": "/packs/hello_react-9caa9d165514501371a2.js.map",
  "helper.js": "/packs/helper-841e675a205427a0c134.js",
  "helper.js.map": "/packs/helper-841e675a205427a0c134.js.map",
  "menu-links/App.css": "/packs/menu-links/App-75139298ba110372b06248c4f7ad80e8.css",
  "menu-links/App.css.map": "/packs/menu-links/App-75139298ba110372b06248c4f7ad80e8.css.map",
  "menu-links/App.js": "/packs/menu-links/App-fa56ea0c132c55ce2528.js",
  "menu-links/App.js.map": "/packs/menu-links/App-fa56ea0c132c55ce2528.js.map",
  "menu-links/index.css": "/packs/menu-links/index-d41d8cd98f00b204e9800998ecf8427e.css",
  "menu-links/index.css.map": "/packs/menu-links/index-d41d8cd98f00b204e9800998ecf8427e.css.map",
  "menu-links/index.js": "/packs/menu-links/index-8fb841e85f004fbc39c4.js",
  "menu-links/index.js.map": "/packs/menu-links/index-8fb841e85f004fbc39c4.js.map",
  "participant-list/App.js": "/packs/participant-list/App-32d590e954ee8356c968.js",
  "participant-list/App.js.map": "/packs/participant-list/App-32d590e954ee8356c968.js.map",
  "participant-list/index.css": "/packs/participant-list/index-d41d8cd98f00b204e9800998ecf8427e.css",
  "participant-list/index.css.map": "/packs/participant-list/index-d41d8cd98f00b204e9800998ecf8427e.css.map",
  "participant-list/index.js": "/packs/participant-list/index-7a7531cec347cf102be1.js",
  "participant-list/index.js.map": "/packs/participant-list/index-7a7531cec347cf102be1.js.map",
  "responsive-utilities/Breakpoint.js": "/packs/responsive-utilities/Breakpoint-ee4b243a569b22304b51.js",
  "responsive-utilities/Breakpoint.js.map": "/packs/responsive-utilities/Breakpoint-ee4b243a569b22304b51.js.map",
  "responsive-utilities/PhoneBreakpoint.js": "/packs/responsive-utilities/PhoneBreakpoint-31c32c92d546c4002b5f.js",
  "responsive-utilities/PhoneBreakpoint.js.map": "/packs/responsive-utilities/PhoneBreakpoint-31c32c92d546c4002b5f.js.map",
  "reusable-components/CheckboxOrRadioGroup.css": "/packs/reusable-components/CheckboxOrRadioGroup-633f6417d53d240151f1f156004d1a41.css",
  "reusable-components/CheckboxOrRadioGroup.css.map": "/packs/reusable-components/CheckboxOrRadioGroup-633f6417d53d240151f1f156004d1a41.css.map",
  "reusable-components/CheckboxOrRadioGroup.js": "/packs/reusable-components/CheckboxOrRadioGroup-0a79928936c8dfee3977.js",
  "reusable-components/CheckboxOrRadioGroup.js.map": "/packs/reusable-components/CheckboxOrRadioGroup-0a79928936c8dfee3977.js.map",
  "reusable-components/FormFields.css": "/packs/reusable-components/FormFields-bbefccf323d6c93ade951911443bf6bf.css",
  "reusable-components/FormFields.css.map": "/packs/reusable-components/FormFields-bbefccf323d6c93ade951911443bf6bf.css.map",
  "reusable-components/FormFields.js": "/packs/reusable-components/FormFields-f64097373a139a1c5a5d.js",
  "reusable-components/FormFields.js.map": "/packs/reusable-components/FormFields-f64097373a139a1c5a5d.js.map",
  "reusable-components/Select.css": "/packs/reusable-components/Select-bbefccf323d6c93ade951911443bf6bf.css",
  "reusable-components/Select.css.map": "/packs/reusable-components/Select-bbefccf323d6c93ade951911443bf6bf.css.map",
  "reusable-components/Select.js": "/packs/reusable-components/Select-07acf3b7f40cd0c44edc.js",
  "reusable-components/Select.js.map": "/packs/reusable-components/Select-07acf3b7f40cd0c44edc.js.map",
  "reusable-components/SelectOptGroup.css": "/packs/reusable-components/SelectOptGroup-bbefccf323d6c93ade951911443bf6bf.css",
  "reusable-components/SelectOptGroup.css.map": "/packs/reusable-components/SelectOptGroup-bbefccf323d6c93ade951911443bf6bf.css.map",
  "reusable-components/SelectOptGroup.js": "/packs/reusable-components/SelectOptGroup-299d3bbe8cfcc2b4bd8b.js",
  "reusable-components/SelectOptGroup.js.map": "/packs/reusable-components/SelectOptGroup-299d3bbe8cfcc2b4bd8b.js.map",
  "reusable-components/SingleInput.css": "/packs/reusable-components/SingleInput-bbefccf323d6c93ade951911443bf6bf.css",
  "reusable-components/SingleInput.css.map": "/packs/reusable-components/SingleInput-bbefccf323d6c93ade951911443bf6bf.css.map",
  "reusable-components/SingleInput.js": "/packs/reusable-components/SingleInput-f5bd35689b225402f900.js",
  "reusable-components/SingleInput.js.map": "/packs/reusable-components/SingleInput-f5bd35689b225402f900.js.map",
  "reusable-components/TextArea.css": "/packs/reusable-components/TextArea-bbefccf323d6c93ade951911443bf6bf.css",
  "reusable-components/TextArea.css.map": "/packs/reusable-components/TextArea-bbefccf323d6c93ade951911443bf6bf.css.map",
  "reusable-components/TextArea.js": "/packs/reusable-components/TextArea-be3e663de9e084ba1641.js",
  "reusable-components/TextArea.js.map": "/packs/reusable-components/TextArea-be3e663de9e084ba1641.js.map",
  "start-page/App.css": "/packs/start-page/App-75139298ba110372b06248c4f7ad80e8.css",
  "start-page/App.css.map": "/packs/start-page/App-75139298ba110372b06248c4f7ad80e8.css.map",
  "start-page/App.js": "/packs/start-page/App-6a6fa8f144a07b347d02.js",
  "start-page/App.js.map": "/packs/start-page/App-6a6fa8f144a07b347d02.js.map",
  "start-page/index.css": "/packs/start-page/index-d41d8cd98f00b204e9800998ecf8427e.css",
  "start-page/index.css.map": "/packs/start-page/index-d41d8cd98f00b204e9800998ecf8427e.css.map",
  "start-page/index.js": "/packs/start-page/index-b1822977303ca1be7159.js",
  "start-page/index.js.map": "/packs/start-page/index-b1822977303ca1be7159.js.map",
  "variables.css": "/packs/variables-d41d8cd98f00b204e9800998ecf8427e.css",
  "variables.css.map": "/packs/variables-d41d8cd98f00b204e9800998ecf8427e.css.map",
  "variables.js": "/packs/variables-51f1860e81b894f68bc6.js",
  "variables.js.map": "/packs/variables-51f1860e81b894f68bc6.js.map"
}

[gauravtiwari]

No problem.

OK so in the packs folder having files that bootstraps to dom and import the related files like this then import App from '../components/booking-page/App'.

That's correct 👍 The idea is to keep only entry files here i.e. main module file that's responsible for bootstrapping component either to DOM or perform some function. It's a special folder in that sense

Is it rendering now? Do you see any errors in browser console?

[gauravtiwari]

Everything looks good to me so I am suspecting that some client code isn't doing the job of mounting component to DOM.

[gauravtiwari]

BTW, you said you are referencing booking-page/index in view but it's actually booking-page/App.js right?

Just quoting what you wrote:

The packs are referenced like this: <%= javascript_pack_tag 'booking-page/index' %>

This bit:

OK so in the packs folder having files that bootstraps to dom and import the related files like this then import App from '../components/booking-page/App'.

[sara-dubois]

I haven't changed anything in my code since starting the thread so it's the same issue as before - i.e. newly created files render fine but old files are "dead" (rendered in HTML but don't get executed).

Sorry if I was unclear regarding your last question. At the moment this code <%= javascript_pack_tag 'booking-page/index' %> is referencing javascript/packs/booking-page/index.js that in turn mounts javascript/packs/booking-page/App.jsx.

And following your earlier suggestion I would instead:

1. rename the index.js (that mounts App) to booking-page.js and put it in the root of packs
2. and the rest of the code belonging to booking-page (including the aforementioned App.jsx) would go in the folder javascript/components/booking-page

If there is no apparent reason why the old files aren't working, I guess I'll have to investigare the code more holistically. I haven't done the restructuring of folders/files yet as it's propably not the root of the problem (as new files work fine).

Thank's again for the incredible patience. At least now I know it's probably an issue "on my side".

[jpickwell]

If you have non-entry files in the app/javascript/packs directory, webpack will pick those up and try to pack them as individual units. Only entry point scripts (the ones referenced in views) should exist in the packs directory. Move everything else out. I suspect this is causing your issue.

I personally have a src directory at the same level as packs; i.e., app/javascript/src. I have a packs/main.js that imports from the src directory. Of course, I only have one entry point because my app is a SPA.

If I had multiple views, then I'd have a corresponding .js file in the packs directory.

views: about-page (<%= javascript_pack_tag 'about-page' %>), booking-page (<%= javascript_pack_tag 'booking-page' %>)
packs: about-page.js (import Component from '../components/about-page'), booking-page.js (import Component from '../components/booking-page')
src: components/about-page/index.js, components/booking-page/index.js
public/packs: manifest.json, about-page-hash.js, booking-page-hash.js

Your manifest.json should have a lot less entries in it. You should not have entries for things like reusable components, unless you're including them explicitly from a view (the javascript_pack_tag helper function).

[sara-dubois]

@jpickwell Thanks a lot, this solved it. And now as I've moved all components out of /packs - everything makes so much sense. My issue was probably some naming conflict in any of the hundreds of files in manifest.json. And as a bonus, the compiling time seems to have been radically reduced as well 😀