React-pdf: Uncaught ReferenceError: window is not defined

[wanliyunyan]

in console

./node_modules/[email protected]@base64-js/index.js.exports.byteLength @ bootstrap:1
(anonymous)                                                                                                   @ bootstrap:758

in webpack/bootstrap : 1
var parentHotUpdateCallback = window["webpackHotUpdate"];  // window is not defined

in webpack/bootstrap : 758
return hotCreateRequire("./node_modules/[email protected]@pdfjs-dist/build/pdf.worker.js")(__webpack_require__.s = "./node_modules/[email protected]@pdfjs-dist/build/pdf.worker.js");

my package

 "webpack": "^4.5.0",

how to solve this problem?????

[wojtekmaj]

Hello,
Webpack 4 support is not yet announced as critical external dependency uses Webpack 3 internally. Therefore I'm not sure what's going on there.
What I can suggest you is following instructions for non Webpack environments instead (see README).

[wanliyunyan]

@wojtekmaj thanks for your answer,I close this issue

[wojtekmaj]

Update: React-PDF 4.0 comes with support for Webpack 4.0.

Here's a solution by @iki:

Also, if you get Uncaught ReferenceError: window is not defined. from pdf.js worker when running local webpack dev server with hot module reloading, then add globalObject: 'this' in the output section of webpack config, see https://github.com/webpack/webpack/issues/6642#issuecomment-371087342.

[Ivaneyko]

@wojtekmaj
This is no good solution
I think that most developers use to configure the application create-react-app. In this way, webpack.config is closed and you can't edit it

[mrarmyant]

@wojtekmaj I'm using webpack 4 and the latest version of this package and am getting this issue. Has anyone found a good fix? I'm using create react-app. If I import the package directly it doesnt find anything, if I import from "react-pdf/dist/entry.webpack" I get it to say PDF Loading and Page 1 of ____ with that error in the console. This is with a create-react-app.

[1uokun]

same issue and need help🚑

import pdfjs from 'pdfjs-dist/webpack';

pdfjs.getDocument(url).then(pdfDocument => {
  //...
})

[Marlendo]

change node_modules\react-scripts\config\webpack.config.js
add this line from

output: {
++   globalObject: 'this'
}

example:

output: {
      globalObject: 'this', 
      // The build folder.
      path: isEnvProduction ? paths.appBuild : undefined,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      // TODO: remove this when upgrading to webpack 5
      futureEmitAssets: true,
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
      // We inferred the "public path" (such as / or /my-project) from homepage.
      // We use "/" in development.
      publicPath: publicPath,
      // Point sourcemap entries to original disk location (format as URL on Windows)
      devtoolModuleFilenameTemplate: isEnvProduction
        ? info =>
          path
            .relative(paths.appSrc, info.absoluteResourcePath)
            .replace(/\\/g, '/')
        : isEnvDevelopment &&
        (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
    },

[jasonrberney]

I am having the same issue.

Is the above a long term solution?

I don't have a react-scripts folder in my node_modules. Wondering where this folder came from?

Environment:
"react": "^16.6.0",
"webpack": "^4.12.0",
"webpack-dev-server": "^3.1.4",
"@babel/core": "^7.0.0",
"react-pdf": "^4.1.0"

[wojtekmaj]

Yeah, suggested solution is globalObject: this. https://github.com/wojtekmaj/react-pdf/issues/190#issuecomment-447286187

[Rahul-Sagore]

Is there a solution for for Create-React-App project. I am facing similar issue

Uncaught ReferenceError: window is not defined
    at bootstrap:1
    at bootstrap:788

[wojtekmaj]

That should work in Create-React-App, unless it's very outdated, since they did exactly what's suggested as a solution, almost a year ago:

https://github.com/facebook/create-react-app/pull/7742/files

[nicholasbca]

change node_modules\react-scripts\config\webpack.config.js
add this line from

output: {
++   globalObject: 'this'
}

example:

output: {
      globalObject: 'this', 
      // The build folder.
      path: isEnvProduction ? paths.appBuild : undefined,
      // Add /* filename */ comments to generated require()s in the output.
      pathinfo: isEnvDevelopment,
      // There will be one main bundle, and one file per asynchronous chunk.
      // In development, it does not produce real files.
      filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',
      // TODO: remove this when upgrading to webpack 5
      futureEmitAssets: true,
      // There are also additional JS chunk files if you use code splitting.
      chunkFilename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].chunk.js'
        : isEnvDevelopment && 'static/js/[name].chunk.js',
      // We inferred the "public path" (such as / or /my-project) from homepage.
      // We use "/" in development.
      publicPath: publicPath,
      // Point sourcemap entries to original disk location (format as URL on Windows)
      devtoolModuleFilenameTemplate: isEnvProduction
        ? info =>
          path
            .relative(paths.appSrc, info.absoluteResourcePath)
            .replace(/\\/g, '/')
        : isEnvDevelopment &&
        (info => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')),
    },

thank you, this solution work for me