1

レールとスプロケットで webpack を使用しています。React は gem react-rails を介して追加されます。エラーが発生し続けます

greet.self-c872e41….js?body=1:1 Uncaught ReferenceError: exports is not defined(anonymous function)
main.self-8ac2c1a….js?body=1:11 Uncaught ReferenceError: require is not defined

したがって、私の挨拶ファイルapp/assets/javascripts/components/main.jsxおよびgreet.jsxからまだ読み取っているという事実は、私にとって問題のようです。 bundle.js ファイル。

私のレールビューは次のようになります: app/views/home/index.html.erb

<div id="react"></div>
<%= react_component("Main") %>

アプリ/アセット/javascripts/コンポーネント/main.jsx

import Greet from './greet'

class Main extends React.Component {
  render() {
    return (
      <Greet />
    )
  }
}

アプリ/アセット/javascripts/コンポーネント/greet.jsx

export default class Greet extends React.Component {
  render() {
    return <h2>Hello There</h2>
  }
}

私の Webpack ファイルは次のようになります: webpack.config.js

module.exports = {
  entry: "./app/assets/javascripts/components/main.jsx",

  output: {
    path: __dirname + "/app/assets/javascripts",
    filename: "bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: "babel",
        query: { presets:['es2015', 'react'] }
      }
    ],
  },
};

そして私のapp/assets/javacsripts/application.js

//= require jquery
//= require jquery_ujs
//= require react
//= require react_ujs
//= require components
//= require_tree .

インポートとエクスポートの呼び出しを削除すると正常に動作しますが、私がフォローしているチュートリアルではそれらを使用しています。componentsディレクトリを削除し、 bundle.jsファイルのみを必要とすると、react-rails からエラーが発生します。

Main is not defined

呼び出しのインポートとエクスポートを認識させる方法に途方に暮れています。ES6に関するものであることは知っていますが、webpackがそれを解決するはずだと思っていました。

ブラウザのネットワーク タブで、greet.jsx、main.jsx、および bundle.js がすべて呼び出されています。

4

0 に答える 0