0

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

组件.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
}
4

0 回答 0