“[ts] 找不到模块‘反应’"；尽管有“npm install" [英] "[ts] Cannot find module 'react'" in spite of "npm install"

问题描述

我尝试按照 webpack's intro 但我的编辑器找不到 react 模块(它在 package.json 中定义，我运行了npm install").所以bundle.js文件被加载了，打字稿不应该被编译成那个吗?

I try to update my webpack+js+react-HelloWorld webapp (which worked fine) to use Typescript instead by following webpack's intro but my editor cann't find the react module (which is defined in package.json and i ran "npm install"). So the bundle.js-file is loaded, shouldn't typescript be compiled into that one?

src/index.tsx:

import * as React from "react";
import { render } from "react-dom";

const App = () => (<div>Hello React with Typescript</div>);

function createAppParent() {
  let element = document.createElement('div');
  document.body.appendChild(element);

  return element;
}

render((
    <App />
), createAppParent());

package.json:

{
  "name": "hello_world_ts",
  "version": "1.0.0",
  "description": "minimal configuration of webpack react and sass using typescript",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --open --config webpack.dev.js",
    "build": "webpack --config webpack.prod.js"
  },
  "keywords": [],
  "author": "me",
  "license": "ISC",
  "devDependencies": {
    "clean-webpack-plugin": "^0.1.17",
    "html-webpack-plugin": "^2.30.1",
    "ts-loader": "^3.5.0",
    "typescript": "^2.7.1",
    "uglifyjs-webpack-plugin": "^1.1.6",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.11.1",
    "webpack-merge": "^4.1.1"
  },
  "dependencies": {
    "@types/react": "^16.0.38",
    "@types/react-dom": "^16.0.4",
    "react": "^16.2.0",
    "react-dom": "^16.2.0"
  }
}

tsconfig.json:

{
    "compilerOptions": {
      "outDir": "./dist/",
      "sourceMap": true,
      "noImplicitAny": true,
      "module": "es6",
      "target": "es2017",
      "jsx": "react",
      "allowJs": true
    },
    "exclude": [
      "node_modules",
      "dist"
    ],
    "include": [
        "./src/**/*"
    ]
}

webpack.common.json:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/,
                exclude: /node_modules/,
                use: [
                    'ts-loader'
                ],
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(['dist']),
        new HtmlWebpackPlugin({
            title: 'Hello React+Typescript',
        })
    ]
};

webpack.dev.json:

const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'inline-source-map',
    devServer: {
        contentBase: './dist'
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ]
});

webpack.prod.json:

const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');

module.exports = merge(common, {
    devtool: 'source-map',
    plugins: [
        new UglifyJSPlugin({
            sourceMap: true
        }),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('production')
        })
    ]
});

那么缺少什么?

更新:我使用 Visual Studio Code 显示消息[ts] 找不到模块‘react’"，但这不仅仅是编辑器.在 'npm start' 启动 devServer 后，我在 Firefox 控制台中得到类似未找到反应模块"的信息.

UPDATE: I use Visual Studio Code which displayed the message "[ts] Cannot find module 'react'", but it wasn't only the editor. After 'npm start' starting the devServer i got something like "react module not found" in the firefox console.

那么为什么现在一切正常，一天后?(修辞问题)编译器中没有错误，开发服务器输出工作正常.我知道重新加载有时可以帮助 IDE，但也可以帮助 npm??奇怪的东西，但没有需要解决的问题.

So why is everything working now, a day later? (rhetoric question) No errors in the compiler and the dev server output works fine. I know that a reload can sometimes help an IDE but also npm?? Strange stuff, but not problem left to solve.

推荐答案

问题在计算机重启时因未知原因消失.(此答案是将问题标记为已回答.)

problem disappeared for unknown reasons on computer restart. (This answer is to mark question as answered.)

这篇关于“[ts] 找不到模块‘反应’"；尽管有“npm install"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！