Stuk/Clock.tsx

## README.md

      
    Raw
  

              README.md
            
          
    Repro for swc-project/swc#3628
Run

npm install
npx spack and then
npx serve

The output contains
function Clock(param) {
    var hour = param.hour, minute = param.minute, second = param.second;
    return __default.createElement("div", null, hour, ":", minute, ":", second); // <-- this is wrong
}
var { default: React  } = load1();
var { createRoot: createRoot  } = load6();
function App() {
    return React.createElement(React.Fragment, null, React.createElement(Clock, {
        hour: 9,
        minute: 30,
        second: 45
    }));
}
var container = document.getElementById("container");
if (!container) throw new Error("No React container found.");
var root = createRoot(container);
root.render(React.createElement(App, null));

  
## Clock.tsx
import React from "react";

export function Clock({
  hour,
  minute,
  second,
}: {
  hour: number;
  minute: number;
  second: number;
}) {
  return (
    <div>
      {hour}:{minute}:{second}
    </div>
  );
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clock</title>
</head>
<body>
    <div id="container"></div>
    <script type="module" src="index.js"></script>
</body>
</html>

## index.tsx
import React from "react";
import { createRoot } from "react-dom/client";
import { Clock } from "./Clock";

function App() {
  return <>
    <Clock hour={9} minute={30} second={45} />
  </>;
}

const container = document.getElementById("container");
if (!container) {
  throw new Error("No React container found.")
}
const root = createRoot(container);
root.render(<App />);

## package.json
{
  "name": "4e1c11e867c720608a1c7bee129654ca",
  "version": "1.0.0",
  "description": "Repro for https://github.com/swc-project/swc/issues/3628",
  "main": "spack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@gist.github.com/4e1c11e867c720608a1c7bee129654ca.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://gist.github.com/4e1c11e867c720608a1c7bee129654ca"
  },
  "homepage": "https://gist.github.com/4e1c11e867c720608a1c7bee129654ca",
  "dependencies": {
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  },
  "devDependencies": {
    "@swc/cli": "^0.1.57",
    "@swc/core": "^1.2.181"
  }
}

## spack.config.js
const { config } = require('@swc/core/spack')

module.exports = config({
    entry: {
        'index': __dirname + '/index.tsx',
    },
    output: {
        path: __dirname
    },
});
	import React from "react";

	export function Clock({
	hour,
	minute,
	second,
	}: {
	hour: number;
	minute: number;
	second: number;
	}) {
	return (
	<div>
	{hour}:{minute}:{second}
	</div>
	);
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Clock</title>
	</head>
	<body>
	<div id="container"></div>
	<script type="module" src="index.js"></script>
	</body>
	</html>
	import React from "react";
	import { createRoot } from "react-dom/client";
	import { Clock } from "./Clock";

	function App() {
	return <>
	<Clock hour={9} minute={30} second={45} />
	</>;
	}

	const container = document.getElementById("container");
	if (!container) {
	throw new Error("No React container found.")
	}
	const root = createRoot(container);
	root.render(<App />);
	{
	"name": "4e1c11e867c720608a1c7bee129654ca",
	"version": "1.0.0",
	"description": "Repro for https://github.com/swc-project/swc/issues/3628",
	"main": "spack.config.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"repository": {
	"type": "git",
	"url": "git+ssh://git@gist.github.com/4e1c11e867c720608a1c7bee129654ca.git"
	},
	"author": "",
	"license": "ISC",
	"bugs": {
	"url": "https://gist.github.com/4e1c11e867c720608a1c7bee129654ca"
	},
	"homepage": "https://gist.github.com/4e1c11e867c720608a1c7bee129654ca",
	"dependencies": {
	"react": "^18.1.0",
	"react-dom": "^18.1.0"
	},
	"devDependencies": {
	"@swc/cli": "^0.1.57",
	"@swc/core": "^1.2.181"
	}
	}
	const { config } = require('@swc/core/spack')

	module.exports = config({
	entry: {
	'index': __dirname + '/index.tsx',
	},
	output: {
	path: __dirname
	},
	});