Zoeken op website

reactjs - Hoe een .json-bestand importeren in een TypeScript React-app

Ik krijg de foutmelding:

Kan module '../public/data.json' niet vinden. Overweeg het gebruik van '--resolveJsonModule' om een module met de extensie '.json' te importeren.

import "./styles.css";
import data from "../public/data.json"; 
/**
 *
 * Welcome to the DDS coding challenge.
 *
 * Load `/public/data.json` as if it were a GET endpoint
 * and render it in a table using `/public/table.png` design.
 *
 * Make this behaviour reusable.
 *
 * Ask questions & have fun!
 *
 */
export default function App() {
  return <div className="App"></div>;
}

Hier is een link naar de uitdaging -> https://codesandbox.io/s/staging-snow-vvmvd?file=/src/App.tsx

Antwoord #1

Het foutbericht laat je weten dat TypeScript standaard geen JSON kan importeren, je moet eerst de compileroptie resolveJsonModule inschakelen. Om dit in een React-project te doen, voeg het volgende toe aan je tsconfig.json:

{
  "compilerOptions": {
    "resolveJsonModule": true
  }
}

Vervolgens, wanneer je het JSON-bestand importeert, moet je het een pad geven dat relatief is ten opzichte van het huidige bestand. Het JSON-bestand wordt gebundeld met je JavaScript, dus het zou waarschijnlijk in de /src-directory moeten gaan in plaats van de /public-directory. Bijvoorbeeld, als je het in dezelfde directory als App.tsx plaatst, zou je het zo importeren:

import data from "./data.json"

Gerelateerde artikelen