fix: force non-legacy import attributes babel output (#386)

packages/plugin-react/package.json

@@ -38,7 +38,7 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.25.2",
+    "@babel/core": "^7.26.0",
     "@babel/plugin-transform-react-jsx-self": "^7.24.7",
     "@babel/plugin-transform-react-jsx-source": "^7.24.7",
     "@types/babel__core": "^7.20.5",

packages/plugin-react/src/index.ts

@@ -249,6 +249,8 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         },
         generatorOpts: {
           ...babelOptions.generatorOpts,
+          // import attributes parsing available without plugin since 7.26
+          importAttributesKeyword: 'with',
           decoratorsBeforeExport: true,
         },
         plugins,

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>
   )
 }

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 () => {

playground/react/import-attributes/data.json

@@ -0,0 +1,3 @@
+{
+  "message": "ok"
+}

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>
+  )
+}