Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

React Native, Expo support? Throw Error: "s" is read-only

See original GitHub issue

Nice library! I am using this in an Expo project (SDK37), it gives me _readOnlyError. I thought I did something wrong with my code, and used the example from document, and output the same errors when I use ‘selector’ as an argument in useRecoilState. Notice, ‘atom’ does not throw errors, working fine.

Any solution to this?

import {
  Text,
  Button,
  View,
} from 'react-native'
import { atom, selector, useRecoilState } from 'recoil'

const tempFahrenheit = atom({
  key: 'tempFahrenheit',
  default: 32,
})

const tempCelcius = selector({
  key: 'tempCelcius',
  get: ({ get }) => ((get(tempFahrenheit) - 32) * 5) / 9,
  set: ({ set }, newValue) => set(tempFahrenheit, (newValue * 9) / 5 + 32),
})

const TempCelcius = () => {
  const [tempF, setTempF] = useRecoilState(tempFahrenheit)
  const [tempC, setTempC] = useRecoilState(tempCelcius)

  const addTenCelcius = () => setTempC(tempC + 10)
  const addTenFahrenheit = () => setTempF(tempF + 10)

  return (
    <View>
      <Text>Temp (Celcius): {tempC}</Text>
      <Text>Text>Temp (Fahrenheit): {tempF}</Text>
      <Button
        title='Add 10 Celcius'
        onPress={addTenCelcius} />
      <Button
        title='Add 10 Fahrenheit'
        onPress={addTenFahrenheit}
      />
    </View>
  )
}

export {
  TempCelcius,
}
export default TempCelcius

Error

Error: "s" is read-only

_readOnlyError
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:147369:20
c
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:147190:42
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:147195:24
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:147216:10
i
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:147250:8
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:146334:21
replaceState
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:146567:20
getRecoilValueAsLoadable
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:146332:21
r
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:146808:12
getRecoilState
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:146815:20
useRecoilState
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:146905:47
renderWithHooks
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:20048:33
mountIndeterminateComponent
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:22097:34
beginWork$$1
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:27288:31
performUnitOfWork
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:26441:30
workLoopSync
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:26423:45
renderRoot
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:26187:29
renderRoot
    [native code]:0
runRootCallback
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:25948:34
runRootCallback
    [native code]:0
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:16678:38
unstable_runWithPriority
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:43144:30
flushSyncCallbackQueueImpl
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:16673:28
flushSyncCallbackQueue
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:16662:35
scheduleUpdateOnFiber
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:25830:37
scheduleRootUpdate
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:28255:21
scheduleRoot
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:17226:42
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:41547:35
forEach
    [native code]:0
performReactRefresh
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:41539:30
performReactRefresh
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:41345:48
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:480:40
_callTimer
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:31051:17
callTimers
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:31258:19
__callFunction
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:3225:49
<unknown>
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:2938:31
__guard
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:3179:15
callFunctionReturnFlushedQueue
    AppEntry.bundle?platform=ios&dev=true&minify=false&hot=false:2937:21
callFunctionReturnFlushedQueue
    [native code]:0

Issue Analytics

State:
Created 3 years ago
Reactions:6
Comments:11 (5 by maintainers)

Top GitHub Comments

3reactions

jacques-blomcommented, May 17, 2020

Here’s a PR that aims to fix this: https://github.com/facebookexperimental/Recoil/pull/69

1reaction

jacques-blomcommented, May 17, 2020

It’s working for me when I link it locally and build it without terser (minification). Here’s my Expo project if anyone wants to see how to get linking working: https://github.com/jacques-blom/recoil-test-expo

Check out the Readme for setup instructions.

Looking into why terser is causing this.

Top Results From Across the Web

ReactNative & Expo - Error: "value" is read-only - Stack Overflow

In MusicContext.js, the context file that handles the logic for the music player, I have a few State objects for determining which song...

Notifications - Expo Documentation

Schedule a notification repeating in some time interval (or a calendar date match on iOS),; Get and set application badge icon number,; Fetch...

VirtualizedList - React Native

Virtualization massively improves memory consumption and performance of large lists by maintaining a finite render window of active items and ...

Expo integration guide - React Native - Bugsnag docs

Add Bugsnag to your Expo apps to report JavaScript errors. ... This guide is for apps using Expo's managed workflow on supported platforms....

Error Boundaries - React

Event handlers (learn more) · Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks) · Server side rendering · Errors thrown in the error boundary ......