Question

有人可以建议为什么会出现这个错误吗？谢谢！

电子（Chromium）开发人员控制台提供此错误：“未捕获的SyntaxError：意外的保留字”并引用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;

Answer 1

浏览器本身没有模块系统，因此包含<script>的{{1}}标记在未包含在捆绑包中的情况下将无法运行。

假设您的webpack配置的其余部分是正确的（快速浏览，看起来不错），您可以先从HTML文件中删除第二个require('./appentrypoint.js')块来解决此问题。您的HTML文件应如下所示：

<script>

现在您需要修复<!DOCTYPE html> <html> <body > <div id="root" class='section'></div> <script src="http://localhost:3000/dist/bundle.js"></script> </body> </html>，如下所示：

appentrypoint.js

这里的主要变化是您在应用程序的根目录中定义了mount节点，然后立即告诉React.render（）在该节点上呈现您的组件。此外，您不应该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，您可能会看到类似“警告：不推荐使用React.render”的内容。这是因为Facebook开发人员决定将与DOM相关的工具从React分离到一个完全独立的库React-DOM。因此，为了将来参考，你会window.React = React;，你的root实际上看起来像这样：

npm install react-dom --save

在React import React from 'react'; import ReactDOM from 'react-dom'; const mountNode = document.getElementById('root'); ReactDOM.render(<img src='http://tinyurl.com/lkevsb9' />, mountNode);及更高版本中，0.15.0将不是一个函数，因此最好养成使用新API的习惯。

电子，反应，webpack“Uncaught SyntaxError：意外的保留字”

1 个答案: