[plugin:vite:esbuild] Transform failed - Importing JSON files with { type: "json" }; #385
Description
Describe the bug
Reproduction here: https://stackblitz.com/edit/vitejs-vite-no1xpg?file=src%2FApp.tsx
I am trying to import json files, with code like so:
import enUs from "../locales/en-US.json" with { type: "json" }; import it from "../locales/it.json" with { type: "json" }; But running it with vite causes it to crash with this error:
[plugin:vite:esbuild] Transform failed with 1 error: /Users/skeithtan/WebstormProjects/deno-reporting/report-templates/src/components/IntlContextProvider.tsx:3:46: ERROR: Expected "{" but found "type" /Users/skeithtan/WebstormProjects/deno-reporting/report-templates/src/components/IntlContextProvider.tsx:3:48 Expected "{" but found "type" 1 | import RefreshRuntime from "/@react-refresh";const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;let prevRefreshReg;let prevRefreshSig;if (import.meta.hot && !inWebWorker) { if (!window.__vite_plugin_react_preamble_installed__) { throw new Error( "@vitejs/plugin-react can't detect preamble. Something is wrong. " + "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201" ); } prevRefreshReg = window.$RefreshReg$; prevRefreshSig = window.$RefreshSig$; window.$RefreshReg$ = (type, id) => { RefreshRuntime.register(type, "/Users/skeithtan/WebstormProjects/deno-reporting/report-templates/src/components/IntlContextProvider.tsx" + " " + id) }; window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;}var _s = $RefreshSig$();import { createContext, PropsWithChildren, useState } from "react"; 2 | import { IntlProvider } from "react-intl"; 3 | import enUs from "../locales/en-US.json" with type: "json"; | ^ 4 | import it from "../locales/it.json" with type: "json"; 5 | import { DEFAULT_LOCALE, Locale } from "../../../pdf-server/types/locale.ts"; Strange enough, in the stacktrace, it shows line 3 and 4 with missing braces like so: import enUs from "../locales/en-US.json" with type: "json"; even though the actual code has braces like so: { with type: "json" }.
Using npm:vite@^5.4.11 npm:react@^18.3.1 npm:@vitejs/plugin-react@^4.3.3 npm:@deno/vite-plugin@^1.0.0
Reproduction
https://stackblitz.com/edit/vitejs-vite-no1xpg?file=src%2FApp.tsx
Steps to reproduce
No response
System Info
"vite": "npm:vite@^5.4.11", "vitest": "npm:vitest@^2.1.5" "@deno/vite-plugin": "npm:@deno/vite-plugin@^1.0.0", "react": "npm:react@^18.3.1",Used Package Manager
npm
Logs
vite:transform 14.68ms /src/templates/MedeaResting/components/Viewer/LeadContainer.tsx +5ms vite:transform 14.71ms /src/templates/MedeaResting/components/PatientInfoBox.tsx +0ms vite:load 13.19ms [fs] /src/components/IntlContextProvider.tsx +22ms vite:load 17.13ms [fs] /src/hooks/useFormatAge.ts +4ms vite:esbuild esbuild error with options used: { sourcemap: true, sourcefile: '/Users/skeithtan/WebstormProjects/deno-reporting/report-templates/src/components/IntlContextProvider.tsx', target: 'esnext', charset: 'utf8', jsxDev: true, jsx: 'automatic', jsxImportSource: undefined, minify: false, minifyIdentifiers: false, minifySyntax: false, minifyWhitespace: false, treeShaking: false, keepNames: false, supported: { 'dynamic-import': true, 'import-meta': true }, loader: 'tsx', tsconfigRaw: { compilerOptions: { useDefineForClassFields: false, jsx: undefined } } } +49ms 3:12:01 PM [vite] Pre-transform error: Transform failed with 1 error: /Users/skeithtan/WebstormProjects/deno-reporting/report-templates/src/components/IntlContextProvider.tsx:3:46: ERROR: Expected "{" but found "type" (x4) Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.