Recoil: Error: "s" is read-only when using on hosting service

[aromanarguello]

Hi! I started playing around with recoil and I love it so far! It's pretty much the state library I didn't know I needed 😄 I understand it is still experimental and I am not using in a production-level app but did use it a fairly complex mock side project I have to test new things. Everything is working fine locally but when I deploy it to netlify there seems to be an error in the build.

I currently have an event listener on button click which would trigger a modal, this modal includes a form that contains a piece of recoil state. Locally it works fine (in development mode), but when I try to trigger the modal in a pseudo app on netlify it gives me the following error. I am using create-react-app, I noticed that if I set the build mode to production it also fails locally. Is this a production mode issue, or is it just no ready to run in production mode?

readOnlyError.js:2 Uncaught Error: "s" is read-only
    at e.exports (readOnlyError.js:2)
    at s (recoil.js:1)
    at get (atom.js:24)
    at recoil.js:1
    at recoil.js:1
    at l (recoil.js:1)
    at Object.s [as get] (recoil.js:1)
    at ee (recoil.js:1)
    at recoil.js:1
    at Object.replaceState (recoil.js:1)

I'm trying to understand the error and it seems that it comes from the getter for jobId

export const jobIdState = atom({
  key: 'jobIdState',
  default: null,
});

export const jobSelector = selector({
  key: 'jobSelector',
  get: ({ get }) => {
    const jobId = get(jobIdState);    // 👈   at get (atom.js:24)
    return get(jobState).filter(({ id }) => id === jobId);
  },
});

This is what my react dependencies package.json file looks like:

    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1",
    "recoil": "0.0.7",

The only place where I am mutating jobIdState would be in this component:

      const setJobId = useSetRecoilState(jobIdState);
      <EditTwoTone
        onClick={() => {
          setJobId(jobId);
          setModalVisible(true);
        }}
      />

and I this is how I am consuming the selector in another component:

const jobData = useRecoilValue(jobSelector);

If this is plainly developer error please let me know 😬 Thanks in advance and thanks for putting together such an amazing library! Eager to see it grow.

[jonniebigodes]

@aromanarguello i was about to create the issue, but glad you took the time to create it. I'm also experiencing the same issue. My code is somewhat similar to the one in the description. In my case i'm using ssr with Gatsby and i was able to bypass a the window is not defined with the usage of @loadable-components. Also the only difference is that i'm able to create a production build, But once i open a browser window to the page it will display the same error in the development console.

If need be i can hoist it to a repo.

[Rafal-Jenczelewski]

From what I understand this was fixed in #69. The error was reported in many different issues and was caused by terser and CRA minifications not working together.

The PR was already merged, but there is no release with the fix.

[jonniebigodes]

@Rafal-Jenczelewski thanks for the update. And from that it seems that also the ssr fix was merged but also not released.

[aromanarguello]

@Rafal-Jenczelewski Thanks for sharing this! Hope that the fix gets released soon 😄

@jonniebigodes I've never used @loadable/components do you think it could help (or be a quick workaround while the fix is released) for a client side rendered app?

[jonniebigodes]

@aromanarguello i don't think so, techically the @lodable/components works as a "escape hatch" (pardon the bad pun) to split the code to make it only run when it's loaded in the browser. This escape hatch works with a vast majority of packages that not "ssr friendly" (once again pardon the bad pun), but i'm going to take it out for a spin and see if it would possibly be used as a workaround. I'll report back shortly.

[aromanarguello]

Thanks! @jonniebigodes

[jonniebigodes]

@aromanarguello sorry for the delay in response, but last week was chaotic to say the least. I had some time today to test out what i mentioned and it seems that the problem still persists even with the usage of @lodable/components . It seems that until the release is published this and the mentioned issue that was now created will still persist.

Stay safe.

[mixdev]

I had the same issue. Looks like it is fixed in 0.0.8. Please do an update.
npm install [email protected]
and redeploy.