需要沒有定義錯誤捆綁JS reactjs

我是新來的Django和ReactJS，試圖編譯一個簡單的JSX代碼JS使用本教程：http://geezhawk.github.io/2016/02/02/using-react-with-django-rest-framework.html 沒有工作，所以我用npm run dev編譯，現在它的工作，但給人的瀏覽器控制檯錯誤：未捕獲的ReferenceError：發生反應，沒有定義這裏是我的webpack.config.js需要沒有定義錯誤捆綁JS reactjs

var path = require('path'); 
var webpack = require('webpack'); 
var BundleTracker = require('webpack-bundle-tracker'); 
var nodeExternals = require('webpack-node-externals'); 


module.exports = { 
    //the base directory (absolute path) for resolving the entry option 
    context: __dirname, 
    //the entry point we created earlier. Note that './' means 
    //your current directory. You don't have to specify the extension now, 
    //because you will specify extensions later in the `resolve` section 
    entry: './assets/js/index', 

    output: { 
     //where you want your compiled bundle to be stored 
     path: path.resolve('./assets/bundles/'), 
     //naming convention webpack should use for your files 
     filename: '[name]-[hash].js', 
    }, 
    target: 'node', // in order to ignore built-in modules like path, fs, etc. 
    externals: { 
    react: 'react' 
}, // in order to ignore all modules in node_modules folder 

    plugins: [ 
     //tells webpack where to store data about your bundles. 
     new BundleTracker({filename: './webpack-stats.json'}), 
     //makes jQuery available in every module 
     new webpack.ProvidePlugin({ 
      //React: "react", 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery' 
     }) 
    ], 

    module: { 
     loaders: [ 
      //a regexp that tells webpack use the following loaders on all 
      //.js and .jsx files 
      {test: /\.jsx?$/, 
       //we definitely don't want babel to transpile all the files in 
       //node_modules. That would take a long time. 
       /*exclude: /node_modules/,*/ 
       //use the babel loader 
       loader: 'babel-loader', 
       query: { 
        //specify that we will be dealing with React code 
        presets: ['react'] 
       } 
      } 
     ] 
    }, 

    resolve: { 
     //tells webpack where to look for modules 
     modulesDirectories: ['node_modules'], 
     //extensions that should be used to resolve modules 
     extensions: ['', '.js', '.jsx'] 
    } 
    }

和資產/包/ index.js

var React = require('react') 
    var ReactDOM = require('react-dom') 
    //snaha// 
    var BooksList = React.createClass({ 
    loadBooksFromServer: function(){ 
     console.log(123454657); 
     $.ajax({ 
      url: this.props.url, 
      datatype: 'json', 
      cache: false, 
      success: function(data) { 
       this.setState({data: data}); 
      }.bind(this) 
     }) 
    }, 

    getInitialState: function() { 
     return {data: []}; 
    }, 

    componentDidMount: function() { 
     this.loadBooksFromServer(); 
     setInterval(this.loadBooksFromServer, 
        this.props.pollInterval) 
    }, 
    render: function() { 
     if (this.state.data) { 
      console.log('DATA!') 
      var bookNodes = this.state.data.map(function(book){ 
       return <li> {book.title} </li> 
      }) 
     } 
     return (
      <div> 
       <h1>Hello React!</h1> 
       <ul> 
        {bookNodes} 
       </ul> 
      </div> 
     ) 
     } 
    }) 

    ReactDOM.render(<BooksList url='/api/' pollInterval={1000} />, 
    document.getElementById('container'))

和模板/體html的

{% load render_bundle from webpack_loader %} 
    <!doctype html> 
    <html> 
    <head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script> 
    <meta charset="UTF-8"> 
    <title>Hello React 
     {% block content %} 
      {{ id }} 
     {% endblock %} 
    </title> 
     </head> 
     <body> 
    <div id="container"></div> 
     {% render_bundle 'main' %} 
     </body> 
     </html>

我錯過了什麼？ here is my Django project structure

來源

2016-03-28 Shubhabrata Naha

最後我解決了它！問題是：它試圖獲得變量反應，因爲瀏覽器上的React.js提供了變量React！ webpack.config.js的外部組件來

externals: { 
    React: 'react' 
},

所以我簡單的改變解決了這個問題！

下一頁面臨的問題：

「的過程沒有定義」

解決方案：加入

var env = process.env.WEBPACK_ENV;

到webpack.config.js 的頂部和

new webpack.DefinePlugin({ 
    'process.env.NODE_ENV': '"production"' 
}), 
    new webpack.DefinePlugin({ 
    'process.env': { 
    'NODE_ENV': '"production"' 
    } 
})

成model.export的插件部分

個

所以最終webpack.config.js是：

var path = require('path'); 
var webpack = require('webpack'); 
var BundleTracker = require('webpack-bundle-tracker'); 
var nodeExternals = require('webpack-node-externals'); 
var env = process.env.WEBPACK_ENV; 


module.exports = { 
    //the base directory (absolute path) for resolving the entry option 
    context: __dirname, 
    //the entry point we created earlier. Note that './' means 
    //your current directory. You don't have to specify the extension now, 
    //because you will specify extensions later in the `resolve` section 
    entry: './assets/js/index', 

    output: { 
     //where you want your compiled bundle to be stored 
     path: path.resolve('./assets/bundles/'), 
     //naming convention webpack should use for your files 
     filename: '[name]-[hash].js', 
    }, 
    target: 'node', // in order to ignore built-in modules like path, fs, etc. 
    externals: { 
    React: 'react' 
}, // in order to ignore all modules in node_modules folder 

    plugins: [ 
     //tells webpack where to store data about your bundles. 
     new BundleTracker({filename: './webpack-stats.json'}), 
     //makes jQuery available in every module 
     new webpack.ProvidePlugin({ 
      //React: "react", 
      $: 'jquery', 
      jQuery: 'jquery', 
      'window.jQuery': 'jquery' 
     }), 
     new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': '"production"' 
    }), 
     new webpack.DefinePlugin({ 
     'process.env': { 
     'NODE_ENV': '"production"' 
     } 
    }) 
    ], 

    module: { 
     loaders: [ 
      //a regexp that tells webpack use the following loaders on all 
      //.js and .jsx files 
      {test: /\.jsx?$/, 
       //we definitely don't want babel to transpile all the files in 
       //node_modules. That would take a long time. 
       /*exclude: /node_modules/,*/ 
       //use the babel loader 
       loader: 'babel-loader', 
       query: { 
        //specify that we will be dealing with React code 
        presets: ['react'] 
       } 
      } 
     ] 
    }, 

    resolve: { 
     //tells webpack where to look for modules 
     modulesDirectories: ['node_modules'], 
     //extensions that should be used to resolve modules 
     extensions: ['', '.js', '.jsx'] 
    } 
}

享受現在接招！快樂編碼:-)

來源

2016-03-28 09:23:31

神聖莫里這是一個痛苦的經歷...顛倒'externals'屬性的順序修復了我的*模塊未定義的問題以及通過'

你可以看看是否安裝了所有的需求。

看看package.json。如果您運行，您應該在需求中註明反應。

npm install

如果你不這樣做，然後運行

npm install react --save

PS：在我的選擇，如果你正在運行的WebPack嘗試通天增加的WebPack預設和寫在ES2015規範的JavaScript。

來源

2016-03-28 08:05:32

是的npm在那裏，所以是反應。你能給我一個明確的weback，babel，es2015等文件嗎？目前我並不清楚所有這些。 –

相關問題

需要沒有定義錯誤捆綁JS reactjs

回答

相關問題