Question

当我在开始学习 React 后尝试运行我的程序时，我在运行启动脚本时遇到此错误。我正在将“应用”课程从 app.js 导入我的入口点 main.js 。

以下是我的代码：

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)

有什么东西没有编译吗？我真的不知道为什么会出现语法错误。

Answer 1

在主要的Electron流程中使用React没什么意义，主流程无法访问DOM。因此，除非您的计划是将React组件呈现为字符串，然后通过IPC将结果发送到呈现器进程，否则您需要重新考虑您的方法。

对于SyntaxError，看起来Babel没有将import转换为require，但我不确定它是否应该或者是否是Webpack所应该的处理。您使用的是electron-renderer plugin吗？您可能希望从electron-react-boilerplate开始。

意外的令牌导入 - 电子/反应

1 个答案: