Reactjs & Express 'You may need an appropriate loader to handle this file type.'

Question

I have created a React/Express server but when trying to import bootstrap I am getting the below:

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

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

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. 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.

Any help would be greatly appreciated.

Answer 1

A typical React / Express dev setup looks like this, assuming your React app dev server runs on port 3000 and Express on 5000...

1. Proxy API requests to Express. In client/package.json add

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

2. Start your Express app however you prefer to start it

3. Start your React app via npm start / yarn start in the app's folder (client in your case).

4. Open your browser to http://localhost:3000

Make sure when installing client-side libraries like react-bootstrap that you install them in the client/package.json file.

---

A production build looks more like this

1. Have Express statically serve files from your build directory and handle frontend routes

   // 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. Build your React app via npm run build / yarn build in the client folder.

3. Start your Express app however you prefer to start it

4. Open http://localhost:5000 in your browser.

Note that making changes to your React app in production mode requires a re-build (step #2).