Javascript 未捕获的语法错误：意外标记<；ReactJSReactPDF_Javascript_Reactjs_Pdf_Webpack

Javascript 未捕获的语法错误：意外标记<；ReactJSReactPDF

javascript reactjs pdf webpack

Javascript 未捕获的语法错误：意外标记<；ReactJSReactPDF,javascript,reactjs,pdf,webpack,Javascript,Reactjs,Pdf,Webpack,我目前正在尝试使用react pdf库（）在我的应用程序中呈现pdf。尽管有简单的说明，我似乎有相当多的困难让这个工作目前，尽管生成成功，但我的开发工具控制台中仍出现错误，并且终端中没有任何错误： 1a4953075f808eb6a767.worker.js:1 Uncaught SyntaxError: Unexpected token < index.html <!DOCTYPE html> <html lang="en"> <head>

我目前正在尝试使用react pdf库（）在我的应用程序中呈现pdf。尽管有简单的说明，我似乎有相当多的困难让这个工作

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

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

index.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>

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

Resume.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>
    )
  }
}

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
}

file={resume}

？？？什么才是真正的简历？未声明..从“../assets/resume.pdf”导入简历我有两个“意外令牌错误”，其中一个已被清除

'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;

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
}