[Compiler Bug]: npm run dev and npm run build produce different results

[hnamekawa]

What kind of issue is this?

• React Compiler core (the JS output is incorrect, or your app works incorrectly after optimization)
• babel-plugin-react-compiler (build issue installing or using the Babel plugin)
• eslint-plugin-react-hooks (build issue installing or using the eslint plugin)
• react-compiler-healthcheck (build issue installing or using the healthcheck script)

Link to repro

https://github.com/hnamekawa/movie-app

Repro steps

1. Clone the repo

2. Run npm run dev

The app works fine without any errors

3. Run npm run build

The React compiler reports the errors shown below, and the app fails to load

Description
src/types/Todo.ts defines a Todo interface, and src/App.tsx imports and uses that interface.
It seems that TypeScript interfaces are not being handled correctly during the build process.

When src/App.tsx is transpiled, it makes sense that an error occurs because the Todo interface does not exist at runtime.
However, npm run dev does not show any error, while npm run build does.

This inconsistency between dev and build is the issue I want to report.

npm run build error log detail

src/App.tsx:2:1 - error TS6133: 'TodoItem' is declared but its value is never read.

2 import { TodoItem }  from "./types/Todo";
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/App.tsx:9:38 - error TS2304: Cannot find name 'Todo'.

9   const [todos, setTodos] = useState<Todo[]>([]);
                                       ~~~~

src/App.tsx:12:50 - error TS2304: Cannot find name 'Todo'.

12   const [editingTodo, setEditingTodo] = useState<Todo | null>(null);
                                                    ~~~~

src/App.tsx:40:44 - error TS2304: Cannot find name 'Todo'.

40   const handleCreateOrUpdate = (data: Omit<Todo, "id">) => {
                                              ~~~~

src/App.tsx:52:22 - error TS2304: Cannot find name 'Todo'.

52       const newTodo: Todo = {
                        ~~~~

src/components/TodoForm.tsx:2:1 - error TS6133: 'TodoItem' is declared but its value is never read.

2 import { TodoItem }  from "../types/Todo";
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/TodoForm.tsx:5:25 - error TS2304: Cannot find name 'Todo'.

5   onSubmit: (todo: Omit<Todo, "id">) => void; // pass data to parent
                          ~~~~

src/components/TodoForm.tsx:6:17 - error TS2304: Cannot find name 'Todo'.

6   editingTodo?: Todo | null;                  // editing ToDo
                  ~~~~

src/components/TodoForm.tsx:12:40 - error TS2304: Cannot find name 'Todo'.

12   const [status, setStatus] = useState<Todo["status"]>("Open");
                                          ~~~~

src/components/TodoList.tsx:2:1 - error TS6133: 'TodoItem' is declared but its value is never read.

2 import { TodoItem }  from "../types/Todo";
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

src/components/TodoList.tsx:5:10 - error TS2304: Cannot find name 'Todo'.

5   todos: Todo[];               // ToDo list to display
           ~~~~

src/components/TodoList.tsx:6:18 - error TS2304: Cannot find name 'Todo'.

6   onEdit: (todo: Todo) => void;// edit button clicked
                   ~~~~


Found 12 errors.

How often does this bug happen?

Every time

What version of React are you using?

19.2.0

What version of React Compiler are you using?

1.0

[MahadIrfan01]

I think the build errors happen because TypeScript interfaces like Todo don’t exist at runtime. During development, the dev server ignores this, but the production build treats type imports as actual values, causing errors. try to import interfaces using import type { Todo } from "./types/Todo" so they are only used for type checking and not included in the compiled JavaScript.

[hnamekawa]

I believe that even on a dev server, errors indicating that a TypeScript interface does not exist in JavaScript should not be ignored.
However, if ignoring this error is an intentional design choice of the dev server, then this issue would be considered a specification rather than a bug, and it would be acceptable to close it without any fixes.

[josephsavona]

This doesn’t appear to have anything to do with React or the compiler. Please feel free to reopen if you can clearly articulate how this actually relates to React.