Импорт статического json в приложение create-response-app + typescript

Я изучаю машинописный текст и в настоящее время пытаюсь импортировать простой файл json, который я храню локально в проекте, загруженном с помощью приложения create-response-app.

data.json выглядит так:

{
  "test": "123",
}

В моем App.tsx я пытаюсь импортировать его с помощью json-loader. И App.tsx, и data.json находятся в одной папке, и импорт выглядит следующим образом:

import data from './data.json'

Я уже пробовал пару решений этой проблемы, но, похоже, ничего не работает. Это решения import * as data from './data.json' и const data = require('./data.json').

Какую ошибку вы получаете? Вы извлекали конфигурацию create-react-app? Возможно, вам потребуется поделиться той частью конфигурации веб-пакета, в которую вы добавили json-loader. Оператор импорта выглядит правильно StackBlitz

Alexander Staroselsky 13.09.2018 21:18
var data = require('./data.json'); попробуйте это
chintuyadavsara 13.09.2018 21:20

@AlexanderStaroselsky Я не извлекал, предполагал, что json-loader встроен в скрипты реакции. Я получаю разные ошибки в зависимости от того, что я пытаюсь сделать: в этом случае import * as data from './data.json' я могу console.log данные, НО ошибка - ...containers/App.tsx(3,23): Cannot find module './data.json'.

Dimitry Ivashchuk 13.09.2018 21:25

Я предполагал, что вы выбросились, поскольку используете TypeScript. Как вы интегрируете TypeScript с Webpack в свой проект create-react-app? Вероятно, вам следует поделиться своей конфигурацией, чтобы другие могли помочь решить вашу проблему.

Alexander Staroselsky 13.09.2018 21:27

@AlexanderStaroselsky Ничего особенного, я полагаю, я только что запустил create-react-app my-app --scripts-version=react-scripts-ts. Когда я пытаюсь импортировать, как вы, в своей песочнице, я получаю ошибку Cannot find module './data.json'.

Dimitry Ivashchuk 13.09.2018 21:31

Ознакомьтесь с этим вопросом об импорте JSON в TypeScript: stackoverflow.com/questions/49996456/…. Это не ты, это TypeScript.

Alexander Staroselsky 13.09.2018 21:40
const data = require('./data.json') это решение дает ошибку require statement not part of an import statement
Dimitry Ivashchuk 13.09.2018 21:43

@AlexanderStaroselsky Я уже просмотрел этот ответ, но не смог понять из него особого смысла. Могу ли я создать typings.d.ts и правильно его настроить? Спасибо!

Dimitry Ivashchuk 13.09.2018 21:47

Если вы хотите импортировать JSON, вам, вероятно, придется попробовать реализовать то, что в этом ответе. В противном случае вы можете просто сделать его файлом .js и экспортировать объект, который не потребует дополнительной настройки.

Alexander Staroselsky 13.09.2018 21:51

@AlexanderStaroselsky Еще раз спасибо, что не торопились

Dimitry Ivashchuk 13.09.2018 22:18

Я бы хотел больше помочь, я бы оставил вопрос открытым, если бы я был на вашем месте. Может быть что-то простое, чтобы разрешить импорт JSON, о чем я могу не знать. Удачного кодирования!

Alexander Staroselsky 13.09.2018 22:19
5
11
5 420
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Попробуйте изменить импорт на: import {test} from './data.json'. У меня это работает. Если вам нужны именованные данные, вы можете изменить имя test на data в файле .JSON. Или назначьте его другой переменной после импорта.

Ответ принят как подходящий

Решение 1. Вы можете создать новый файл с именем data.json.ts с помощью этого оператора:

export default {your_json};

Затем импортируйте:

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

ссылка: https://github.com/frankwallis/plugin-typescript/issues/129

Решение 2. Проблема здесь в том, что при компиляции проекта (например, в папку с именем lib) у вас нет файла .json внутри папки lib. Вы можете просто включить этот файл в свою сборку или вручную скопировать этот файл в папку lib. Чтобы импортировать файл, вы должны использовать:

  • const data = require ('data.json');
  • объявите свой собственный тип. Создайте новый файл с именем ваше_имя_файла.d.ts и вставьте в него следующий код:
declare module "*.json" 
{
    const value: any;
    export default value;
}

Другие вопросы по теме