Reactjs & Express '您可能需要一个合适的加载器来处理这种文件类型。

Question

我已经创建了一个 React/Express 服务器，但是在尝试导入 bootstrap 时，我得到以下信息：

错误

./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');

设置

应用程序.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;

索引.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();

我在两个包上都安装了 webpack 我完全不知道为什么会出现这个问题。 我在没有 express 的情况下做了同样的事情，没有任何问题，但是对于 Express 和 React，我似乎无法导入任何 package 而不会出现同样的错误。

任何帮助将不胜感激。

Answer 1

典型的 React / Express 开发设置如下所示，假设您的 React 应用程序开发服务器在端口 3000 上运行而 Express 在 5000 上运行......

1. 代理 API 向 Express 请求。 在client/package.json添加

   "proxy": "http://localhost:5000",

2. 以您喜欢的方式启动您的 Express 应用程序

3. 通过应用程序文件夹中的npm start / yarn start启动你的 React 应用程序（在你的例子中是client ）。

4. 打开浏览器到http://localhost:3000

确保在安装客户端库（如 react-bootstrap）时将它们安装在client/package.json文件中。

---

生产构建看起来更像这样

1. 让 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")); });

2. 通过npm run build在client文件夹中运行 build / yarn build来构建你的 React 应用程序。

3. 以您喜欢的方式启动您的 Express 应用程序

4. 在浏览器中打开http://localhost:5000 。

请注意，在生产模式下更改 React 应用程序需要重新构建（步骤 #2）。