【问题标题】:Error with Typescript / whatwg-fetch / webpackTypescript / whatwg-fetch / webpack 出错
【发布时间】:2016-10-13 06:50:59
【问题描述】:

我正在尝试使用 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

我的 webpack 配置是:

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'

我错过了什么吗?

感谢您的帮助。

【问题讨论】:

    标签: reactjs typescript webpack fetch


    【解决方案1】:

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

    npm install --save @types/whatwg-fetch
    

    【讨论】:

      【解决方案2】:

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

      所以不是

      import * as Fetch from 'whatwg-fetch'
      

      我用过

      import 'whatwg-fetch'
      

      而且我不再收到任何错误,我可以在我的组件中使用 fetch 函数。希望这对其他人有帮助。

      【讨论】:

      • 嗨,我尝试了同样的方法,但它告诉我 fetch 未在运行时定义。有什么解决办法吗?
      • 您需要使用 github shim 为尚不支持它的浏览器填充它:github.com/github/fetch@SalmanHasratKhan
      • 请注意您正在使用 typescript 并收到“未定义承诺”错误,请确保 tsconfig 文件中的目标是“es6”或更高版本。
      • 似乎不适用于动态导入,import('whatwg-fetch')
      猜你喜欢
      • 1970-01-01
      • 2020-03-10
      • 2017-08-24
      • 2018-03-13
      • 1970-01-01
      • 2018-08-15
      • 2020-09-12
      • 2019-08-13
      • 1970-01-01
      相关资源
      最近更新 更多