未捕获的语法错误：意外的标记<reactjsreact-pdf

Question

未捕获的语法错误：意外的标记<reactjsreact-pdf

Kyl*_*e U 5 javascript pdf reactjs webpack

我目前正在尝试使用react-pdf库（ https://www.npmjs.com/package/react-pdf ）在我的应用程序中渲染pdf 。尽管说明很简单，但我似乎很难让它发挥作用。

目前，尽管构建成功，但我的开发工具控制台中出现错误，并且终端中没有任何错误：

    1a4953075f808eb6a767.worker.js:1 Uncaught SyntaxError: Unexpected token <

Run Code Online (Sandbox Code Playgroud)

对源代码的检查显示了我的 index.html 入口点的副本。

该库的 webpack.config 示例可以在这里找到：https://github.com/wojtekmaj/react-pdf/blob/master/test/webpack.config.js#L19-L22

需要明确的是，在此之前 webpack 已正确配置，并且此错误仅存在于我实现此库的分支上。

webpack.config.js

'use strict'

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')


module.exports = {
  entry: './client/app.jsx',
  output: {
    path: path.join(__dirname, './public/dist'),
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    rules: [
      {
        test: /\.pdf$/,
        use: 'url-loader'
      }, {
        test: /\.jsx?$/,
        include: /client/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        options: {
          presets: ['react', 'es2015'],
        }
      }, {
        test: /\.(scss|css)$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }, {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              mimetype: 'image/png'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new CopyWebpackPlugin([
      { from: './public/index.html' },
      { from: './client/assets/resume.pdf' },
      { from: 'node_modules/pdfjs-dist/cmaps/', to: 'cmaps/' }
    ])
  ],
  resolve: {
    extensions: ['.js', '.jsx', '.png', '.pdf', '*']
  }
}

Run Code Online (Sandbox Code Playgroud)

索引.html

<!DOCTYPE html>
<html lang="en">
<head>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <title>XXXXXXXXXX</title>

  <link type="text/css" href="/client/styles/index.scss" />

  <!-- browser reset -->
  <link type="text/css" rel="stylesheet" src="//normalize-css.googlecode.com/svn/trunk/normalize.css" />

  <!-- fonts -->
  <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono" >

  <script src="dist/bundle.js" defer></script>

</head>
<body>

  <div id="app"></div>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

简历.jsx

'use strict'

import React, { Component } from 'react'
import { Document, Page, setOptions } from 'react-pdf/build/entry.webpack'

import resume from '../assets/resume.pdf'


setOptions({
  cMapUrl: 'cmaps/',
  cMapPacked: true
})


export default class Resume extends Component {
  constructor (props) {
    super(props)
    this.state = {
      numPages: null,
      pageNumber: 1,
    }
  }

  onDocumentLoad ({ numPages }) {
    this.setState({ numPages })
  }

  render() {
    const { pageNumber, numPages } = this.state

    return (
      <div>
        <Document
          file={ resume }
          onLoadSuccess={ this.onDocumentLoad }
        >
          <Page pageNumber={ pageNumber } />
        </Document>
        <p>Page { pageNumber } of { numPages }</p>
      </div>
    )
  }
}

Run Code Online (Sandbox Code Playgroud)

这也是我在 stackoverflow 上发布的第一个问题，所以如果我做错了什么，我深表歉意。

更新

我已找到从 Resume.jsx 文件中的“react-pdf/build/entry.webpack”导入的错误。由于我对这种类型的文件不熟悉，我无法立即确定错误的原因，但我仍在调查它。这是有问题的文件：

入口.webpack.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.setOptions = exports.Page = exports.Outline = exports.Document = undefined;

var _Document = require('./Document');

var _Document2 = _interopRequireDefault(_Document);

var _Outline = require('./Outline');

var _Outline2 = _interopRequireDefault(_Outline);

var _Page = require('./Page');

var _Page2 = _interopRequireDefault(_Page);

var _setOptions = require('./setOptions');

var _setOptions2 = _interopRequireDefault(_setOptions);

var _util = require('./shared/util');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

if (_util.isLocalFileSystem) {
  // eslint-disable-next-line no-console
  (0, _util.warnOnDev)('You are running React-PDF from your local file system. PDF.js Worker may fail to load due to browser\'s security policies. If you\'re on Google Chrome, you can use --allow-file-access-from-files flag for debugging purposes.');
}

var pdfjs = require('pdfjs-dist/webpack');

var setOptions = (0, _setOptions2.default)(pdfjs);

exports.Document = _Document2.default;
exports.Outline = _Outline2.default;
exports.Page = _Page2.default;
exports.setOptions = setOptions;

Run Code Online (Sandbox Code Playgroud)

Answer 1

Kyl*_*e U 1

我已经为我的情况提出了一种合适的解决方法，但是对于可能需要渲染多个页面的任何人来说，这并不是最佳选择。我只是选择不使用工作人员并解决了 this 绑定的问题，以允许它在没有工作人员的情况下工作。

Resume.jsx 内部

import { Document, Page, setOptions } from 'react-pdf/build/entry.noworker'

...

  constructor (props) {
    super(props)
    this.state = {
      numPages: null,
      pageNumber: 1
    }
    this.onDocumentLoad = this.onDocumentLoad.bind(this) // ADD THIS LINE
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	8 年，3 月前
查看次数：	9988 次
最近记录：	8 年，3 月前

未捕获的语法错误：意外的标记&lt;reactjsreact-pdf

未捕获的语法错误：意外的标记<reactjsreact-pdf