"[ts] Cannot find module 'react'" in spite of "npm install" - reactjs

Question

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')
})
]
});
So what is missing?
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.
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.

Answer 1

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

Answer 2

you could try adding
"target": "ES6"
"module": "commonjs",
"moduleResolution": "node",
"baseUrl": "src",
"typeRoots": ["node_modules/#types"]
to compilerOptions