javascript - Uncaught SyntaxError: Unexpected token < reactjs react-pdf

I am currently attempting to render a pdf within my application using the react-pdf library (). Despite the simple instructions, I seem to be having quite a bit of difficulty getting this to work.

Currently, I am getting an error in my dev-tools console despite a successful build, and without any errors in my terminal:

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

An examination of the source reveals a copy of my index.html entry point.

An example of a webpack.config for this library can be found here: .config.js#L19-L22

Just to be clear, webpack was configured correctly prior to this, and this error only exists on the branch where I implement this library.

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_ponents)/,
        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', '*']
  }
}

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/svn/trunk/normalize.css" />

  <!-- fonts -->
  <link type="text/css" rel="stylesheet" href="+Mono" >

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

</head>
<body>

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

</body>
</html>

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

This is also the first question that I have posted on stackoverflow, so I apologize if there is anything that I have done incorrectly.

UPDATE

I have tracked down the error to where I import from 'react-pdf/build/entry.webpack' in my Resume.jsx file. Due to my unfamiliarity with this type of file, I'm unable to immediately ascertain the cause of the error, but I am still looking into it. Here is the file in question:

entry.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;

I am currently attempting to render a pdf within my application using the react-pdf library (https://www.npmjs./package/react-pdf). Despite the simple instructions, I seem to be having quite a bit of difficulty getting this to work.

Currently, I am getting an error in my dev-tools console despite a successful build, and without any errors in my terminal:

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

An examination of the source reveals a copy of my index.html entry point.

An example of a webpack.config for this library can be found here: https://github./wojtekmaj/react-pdf/blob/master/test/webpack.config.js#L19-L22

Just to be clear, webpack was configured correctly prior to this, and this error only exists on the branch where I implement this library.

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_ponents)/,
        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', '*']
  }
}

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./svn/trunk/normalize.css" />

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

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

</head>
<body>

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

</body>
</html>

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

This is also the first question that I have posted on stackoverflow, so I apologize if there is anything that I have done incorrectly.

UPDATE

entry.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;

Share Improve this question edited Feb 9, 2018 at 23:50 asked Feb 9, 2018 at 7:11 Kyle U 3051 gold badge3 silver badges13 bronze badges

file={ resume } ??? What actually is resume? It isn't declared.. – Basheer Kharoti Commented Feb 9, 2018 at 7:54
import resume from '../assets/resume.pdf' – Kyle U Commented Feb 9, 2018 at 15:30

Add a ment |

1 Answer 1

Sorted by: Reset to default 1

I have e up with a suitable work-around for my case, however this is not optimal for anyone that may need to render more than one page. I simply chose not to use the worker and resolved an issue with the this binding to allow it to work without a worker.

inside of 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
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Uncaught SyntaxError: Unexpected token < reactjs react-pdf - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)