Weird behavior with react-compiler eslint

[yjb94]

Bug Description

// this is my simplified version of my code

export const audioPlayerState = proxy({
audioId: undefined,
});

const play = () => {
audioPlayerState.audioId = audio.id;
};

const stop = () => {
audioPlayerState.audioId = undefined; // error occurs only here
};

the lint error says
Writing to a variable defined outside a component or hook is not allowed. Consider using an effect react-compiler/react-compiler

this is weird becuz if this error is right, the error should also occur on play function and it doesn't. have you got any clues for it? the only solution i've got was to eslint ignore

Reproduction Link

sorry for reporduction linkt

[overthemike]

I'm not sure this is a valtio bug...Just a guess here, but are you defining the proxy state inside of a component?

I'm not sure if you're using typescript or not...and this might not solve your issue...but when i have state that can be undefined at different times, I like to keep track of that kind of thing as well...including stuff like loading state...kinda like this:

import { proxy } from 'valtio'

type DataState<T> = 
  | { status: 'loading' }
  | { status: 'error', error: Error }
  | { status: 'success', data: T }

interface AudioPlayer {
  audioId: number
}

const initialState: DataState<AudioPlayer> = { 
  status: 'loading',
};

const audioPlayerState = proxy<DataState<AudioPlayer>>(initialState)

//...

audioPlayerState.status = 'success'
audioPlayerState.data = {
  audioId: 1
}

[yjb94]

are you defining the proxy state inside of a component?

no i am not defining proxy state inside a component.
I am using TypeScript :)

[overthemike]

This is most likely a react-compiler bug. React Compiler still has a few weird quirks. It's going to rewrite whatever code you write so it's bound to run into issues like this sometimes. For example:

import { useEffect } from "react";
const C = () => {
  useEffect(() => { a(); }, []);
  function a () { window.x = "" }
  return <div></div>;
}
export default C
// throws the same error
// InvalidReact: Writing to a variable defined outside a component or hook is not allowed. Consider using an effect (4:4)

but if you just move the function declaration above the useEffect call, all is fine...

import { useEffect } from "react";
const C = () => {
  function a () { window.x = "" }
  useEffect(() => { a(); }, []);
  return <div></div>;
}
export default C
// no error!

functoins in js are hoisted, however, you're not actually writing your own code. Your code is compiled into something thaqt bareely ever recognizedn you're so this just an issue with react-compiler. I imagine something similar is happening with you. Unfortunatly, you're at its whim if you want to use it. Here's an example of what I'm talking about: https://playground.react.dev/#N4Igzg9grgTgxgUxALhASwLYAcIwC4AEwBUYCAogGaUJyEC+BlMEGBAOiDAgIZ2cBudgDs4EYWEIBhAgF4CACgCUcgHxERBEmSo06C5WqIEeygQXoAaAgG0AukqHCtlKKLxpxJxSuIB3NGEAEwg-ADoADzkOEE4LTQJuPFhnAB4gtAA3VVSAegzsp3oRBAicfAIghEoeKAAbaRB6IA

You might just need to rearrange your code a bit until the compiler is happy.

[yjb94]

// this is defined somewhere else (model.ts)
export const audioPlayerState = proxy({
  audioId: undefined,
});

// this is custom hook file
import { audioPlayerState } from '../model';

const useAudioPlayer = () => {
  const play = () => {
    audioPlayerState.audioId = audio.id;
  };

  const stop = () => {
    audioPlayerState.audioId = undefined; // Writing to a variable defined outside a component or hook is not allowed. Consider using an effect
  };

  return { play, stop };
}

is this case, is it still related to some hoisting related problem?

[overthemike]

I wouldn't think so no. But keep in mind, that was really only a guess. I don't know the actual bug in react compiler that causes this. Did it solve your issue?