[英]Reactjs & Express 'You may need an appropriate loader to handle this file type.'
I have created a React/Express server but when trying to import bootstrap I am getting the below:我已经创建了一个 React/Express 服务器,但是在尝试导入 bootstrap 时,我得到以下信息:
Error错误
./node_modules/react-bootstrap/esm/Button.js
Module parse failed: Unexpected token (18:2)
You may need an appropriate loader to handle this file type.
| active,
| className,
| ...props
| }, ref) => {
| const prefix = useBootstrapPrefix(bsPrefix, 'btn');
Setup设置
App.js应用程序.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Customers from './components/customers';
import Button from 'react-bootstrap/Button';
import 'bootstrap/dist/css/bootstrap.min.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">React Express Starter</h1>
</header>
<Customers />
<div>
<div id="wallet-address"></div>
</div>
</div>
);
}
}
export default App;
index.js索引.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
I have webpack installed on both packages I am just completely lost as to why the issue is occurring.我在两个包上都安装了 webpack 我完全不知道为什么会出现这个问题。 I have done the same without express with no issues but with both Express and React I can't seem to import any package without getting this same error.我在没有 express 的情况下做了同样的事情,没有任何问题,但是对于 Express 和 React,我似乎无法导入任何 package 而不会出现同样的错误。
Any help would be greatly appreciated.任何帮助将不胜感激。
A typical React / Express dev setup looks like this, assuming your React app dev server runs on port 3000 and Express on 5000...典型的 React / Express 开发设置如下所示,假设您的 React 应用程序开发服务器在端口 3000 上运行而 Express 在 5000 上运行......
Proxy API requests to Express. 代理 API 向 Express 请求。 In client/package.json
add在client/package.json
添加
"proxy": "http://localhost:5000",
Start your Express app however you prefer to start it以您喜欢的方式启动您的 Express 应用程序
Start your React app via npm start
/ yarn start
in the app's folder ( client
in your case).通过应用程序文件夹中的npm start
/ yarn start
启动你的 React 应用程序(在你的例子中是client
)。
Open your browser to http://localhost:3000
打开浏览器到http://localhost:3000
Make sure when installing client-side libraries like react-bootstrap that you install them in the client/package.json
file.确保在安装客户端库(如 react-bootstrap)时将它们安装在client/package.json
文件中。
A production build looks more like this生产构建看起来更像这样
Have Express statically serve files from your build
directory and handle frontend routes让 Express 从您的build
目录静态提供文件并处理前端路由
// make sure this comes after any routes, preferably last const path = requires("path"); const clientBuild = path.join(__dirname, "client", "build"); app.use(express.static(clientBuild)); app.get("/*", (_req, res) => { res.sendFile(path.join(clientBuild, "index.html")); });
Build your React app via npm run build
/ yarn build
in the client
folder.通过npm run build
在client
文件夹中运行 build / yarn build
来构建你的 React 应用程序。
Start your Express app however you prefer to start it以您喜欢的方式启动您的 Express 应用程序
Open http://localhost:5000
in your browser.在浏览器中打开http://localhost:5000
。
Note that making changes to your React app in production mode requires a re-build (step #2).请注意,在生产模式下更改 React 应用程序需要重新构建(步骤 #2)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.