ruby-on-rails - webpacker-react で npm モジュールをインストールできない

Question

私のプロジェクトに react-dropzone をインストールしたいと思います。私はreact-railsプロジェクトを使用しています。gem を使用するために webpacker-react をインストールしました。経由で react-dropzone をインストールnpm installしましたが、反応コンポーネントにロードできません。（webpacker-reactが原因だと思います）。では、npm 経由でインストールされたモジュールを反応コンポーネントにロードする方法は?

コンポーネント.jsx

import Dropzone from 'react-dropzone'

class Main extends React.Component {

    onDrop(file) {

    }
    render() {
        return (
            <div className="container">
                <div>
                    <Dropzone onDrop={this.onDrop().bind(this)}>
                        <p>To Fix</p>
                    </Dropzone>
                </div>
            </div>
        )
    }
}

package.json (よくインストールされています)

"react-dropzone": "^3.13.3",

Firefox コンソールのエラー メッセージ:

ReferenceError: require is not defined
in Debugger :
var _reactDropzone = require('react-dropzone');

webpacker.yml

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_output_path: packs

  extensions:
    - .coffee
    - .erb
    - .js
    - .jsx
    - .ts
    - .vue
    - .sass
    - .scss
    - .css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default

  dev_server:
    host: 0.0.0.0
    port: 8080
    https: false

test:
  <<: *default

  public_output_path: packs-test

production:
  <<: *default 

構成.js

//Common configuration for webpacker loaded from config/webpacker.yml

const { join, resolve } = require('path')
const { env } = require('process')
const { safeLoad } = require('js-yaml')
const { readFileSync } = require('fs')

const configPath = resolve('config', 'webpacker.yml')
const loadersDir = join(__dirname, 'loaders')
const settings = safeLoad(readFileSync(configPath), 'utf8')[env.NODE_ENV]

function removeOuterSlashes(string) {
  return string.replace(/^\/*/, '').replace(/\/*$/, '')
}

function formatPublicPath(host = '', path = '') {
  let formattedHost = removeOuterSlashes(host)
  if (formattedHost && !/^http/i.test(formattedHost)) {
    formattedHost = `//${formattedHost}`
  }
  const formattedPath = removeOuterSlashes(path)
  return `${formattedHost}/${formattedPath}/`
}

const output = {
  path: resolve('public', settings.public_output_path),
  publicPath: formatPublicPath(env.ASSET_HOST, settings.public_output_path)
}

module.exports = {
  settings,
  env,
  loadersDir,
  output
}