diff --git a/playground/react/App.jsx b/playground/react/App.jsx
index 95097029..c7ffb805 100644
--- a/playground/react/App.jsx
+++ b/playground/react/App.jsx
@@ -5,6 +5,7 @@ import Parent from './hmr/parent'
 import { JsxImportRuntime } from './hmr/jsx-import-runtime'
 import { CountProvider } from './context/CountProvider'
 import { ContextButton } from './context/ContextButton'
+import { TestImportAttributes } from './import-attributes/test'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -40,6 +41,7 @@ function App() {
       <Parent />
       <JsxImportRuntime />
       <Button>button</Button>
+      <TestImportAttributes />
     </div>
   )
 }
diff --git a/playground/react/__tests__/react.spec.ts b/playground/react/__tests__/react.spec.ts
index 7b60914f..bec1b007 100644
--- a/playground/react/__tests__/react.spec.ts
+++ b/playground/react/__tests__/react.spec.ts
@@ -69,6 +69,10 @@ test.runIf(isServe)(
   },
 )
 
+test('import attributes', async () => {
+  expect(await page.textContent('.import-attributes')).toBe('ok')
+})
+
 if (!isBuild) {
   // #9869
   test('should only hmr files with exported react components', async () => {
diff --git a/playground/react/import-attributes/data.json b/playground/react/import-attributes/data.json
new file mode 100644
index 00000000..5e7d6191
--- /dev/null
+++ b/playground/react/import-attributes/data.json
@@ -0,0 +1,3 @@
+{
+  "message": "ok"
+}
diff --git a/playground/react/import-attributes/test.jsx b/playground/react/import-attributes/test.jsx
new file mode 100644
index 00000000..f6ff8157
--- /dev/null
+++ b/playground/react/import-attributes/test.jsx
@@ -0,0 +1,9 @@
+import data from './data.json' with { type: 'json' }
+
+export function TestImportAttributes() {
+  return (
+    <div>
+      import-attirbutes: <span class="import-attributes">{data.message}</span>
+    </div>
+  )
+}