Next.js: componentDidMount not work on build mode

[martinvarelaaaa]

Bug report

The componentDidMount method no execute on production mode

Describe the bug

The method does not run in build mode. In the dev method yes.

To Reproduce

1. create a page
   `class Index extends React.Component {
   componentDidMount() {
   alert('Hola');
   }

   render() {
   return 'hello';
   }
   }`

2. execute dev mode and check the alert()

3. execute build and start, after check the alert()
4. componentDidMount not work

Expected behavior

I was waiting for the alert()

System information

• OS: macOS
• Browser: chrome
• Version of Next.js: 8.0.3

Thanks!

[martinvarelaaaa]

With the versión 7.0.2 works

[giuseppeg]

@martinvarelaaaa I just tried your snippet in a new app at it worked. Can you share a minimal test case which I can clone and try out?

[Donov4n]

@timneutkens can you explain why this issue has been closed without any explanation ?
I have the exact same problem with the latest version (8.0.3) ...

[timneutkens]

@Donov4n there was a comment from @giuseppeg who looked into it and can't reproduce. Without a clear reproduction we can't really look into issues. There's 164 open issues at this point in time, so we close issues that have been looked into and are not reproducible/actionable.

[PaulMacinic]

@Donov4n, @martinvarelaaaa I had the same issue while using 8.0.3. I updated Next to 8.0.4 and the issue is fixed.

[iMerica]

This issue persists. I need to do something that seems very simple: Make an XHR GET request from the client once the page has been loaded. I don't even need the response of this request.

I've tried two methods so far:

• Isometric fetch within componentDidMount of the Next.js page component.
• Isometric fetch within componentDidMount of a child component and render the child component.

Both work fine in dev, but not in my production environment using a so-called "self-hosted custom server" (Express JS).

[iMerica]

Please re-open @timneutkens

[timneutkens]

We have tests for the exact reproduction provided in this issue and it's passing fine, so no need to re-open.

[reinhardholl]

I am seeing similar behaviour to @iMerica. Did you manage to solve this one? My componentDidMount code works perfectly in dev mode but fails in production using a custom express server.

[Nickprovs]

I'm experiencing this as well.

Edit: I found how to fix it in my case.. @timneutkens

I'm using polyfills. My webpack in next.config.js looks just like the with-polyfills example.

Apparently the text-encoding module I was using did not play nice with npm and "require".
//Polyfill necessary for Joi on some browsers
if (typeof window["TextEncoder"] !== "function") {
const TextEncodingPolyfill = require("text-encoding");
....
}

I replaced it with another text encoder and that did the job.
//Polyfill necessary for Joi on some browsers
if (typeof window["TextEncoder"] !== "function") {
const TextEncodingShim = require("text-encoding-shim");
window["TextEncoder"] = TextEncodingShim.TextEncoder;
window["TextDecoder"] = TextEncodingShim.TextDecoder;
}

So it seems this was happening due to a broken polyfill in my case.