JSX unnamed `export default` is subtly broken #10077

Bludator · 2025-01-24T02:35:08Z

🐛 bug report

If I write component with default export and without name like: export default function(){...} the component is getting unmounted/mounted instead of just rerendered. It is different to the default export with a name like export default function Foo(){...}. The name is not important. It happens only in watch and serve mode.

🎛 Configuration (.babelrc, package.json, cli command)

{
    "parcel": "^2.13.3",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
}

🤔 Expected Behavior

It should be the same like with name.

In the following code sample I expect to see only Test mounting once and then repeating of Rendering...

😯 Current Behavior

In watch and serve it differs from the named function.

In the sample code I am getting repeatedly:
Rendering...
Test unmounting
Test mounting

💁 Possible Solution

🔦 Context

💻 Code Sample

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <div id="root"></div>

    <script type="module" src="index.jsx"></script>
  </body>
</html>

index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';

import { App } from './app.jsx'

ReactDOM.createRoot( 
  document.querySelector('#root')
).render(<App />)

app.jsx

import { useState, useEffect } from 'react';
import Test from "./test.jsx"

export function App() {
	const [foo, setFoo] = useState();

	console.debug("Rendering...")

	// every second change state randomly
	useEffect(function () {
		const interval = setInterval(() => Promise.resolve().then(_=>setFoo(Math.random())), 1000)
		return () => clearInterval(interval)
	}, [])
	return (<Test />)
}

test.jsx

import { useEffect } from 'react';

export default function () {
	// This just prints when it is mounting/unmounting
	useEffect(() => {
		console.log("Test mounting");
		return () => console.log("Test unmounting")
	}, []);
	return <span style={{ color: "red" }}>Lorem ipsum</span>
}

🌍 Your Environment

Software	Version(s)
Node	v23.6.0
npm/Yarn	npm - 11.0.0
Operating System	win11

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

JSX unnamed `export default` is subtly broken #10077

JSX unnamed `export default` is subtly broken #10077

Bludator commented Jan 24, 2025

JSX unnamed export default is subtly broken #10077

JSX unnamed export default is subtly broken #10077

Comments

Bludator commented Jan 24, 2025

🐛 bug report

🎛 Configuration (.babelrc, package.json, cli command)

🤔 Expected Behavior

😯 Current Behavior

💁 Possible Solution

🔦 Context

💻 Code Sample

🌍 Your Environment

JSX unnamed `export default` is subtly broken #10077

JSX unnamed `export default` is subtly broken #10077