Typescript / whatwg-fetch / webpack出错

时间:2016-06-12 22:46:41

标签: reactjs typescript webpack fetch

我正在尝试使用一个简单的演示应用程序使用Typescript和React,使用webpack。当我尝试添加whatgw-fetch从服务器检索数据时,运行webpack时出现此错误:

error TS2307: Cannot find module 'whatwg-fetch'

错误在导入行上:

import * as Fetch from 'whatwg-fetch'

我确实安装了npm依赖项和typescript的输入法

npm install --save whatwg-fetch
typings install --global --save dt~whatwg-fetch

我的网站配置是:

var HtmlWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});
var path = require('path');
module.exports = {
    entry: [
        path.resolve(__dirname, 'app/index.tsx')
    ],
    output: {
        path: __dirname + '/dist',
        filename: "index_bundle.js"
    },
    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension. 
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
            {test: /\.tsx$/, exclude: /node_modules/, loader: "ts-loader"}
        ]
    },
    plugins: [HTMLWebpackPluginConfig]
};

我在IDE(IntelliJ IDEA)中没有看到任何错误,如果我将导入更改为某些实际不存在的模块,我会收到不同的错误(Module not found: Error: Cannot resolve module 'whatwg-fetcha' in C:\dev\[...]),我的IDE告诉我导入无效。

基本React的导入在等效设置下正常工作:

npm install --save react
typings install --global --save dt~react
import * as React from 'react'

我错过了什么吗?

感谢您的帮助。

2 个答案:

答案 0 :(得分:21)

经过一些更多的研究(并且实际上写下了问题),看来whatwg-fetch的输入就是这个用例:Import a module for side-effects only(如网站所述:虽然不推荐练习,但有些模块设置一些可以被其他模块使用的全局状态。这些模块可能没有任何导出,或者消费者对他们的任何出口都不感兴趣。)

所以而不是

ALTER TABLE

我用过

import * as Fetch from 'whatwg-fetch'

我不会再遇到任何错误,我可以在组件中使用fetch功能。希望这有助于其他人。

答案 1 :(得分:0)

除了@Antoine解决方案之外,我还需要将@types/whatwg-fetch添加到我的项目中以使其正常工作:

npm install --save @types/whatwg-fetch