Assignment to imported bindings JS-0035
Bug risk
Major
12 days ago
—
2 years old
'darkMode' is read-only
4export default function ThemeToggle(props) {
5 const [dark, setDark] = useState(false);
6 const toggle = () => {
7 darkMode = !dark; 8 if (typeof window != "undefined") {
9 localStorage.setItem("darkMode", darkMode);
10 }
Description
The updates (assignments, increments and decrements) of imported bindings by ES Modules cause runtime errors.
The standard import looks something like import something from 'somewhere/else';.
But what if the module you are importing isn’t actually exporting anything and only used to run code?
As you move into modules, you will find at first side-effects are going to happen.
The import statement isn't a pass-by-value situation.
You will get a binding to the original source.
Bad Practice
import mod, { named } from "./mod.mjs"
import * as mod_ns from "./mod.mjs"
mod++ // ERROR: 'mod' is readonly.
named++ // ERROR: 'named' is readonly.
mod_ns.named = 3 // ERROR: the members of 'mod_ns' is readonly.
mod_ns = {} // ERROR: 'mod_ns' is readonly.
Recommended
import mod, { named } from "./mod.mjs"
import * as mod_ns from "./mod.mjs"
mod.prop = 1
named.prop = 2
mod_ns.named.prop = 3
// Known Limitation
function test(obj) {
obj.named = 4 // Not errored because 'obj' is not namespace objects.
}
test(mod_ns) // Not errored because it doesn't know that 'test' updates the member of the argument.