javascript - “未捕获的错误:找不到模块'react'”不断显示
问题描述
我真的很想知道为什么它一直向我显示此错误消息
未捕获的错误:找不到模块“反应”
尽管我已经尝试了在以下帖子中找到的每一个解决方案:
“[ts] 找不到模块 'react'”,尽管有“npm install”
这些是我放在相关文件中的脚本:
欢迎.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>
应用程序.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'));
}
主页.js:
import React, { Component } from 'react';
class Home extends Component{
render(){
return(
<div>
</div>
)
}
}
export default Home;
包.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();
那么,我的代码有什么问题?任何想法?
PS:
- 反应 JS 版本:17.0.1
- Node.js 版本:v15.7.0
解决方案
这为我解决了这个问题。
打开终端并输入
yarn add typescript --dev
如果使用 npm 输入
npm install typescript
推荐阅读
- ios - ITMS-90809:已弃用 API 使用,但没有 UIWebView
- git - 即使在安装之后,如何处理缺少的 git.exe 错误?
- java - 在 Java 中屏蔽 XML 中的敏感数据的性能优化方法
- python - 如何过滤Pydatatable框架的I表达式中传递的多个值的观察?
- python - Postgres ON CONFLICT DO UPDATE only non null values in python
- azure - 在 Kusto 中,如何在使用“reduce”运算符时获得额外的列
- ios - IOS谷歌地图标记标题不出现
- javascript - 包含在 Webpack 4 中的部分渲染为文字而不是 HTML
- python - NoneType' 对象没有属性 'group' 错误。Python代码
- c# - 如何在 C# 中获取 SQL Server 的日期时间