Importing static JSON in create-react-app + typescript

Question

I am learning typescript and currently trying to import simple json file which I store locally in the project bootstrapped with create-react-app.

data.json looks like this:

{
  "test": "123",
}

In my App.tsx I am trying to import it using json-loader. Both App.tsx and data.json are in the same folder and the import looks like this:

import data from './data.json'

I've already tried couple solutions to this problem but nothing seems to work. Those solutions are import * as data from './data.json' and const data = require('./data.json')

What error are you getting? Did you eject the create-react-app configuration? You may need to share the portion of the webpack configuration where you added json-loader. You import statement looks right StackBlitz — Alexander Staroselsky
– Alexander Staroselsky, Commented Sep 13, 2018 at 19:18
@AlexanderStaroselsky I did not eject, assumed that json-loader comes embedded in react-scripts. I get different error depending on what I try to do: in this case import * as data from './data.json' I can console.log the data BUT the error is ...containers/App.tsx(3,23): Cannot find module './data.json'. — Dimitry Ivashchuk
– Dimitry Ivashchuk, Commented Sep 13, 2018 at 19:25
I assumed you ejected as you are using TypeScript. How are you integrating TypeScript with Webpack in your create-react-app project? You should probably share you configuration so others can help answer your issue. — Alexander Staroselsky
– Alexander Staroselsky, Commented Sep 13, 2018 at 19:27
@AlexanderStaroselsky Nothing fancy to share I suppose, I've just run create-react-app my-app --scripts-version=react-scripts-ts When I try to import like you did in your sandbox it gives me Cannot find module './data.json' error. — Dimitry Ivashchuk
– Dimitry Ivashchuk, Commented Sep 13, 2018 at 19:31

luiscla27 · Accepted Answer · 2021-09-03 14:38:48Z

7

Solution 1: You can create a new file named data.json.ts with this statement:

export default {your_json};

Then import:

import { default as data } from './path/data.json';

ref: https://github.com/frankwallis/plugin-typescript/issues/129

Solution 2: The problem here that when you compile your project (for example into a folder named lib) you don't have your .json file inside your lib folder. You simple can include that file into your build or manually copy that file into your lib folder. To import your file you have to use:

const data = require('data.json');
declare your own type. Create a new file named your_file_name.d.ts and stick into this file the following code:

declare module "*.json" 
{
    const value: any;
    export default value;
}

edited Sep 3, 2021 at 14:38

luiscla27

6,5542 gold badges47 silver badges56 bronze badges

answered Sep 13, 2018 at 20:48

Nikolay Vetrov

6346 silver badges17 bronze badges

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

Comments

nikos fotiadis · Accepted Answer · 2018-09-13 20:32:42Z

0

Try to change the import to: import {test} from './data.json'. This works for me. If you want it named data you can change the name of test to data in the .JSON file. Or assign it to another variable after importing.

answered Sep 13, 2018 at 20:32

nikos fotiadis

1,0852 gold badges8 silver badges17 bronze badges

Collectives™ on Stack Overflow

Importing static JSON in create-react-app + typescript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related