Crosstalk between different unstated state containers for production builds

🐛 bug report

Imagine I’m making a questionnaire app. I’m using unstated (the non-next version) to, well, maintain state. One of the things I’m using it for is for paging, of which I have a few different nested routes. There’s the main router, then one for questions, and then another pageable component elsewhere. Hopefully I can show via this mildly baffling line:

[MainRouteContainer:1,2,3,4,5:[QuestionsRouteContainer:1,2,...13],6,7,8,...]

Initially I had a general route container that the others extended. It looks a bit like this:

import { Container } from 'unstated';

class RouteContainer extends Container {
  state = { current: 0, direction: null };
  increment = () => {
    this.setState(({ current }) => ({ current: current + 1, direction: 'increment' }));
  }
  decrement = () => {
    this.setState(({ current }) => ({ current: current - 1, direction: 'decrement' }));
  }
  setPage = (page) => {
    this.setState({ current: page });
  }
}

export default RouteContainer;

Then I had MainRouteContainer and QuestionsRouteContainer which extended the above component. This worked fine when running from parcel index.html but doing parcel build index.html would make it so you would route normally in the MainRouteContainer, then you’d get to the questions page with the subrouting, and the questions would start at index 5, basically sharing the same index as the main route, even though they are different classes technically.

This was fixed by making the QuestionsRouteContainer no longer extend the RouteContainer and I just copied the contents of the RouteContainer into it, and it was fine. However I later added a third router which also had duplicated rather than extended content, but this weird bug came back again on production builds, where the third router would start at a non-0 index, taking its value from MainRouteContainer.

At this point I just scrapped RouteContainer and made all three containers use their entire own state and functions, but now the initial bug with the questions came back, even with no class extension!

The only way I managed to fix this is to make the three containers all use entirely different variable names for current. So there’s currentM, currentQ, currentP. Then the bugs are squashed.

So I’m thinking, is ParcelJS thinking that this current variable is the same and shared between the three containers? And has this been experienced before or is it specific to my combination of unstated and parcel?

I will hopefully fill out this issue a bit more when I’m less busy, but if anyone knows what’s going on I’d be really grateful.

Thanks!

🌍 Your Environment

Software	Version(s)
Parcel	1.12.3
Node	v10.15.3 but also experienced on v12
npm/Yarn	npm 6.9.0
Operating System	MacOS but also Ubuntu

[mischnic]

What counts as “identical”?

In this case: the JS code after processing (e.g. babel/terser) is the same string. This is because the asset has is computed based solely on this string. So your identical JS modules all have the same hash and then overwrite themselves.

I’m closing this as a duplicate, feel free to ask any further questions though.

[mischnic]

The only way I managed to fix this is to make the three containers all use entirely different variable names for current. So there’s currentM, currentQ, currentP. Then the bugs are squashed.

I didn’t completely understand your description of your project and the issue, bug one known bug is that, in production builds, having multiple files with the same contents actually “merged” them so that in the places where one of these modules was imported, the same exact value was returned (#3523). So: if you the JS files for your different paging state containers all have the exact same content, then this is a duplicate of #3523 (and you already found a workaround I would have suggested).