Question

我想在我的项目中安装react-dropzone。我使用react-rails项目。我已经安装了webpacker-react来使用gem。我通过npm install安装了react-dropzone，但我无法在反应组件中加载它。（我想这是由于webpacker反应）。那么，如何将通过npm安装的模块加载到我的反应组件中？

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

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

无法使用webpacker-react安装npm模块

0 个答案: