React + Typescript + Webpack4: не удается найти модуль '***. Json' - PullRequest
Новая
       17

React + Typescript + Webpack4: не удается найти модуль '***. Json'

0 голосов
/ 05 мая 2018

Я пытаюсь импортировать данные из файла .json в .tsx, используя следующее: 

import data from "data/mockup.json"

но я получил ошибку

Не удается найти модуль 'data / mockup.json'

Мой конфиг веб-пакета выглядит так: 

const babelLoader = {
    loader: 'babel-loader',
    options: {
        cacheDirectory: true,
        presets: [
            ["@babel/preset-env", {
                "targets": {
                    "browsers": ["last 2 versions", "safari >= 7"]
                },
                "modules": true
            }]
        ]
    }
};

module.exports = {
    entry: {...},
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.json'],
        alias: {
            data: path.resolve(__dirname, 'src/app/data')
        }
    },
    output: {...},
    module: {
        rules: [
            {
                test: /\.tsx?$/,
                exclude: /node_modules/,
                use: [
                    babelLoader,
                    {
                        loader: 'ts-loader'
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules\/(?!(dom7|swiper)\/).*/,
                use: [
                    babelLoader
                ]
            }
        ]
    },
    ...
}
enter code here

Я думаю, что .json встроен в webpack4 по умолчанию, поэтому может быть что-то не так с моей конфигурацией webpack?

Используемая версия: веб-пакет: v4.4.1 машинопись: 2.7.2

1 Ответ

0 голосов
/ 05 мая 2018

объявить модуль в файле d.ts 

declare module "*.json"

Добавить поле в tsconfig.json в опциях компилятора 

"typeRoots": [ "node_modules/@types", "./typings.d.ts" ],

Теперь импортируем в файл (.tsx) 

import * as data from "./dat/data.json";

Webpack@4.4.1 и Typescript@2.7.2

Надеюсь, это поможет !!!

Ref1: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

Ref2: https://github.com/Microsoft/TypeScript-React-Starter/issues/12

...