“未捕获的错误：找不到模块'react'”不断显示答案

【问题标题】："Uncaught Error: Cannot find module 'react'" keeps showing“未捕获的错误：找不到模块'react'”不断显示
【发布时间】：2021-05-16 00:41:15
【问题描述】：

我真的很想知道为什么它一直向我显示此错误消息

未捕获的错误：找不到模块“反应”

虽然我已经尝试了我在以下帖子中找到的每一个解决方案：

Uncaught Error: Cannot find module "react"

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

Uncaught Error: Cannot find module 'react'

Cannot find module 'react'

这些是我放在相关文件中的脚本：

welcome.blade.php：

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Laravel</title>
   </head>
   <body>
      <div id="example"></div>
      <script src="js/app.js"></script>
   </body>
</html>

app.js：

require('./bootstrap');
require('./components/Example');

Example.js：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Switch, NavLink } from 'react-router-dom';
import Home from './Home';
import { Link } from 'react-router/lib/Link';

class Example extends Component{
    render(){
        return(
            <BrowserRouter>
              <div>
                <NavLink to="/home">Home</NavLink>
                <Switch>
                  <Route path="/home" component={Home}/>
                </Switch>
              </div>
            </BrowserRouter>
            
        )
    }
}

export default Example;

if(document.getElementById('example')){
    ReactDOM.render(<Example />, document.getElementById('example'));
}

Home.js：

import React, { Component } from 'react';

class Home extends Component{
    render(){
        return(
            <div>

            </div>
        )
    }
}

export default Home;

package.json:

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@babel/preset-react": "^7.12.13",
        "axios": "^0.21.1",
        "laravel-mix": "^6.0.11",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.2",
        "sass": "^1.32.6",
        "sass-loader": "^8.0.2"
    },
    "dependencies": {
        "@types/react": "^17.0.1",
        "@types/react-dom": "^17.0.0",
        "react": "^17.0.1",
        "react-dom": "^17.0.1",
        "react-router": "^5.2.0",
        "react-router-dom": "^5.2.0"
    }
}

webpack.mix.js：

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

/* mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]); */
mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .react();

那么，我的代码有什么问题？有什么想法吗？

附注：

React JS 版本：17.0.1
Node.js 版本：v15.7.0

【问题讨论】：

标签： javascript html node.js reactjs

【解决方案1】：

这为我解决了这个问题。

打开终端输入

yarn add typescript --dev

如果使用 npm 输入

npm install typescript

【讨论】：