电子，反应，webpack”;未捕获的语法错误:意外的保留字"

electron, react, webpack "Uncaught SyntaxError: Unexpected reserved word"

本文关键字：错误 意外 保留字 quot 语法 webpack 反应 电子      更新时间：2023-09-26

有人能说明为什么会出现这个错误吗？谢谢

电子（Chromium）开发人员控制台给出了以下错误："Uncaught SyntaxError:Unexpected reserved word"，并引用了appentrypoint.js

单击控制台中的appentrypoint.js显示如下所示：

(function (exports, require, module, __filename, __dirname, process, global) { import React from 'react';
window.React = React;
export default function appEntryPoint(mountNode) {
  React.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);
}
});

appentrypoint.js的实际源文件如下所示：

import React from 'react';
window.React = React;
export default function appEntryPoint(mountNode) {
  React.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);
}

HTML文件如下所示：

<!DOCTYPE html>
<html>
<body >
<div id="root" class='section'>
</div>
    <script src="http://localhost:3000/dist/bundle.js"></script>
      <script type="text/javascript">
      (function () {
        var mountNode = document.getElementById('root');
        var appEntryPoint = require('./appentrypoint.js');
        appEntryPoint(mountNode);
      })();
      </script>
</body>
</html>

webpack.config.base看起来像这样：

var path = require('path');
module.exports = {
  module: {
    loaders: [{
      test: /'.jsx?$/,
      loaders: ['babel-loader'],
      exclude: /node_modules/
    }]
  },
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js',
    libraryTarget: 'commonjs2'
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    packageMains: ['webpack', 'browser', 'web', 'browserify', ['jam', 'main'], 'main']
  },
  plugins: [
  ],
  externals: [
    // put your node 3rd party libraries which can't be built with webpack here (mysql, mongodb, and so on..)
  ]
};

和webpack.config.development看起来是这样的：

/* eslint strict: 0 */
'use strict';
var webpack = require('webpack');
var webpackTargetElectronRenderer = require('webpack-target-electron-renderer');
var baseConfig = require('./webpack.config.base');

var config = Object.create(baseConfig);
config.debug = true;
config.devtool = 'cheap-module-eval-source-map';
config.entry = [
  'webpack-hot-middleware/client?path=http://localhost:3000/__webpack_hmr',
  './app/appentrypoint'
];
config.output.publicPath = 'http://localhost:3000/dist/';
config.module.loaders.push({
  test: /^((?!'.module).)*'.css$/,
  loaders: [
    'style-loader',
    'css-loader'
  ]
}, {
  test: /'.module'.css$/,
  loaders: [
    'style-loader',
    'css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!'
  ]
});

config.plugins.push(
  new webpack.HotModuleReplacementPlugin(),
  new webpack.NoErrorsPlugin(),
  new webpack.DefinePlugin({ "global.GENTLY": false }),
  new webpack.DefinePlugin({
    '__DEV__': true,
    'process.env': {
      'NODE_ENV': JSON.stringify('development')
    }
  })
);
config.target = webpackTargetElectronRenderer(config);
module.exports = config;

浏览器本身没有模块系统，因此包含require('./appentrypoint.js')的<script>标记如果不包含在捆绑包中，将无法运行。

假设您的webpack配置的其余部分是正确的，（乍一看，它看起来不错）您可以通过首先从HTML文件中删除第二个<script>块来解决这个问题。然后，您的HTML文件应该看起来像：

<!DOCTYPE html>
<html>
<body >
  <div id="root" class='section'></div>
  <script src="http://localhost:3000/dist/bundle.js"></script>
</body>
</html>

现在您需要修复appentrypoint.js，如下所示：

import React from 'react';
// if using ES6, best practice would be to switch "var" with "const" here
var mountNode = document.getElementById('root');
React.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);

这里的主要变化是，您在应用程序的根目录中定义了装载节点，然后立即告诉React.render（）在该节点上渲染组件。此外，您应该不需要window.React = React;。

这应该是可行的，但如果你运行的是最新版本的React，你可能会看到类似"警告：React.render已弃用"的内容。这是因为Facebook开发人员决定将React中与DOM相关的工具分离到一个完全独立的库React DOM中。因此，为了将来参考，您将npm install react-dom --save和您的根实际上看起来像这样：

import React from 'react';
import ReactDOM from 'react-dom';
const mountNode = document.getElementById('root');
ReactDOM.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);

在React 0.15.0及更高版本中，React.render()将不是一个函数，因此最好尽快养成使用新API的习惯。

相关文章：