diff --git a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts index ea5c30d5b2..8f1612f20e 100644 --- a/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts +++ b/compiler/packages/eslint-plugin-react-compiler/__tests__/ReactCompilerRule-test.ts @@ -92,36 +92,8 @@ const tests: CompilerTestCases = { } `, }, - { - // Don't report the issue if Flow already has - name: '[InvalidInput] Ref access during render', - code: normalizeIndent` - function Component(props) { - const ref = useRef(null); - // $FlowFixMe[react-rule-unsafe-ref] - const value = ref.current; - return value; - } - `, - }, ], invalid: [ - { - name: '[InvalidInput] Ref access during render', - code: normalizeIndent` - function Component(props) { - const ref = useRef(null); - const value = ref.current; - return value; - } - `, - errors: [ - { - message: - 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)', - }, - ], - }, { name: 'Reportable levels can be configured', options: [{reportableLevels: new Set([ErrorSeverity.Todo])}], diff --git a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts index 3f778deee4..e9eee26bda 100644 --- a/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts +++ b/compiler/packages/eslint-plugin-react-compiler/src/rules/ReactCompilerRule.ts @@ -105,6 +105,9 @@ const COMPILER_OPTIONS: Partial = { panicThreshold: 'none', // Don't emit errors on Flow suppressions--Flow already gave a signal flowSuppressions: false, + environment: validateEnvironmentConfig({ + validateRefAccessDuringRender: false, + }), }; const rule: Rule.RuleModule = { @@ -149,10 +152,14 @@ const rule: Rule.RuleModule = { } let shouldReportUnusedOptOutDirective = true; - const options: PluginOptions = { - ...parsePluginOptions(userOpts), + const options: PluginOptions = parsePluginOptions({ ...COMPILER_OPTIONS, - }; + ...userOpts, + environment: { + ...COMPILER_OPTIONS.environment, + ...userOpts.environment, + }, + }); const userLogger: Logger | null = options.logger; options.logger = { logEvent: (filename, event): void => { diff --git a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts index f0d14494b9..30762e5819 100644 --- a/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts +++ b/packages/eslint-plugin-react-hooks/__tests__/ReactCompilerRule-test.ts @@ -94,36 +94,8 @@ const tests: CompilerTestCases = { } `, }, - { - // Don't report the issue if Flow already has - name: '[InvalidInput] Ref access during render', - code: normalizeIndent` - function Component(props) { - const ref = useRef(null); - // $FlowFixMe[react-rule-unsafe-ref] - const value = ref.current; - return value; - } - `, - }, ], invalid: [ - { - name: '[InvalidInput] Ref access during render', - code: normalizeIndent` - function Component(props) { - const ref = useRef(null); - const value = ref.current; - return value; - } - `, - errors: [ - { - message: - 'Ref values (the `current` property) may not be accessed during render. (https://react.dev/reference/react/useRef)', - }, - ], - }, { name: 'Reportable levels can be configured', options: [{reportableLevels: new Set([ErrorSeverity.Todo])}], diff --git a/packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts b/packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts index c2f9d3a103..67d5745a1c 100644 --- a/packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts +++ b/packages/eslint-plugin-react-hooks/src/rules/ReactCompiler.ts @@ -107,6 +107,9 @@ const COMPILER_OPTIONS: Partial = { panicThreshold: 'none', // Don't emit errors on Flow suppressions--Flow already gave a signal flowSuppressions: false, + environment: validateEnvironmentConfig({ + validateRefAccessDuringRender: false, + }), }; const rule: Rule.RuleModule = { @@ -151,10 +154,14 @@ const rule: Rule.RuleModule = { } let shouldReportUnusedOptOutDirective = true; - const options: PluginOptions = { - ...parsePluginOptions(userOpts), + const options: PluginOptions = parsePluginOptions({ ...COMPILER_OPTIONS, - }; + ...userOpts, + environment: { + ...COMPILER_OPTIONS.environment, + ...userOpts.environment, + }, + }); const userLogger: Logger | null = options.logger; options.logger = { logEvent: (eventFilename, event): void => {