如何在React+Rails中使用Bootstrap？reactstrap出现require错误求助

Hey there! Let's break down how to fix that require is not a function error and get Bootstrap working smoothly in your React-Rails project.

This issue usually pops up because React-Rails uses tools like esbuild (or Webpacker in older versions) for bundling JavaScript, and reactstrap relies on CommonJS-style require calls under the hood. If your project's JS environment isn't configured to handle these CommonJS modules properly, you'll hit that TypeError.

Let's walk through the full setup and fix process:

2.1 Install All Required Dependencies #

First, make sure you have all the necessary packages installed. Reactstrap depends on Bootstrap and Popper.js for interactive components, so run this in your project root:

# Using yarn
yarn add bootstrap reactstrap @popperjs/core

# Or using npm
npm install bootstrap reactstrap @popperjs/core --save

2.2 Load Bootstrap's Styles #

Bootstrap needs its CSS to render correctly. Add this import to your main JS entry file (usually app/javascript/application.js):

import 'bootstrap/dist/css/bootstrap.min.css';

If you're using an older Webpacker setup, you can instead import the CSS in app/assets/stylesheets/application.scss (rename .css to .scss if needed):

@import 'bootstrap/dist/css/bootstrap';

2.3 Fix the require is not a function Error #

Here are two reliable ways to resolve this module loading issue:

Option 1: Add a require Shim for ESBuild #

If you're using Rails' default jsbundling-rails with esbuild, create a small shim to add require support globally:

1. Create app/javascript/shims.js with this code:

   import { createRequire } from 'module';
   global.require = createRequire(import.meta.url);
   

2. Update your package.json build script to inject this shim:

   "scripts": {
     "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --inject:app/javascript/shims.js"
   }
   

Option 2: Configure Webpacker (For Older Projects) #

If you're still using Webpacker, update your config/webpack/environment.js to handle CommonJS and provide required globals:

const { environment } = require('@rails/webpacker');
const webpack = require('webpack');

// Provide jQuery and Popper for Bootstrap
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['@popperjs/core', 'default']
}));

module.exports = environment;

2.4 Test Your Component #

Keep your existing reactstrap import (it's correct!):

import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';

Then use the components in your React component like this:

function MyForm() {
  return (
    <Form className="p-4">
      <FormGroup row>
        <Label for="userEmail" sm={2}>Email</Label>
        <Col sm={10}>
          <Input type="email" name="email" id="userEmail" placeholder="Enter your email" />
        </Col>
      </FormGroup>
      <Button color="primary">Submit</Button>
    </Form>
  );
}

export default MyForm;

Finally, restart your Rails server and rebuild your JS assets:

yarn build # Or npm run build
rails server

• If you still see errors, try wiping your dependencies and reinstalling:

  rm -rf node_modules package-lock.json yarn.lock
  npm install # Or yarn install
  

• Double-check that your React-Rails gem is up to date (run bundle update react-rails if needed).
• Ensure you're not mixing ES module import and CommonJS require calls in your own code.

内容的提问来源于stack exchange，提问作者Mukarram Ali