意外的令牌導入 - Electron/React

當我試圖在開始學習後運行我的程序反應，我運行我的啓動腳本時遇到此錯誤。我從app.js將類'App'導入我的入口點main.js。意外的令牌導入 - Electron/React

下面是我的代碼：

webpack.config.js

module.exports = { 
    entry: './main.js', 
    target: "electron", 
    output: { 
    path: './', 
    filename: 'app.js' 
    }, 
devServer: { 
    inline: true, 
    port: 3333 
}, 
module: { 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['es2015', 'react'] 
     } 
    } 
    ] 
} 
}

app.js：

const React = require('react'); 

class App extends React.Component { 
    mapboxgl.accessToken = 'key_here'; 

    render() { 
     return (
     <div> 
      var map = new mapboxgl.Map({ 
       container: 'map', 
       style: 'map_style_here', 
       center: [-74.50, 40], 
       zoom: 9 
      }); 
     </div> 
    ); 
    } 
} 

export default App

main.js：

'use strict'; 

const React = require('react'); 
const ReactDOM = require('react-dom'); 

import App from './app'; 

const BrowserWindow = require('browser-window') 
const app   = require("app"); 

var mainWindow = null;  // Keep global reference to main broswer window. 

app.on('window-all-closed', function() { 
if (process.platform != 'darwin') { 
    app.quit(); 
} 
}); 

app.on('ready', function() { 

// Reference the main window object. 
mainWindow = new BrowserWindow({width: 1200, height: 800}); 

mainWindow.loadURL('file://' + __dirname + "/app.html") 

mainWindow.on('closed', function() { 

// Dereference the main window object. 
mainWindow = null; 

ReactDOM.render(<App />, document.getElementById('map')) 
}) 
})

錯誤：

Uncaught Exception: 
SyntaxError: Unexpected token import 
    at exports.runInThisContext (vm.js:53:16) 
    at Module._compile (module.js:404:25) 
    at Object.Module._extensions..js (module.js:432:10) 
    at Module.load (module.js:356:32) 
    at Function.Module._load (module.js:313:12) 
    at loadApplicationPackage 
(C:\Programming\RestaurantChat\node_modules\electron 
prebuilt\dist\resources\default_app\main.js:257:23) 
    at Object.<anonymous> 
(C:\Programming\RestaurantChat\node_modules\electron 
prebuilt\dist\resources\default_app\main.js:289:5) 
    at Module._compile (module.js:425:26) 
    at Object.Module._extensions..js (module.js:432:10) 
    at Module.load (module.js:356:32)

是有沒有編譯的東西嗎？對於爲什麼會出現語法錯誤，我真的很茫然。

來源

2016-03-07 kmartmvp

這將是非常有益的編輯您的問題，你的語法錯誤說什麼，它是什麼線！ –

不知道爲什麼我沒有把它放在第一位 - 我的壞！給我一秒編輯。 – kmartmvp

抱歉編輯前長時間延遲，只好接電話。 – kmartmvp

在主Electron進程中使用React沒有什麼意義，主進程無法訪問DOM。因此，除非您的計劃是將React組件渲染爲字符串，然後通過IPC將結果發送到渲染器進程，否則您需要重新考慮您的方法。

至於SyntaxError，它看起來像巴貝爾的轉化率不import到require，雖然我不知道它是否應該或是否在這個時候，的WebPack應該處理。你在使用electron-renderer plugin嗎？您可能需要從electron-react-boilerplate開始。

來源

2016-03-07 07:22:54

感謝您的反饋。這是我第一次將兩者結合使用，並且我認爲在主電子過程中使用React效率不高。我會在早上嘗試插件並報告。 – kmartmvp

一旦我改變了我的方法，Babel開始正確地轉換所述關鍵字。我假設問題出在Electron主進程無法通過ReactDOM訪問DOM。謝謝！ – kmartmvp

意外的令牌導入 - Electron/React

回答

相關問題