"self" is not defined error on server side generated entry file

[annelin07]

💬 Questions and Help

Loadable Components project is young, but please before asking your question:

• Read carefully the README of the project
  YES
• Search if your answer has already been answered in old issues
  YES
  After you can submit your question and we will be happy to help you!

Hello,
Thanks for the SSR example, I followed the example, the differences from the SSR example vs mine are:

1. instead of using webpack-dev-middle for express, I'm using webpack-dev-server
2. instead of starting webpack-dev-server from Nodejs API, I'm running webpack-dev-server from command line for hapi, and added the writeToDisk option to devServer.

Now on server side when it calls

  const nodeExtractor = new ChunkExtractor({ statsFile: webStats });
  const { default: App } = nodeExtractor.requireEntrypoint(); 

which tries to require server side entry file - dist/js/node/main.bundle.dev.js, I'm getting error on window is not defined:

"error":"self is not defined","errorStack":"ReferenceError: self is not defined\n    at Object.<anonymous> (webpack:///(webpack)-dev-server/client:217:1)\n    at Object.../../node_modules/webpack-dev-server/client/index.js?http://localhost:2992

The error seems to come from webpack-dev-server referencing self: https://github.com/webpack/webpack-dev-server/blob/2f7f05276e10a2ce408e0903982b8bbe07699182/client-src/default/index.js#L46

Tried as suggest here - markdalgleish/static-site-generator-webpack-plugin#130 with

output: {
  // ...
  globalObject: "this"
}

or

output: {
  // ...
  globalObject: `typeof self !== 'undefined' ? self : this`
}

even disabling HMR, none works.

Any idea how to resolve this? Appreciate your help!

Thanks

[luanlucho]

How did you solve it?

[rxkevin]

This did the trick for me:

output: {
  // ...
  globalObject: `typeof self !== 'undefined' ? self : this`
}

[bennycode]

What's the magic behind globalObject?

I am receiving the error ReferenceError [Error]: self is not defined and webpack's stacktrace points me to the line of var chunkLoadingGlobal = self["webpackChunk_wireapp_cryptobox"]. When I am using globalObject: "this", then webpack creates var chunkLoadingGlobal = this["webpackChunk_wireapp_cryptobox"] but throws TypeError [Error]: Cannot read property 'webpackChunk_wireapp_cryptobox' of undefined. 😥

[ajayjaggi97]

Were you able to solve this?? I am getting the same error but my use case is different..

[jaieds]

This did the trick for me:

output: {
  // ...
  globalObject: `typeof self !== 'undefined' ? self : this`
}

This solution worked for me. Thanks 🤩

[Rayyan-ops203]

⨯ ReferenceError: self is not defined
at webpack_require (C:\Desktop Files\Codehaste\jj3-frontend.next\server\webpack-runtime.js:33:42)
at eval (./src/app/settings/components/SettingView.tsx:9:75)
at (ssr)/./src/app/settings/components/SettingView.tsx (C:\Desktop Files\Codehaste\jj3-frontend.next\server\app\settings\page.js:304:1)
at webpack_require (C:\Desktop Files\Codehaste\jj3-frontend.next\server\webpack-runtime.js:33:42)
at eval (./src/app/settings/page.tsx:9:81)
at (ssr)/./src/app/settings/page.tsx (C:\Desktop Files\Codehaste\jj3-frontend.next\server\app\settings\page.js:326:1)
at Object.webpack_require [as require] (C:\Desktop Files\Codehaste\jj3-frontend.next\server\webpack-runtime.js:33:42)
digest: "296502526"
GET /settings/ 500 in 14968ms

Iam getting this error
Does anyone know how to solve it..?