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

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 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.

[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.