How to import .json file with typescript React App

Question

I'm getting the error:

Cannot find module '../public/data.json'. Consider using '--resolveJsonModule' to import module with '.json' extension.

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

Here's a link to the challenge -> https://codesandbox.io/s/staging-snow-vvmvd?file=/src/App.tsx

enter image description here

Stephen Jennings · Accepted Answer · 2021-07-20 01:21:00Z

11

The error message is letting you know that TypeScript cannot import JSON by default, you must enable the compiler option resolveJsonModule first. To do it in a React project, add the following to your tsconfig.json:

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

Next, when you import the JSON file, you must give it a path relative to the current file. The JSON file is going to be bundled with your JavaScript, so it should probably go in the /src directory instead of the /public directory. For example, if you put it in the same directory as App.tsx, then you would import it like so:

import data from "./data.json"

edited Jul 20, 2021 at 1:21

answered Jul 20, 2021 at 1:13

Stephen Jennings

13.4k5 gold badges52 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jahnavi Sananse · Accepted Answer · 2021-07-20 13:42:58Z

1

// data.json:
{
"greeting" : "xin chao Vietnam"
}
// component:
import * as data from 'data.json';
let greeting = data.greeting;
//registering jsonModule in tsconfig.json
"compilerOptions": {
    ....
    "resolveJsonModule": true,
    ....
  },

answered Jul 20, 2021 at 13:42

Jahnavi Sananse

1181 silver badge11 bronze badges

Comments

Ghazaleh Javaheri · Accepted Answer · 2021-09-19 11:02:58Z

0

you can do import and define type of imported data at same time e.g

const filters: {[key: string]: any} = require('./filters.json');

answered Sep 19, 2021 at 11:02

Ghazaleh Javaheri

2,1561 gold badge25 silver badges25 bronze badges

Collectives™ on Stack Overflow

How to import .json file with typescript React App

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related