ReactJS模塊構建失敗：SyntaxError：意外令牌 - ReactDOM.render

爲什麼我會在下面看到這個錯誤？我的聲明ReactDOM.render(<App />, container);是100％合法代碼。ReactJS模塊構建失敗：SyntaxError：意外令牌 - ReactDOM.render

我的GitHub庫：https://github.com/leongaban/react_starwars

的app.js文件

import react from 'react' 
import ReactDom from 'react-dom' 
import App from 'components/App' 

require('index.html'); 

// Create app 
const container = document.getElementById('app-container'); 

// Render app 
ReactDOM.render(<App />, container);

組件/應用程序文件

import React from 'react' 

const App =() => 
    <div className='container'> 
    <div className='row'> 

    </div> 
    <div className='row'> 

    </div> 
    </div>; 

export default App;

我webpack.config

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
entry: [ 
    './src/app.js' 
], 
output: { 
    path: path.resolve(__dirname, './build'), 
    filename: 'app.bundle.js', 
}, 
module: { 
    loaders: [ 
    { 
     test: /\.html$/, 
     loader: 'file-loader?name=[name].[ext]', 
    }, 
    { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
    }, 
    ], 
}, 
plugins: [ 
    new webpack.NamedModulesPlugin(), 
] 
};

來源

2017-05-30 Leon Gaban

'ReactDOM.render（，集裝箱）;'是無效的JS。你只能使用一個內部文件.JSX。 – xDreamCoding

@xDreamCoding只要將JSX轉換爲純JS，就可以在JS文件中使用它... – Li357

您會希望REGEX用於加載程序測試，同時還包含.js擴展名和.jsx擴展名。它可能看起來像這樣：'''/ \。（js | jsx）$ /'''，這將確保Webpack傳輸app.js文件以及所有源代碼。 –

使用此爲您的WebPack配置文件

const webpack = require('webpack'); 
const path = require('path'); 

module.exports = { 
    entry: [ 
     './src/app.js' 
    ], 
    output: { 
     path: path.resolve(__dirname, './build'), 
     filename: 'app.bundle.js', 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.html$/, 
       loader: 'file-loader?name=[name].[ext]', 
      }, 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader', 
      query: { 
       presets: ['es2015', 'react'] 
      } 
     }, 
    ], 
}, 
plugins: [ 
    new webpack.NamedModulesPlugin(), 
] 
};

你缺少預置

來源

2017-05-30 16:31:09 Julien

謝謝！就是這樣......我正在從一個較舊的項目中學習一個教程。我的新React項目工作正常，所以它是我使用的舊的過時的webpack.config。就像其他人所說的，我錯過了一些我的進口資本。謝謝！我用這個更現代化的webpack.config修復了這個應用程序，現在它重新命名了我的導入程序。 3分鐘！ –

嘗試添加resolve屬性爲您的WebPack配置文件：

resolve: { 
     extensions: ['.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.jsx?$/, 
       exclude: /node_modules/, 
       loaders: ["babel-loader"] 
      } 
     ] 
    }

來源

2017-05-30 16:30:40

這不是問題。 Webpack默認已經解析了.js。 – Li357

安裝通天預置 - 對於jsx語法的反應。

npm install babel-preset-react

預設

loaders: [{ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel-loader', 
      query: { 
       presets: ['react', 'es2015'] 
      } 
     } 
    ]

來源

2017-11-21 11:32:08 Sridhar

ReactJS模塊構建失敗：SyntaxError：意外令牌 - ReactDOM.render

回答

相關問題