Error: self is not defined (compiling under next.js)

[gjhltn]

I'm seeing this error message in my console with the latest react and next.js 13

any ideas?

ReferenceError: self is not defined
    at Object.776 (webpack-internal:///(sc_clien
t)/../../../node_modules/react-customize-token-i
nput/lib/index.js:2:28536)
    at r (webpack-internal:///(sc_client)/../../
../node_modules/react-customize-token-input/lib/
index.js:2:35559)
    at Object.971 (webpack-internal:///(sc_clien
t)/../../../node_modules/react-customize-token-i
nput/lib/index.js:2:27685)
...

I'm afraid it's not a very informative stack trace as the lib is a one line file :[

BUT self appears only once in it...

[mejackreed]

This seemed to regress from 1.7.0 -> 2.0.0

[gjhltn]

thanks @mejackreed rolling back the version has worked for me. much appreciated.

[seawind543]

It looks like this issue: https://stackoverflow.com/questions/64639839/typescript-webpack-library-generates-referenceerror-self-is-not-defined, which has been mentioned in #53 too.

[gjhltn]

AH thank you this is v helpful. Much appreciated!

[gjhltn]

Apologies for opening this up again, but for one reason and another using the rolled-back version isn't possible for me any more, and setting globalObject doesn't work under next as far as I am able to tell.

I can't be the only person using Next can I? 🙄

I'm so sorry to ask, but this is a real dealbreaker and it's killing me frankly - I would be hugely hugely grateful for any help.

[gjhltn]

I've build a minimal test case here to demonstrate two mitigations that dont work (changing configuration as above and using next/dynmamic. I can't find a workaround for this. Despair.

https://github.com/gjhltn/tokendemo

[seawind543]

Hi @gjhltn,

Thank you for raising this issue, and providing a demo code to understand what happened!

I had make investigate with the demo code. How about applying dynamic import?
https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr

As-Is

import TokenInput from 'react-customize-token-input';

To-Be

import dynamic from 'next/dynamic';

// https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr
const TokenInput = dynamic(
  () => import('react-customize-token-input'),
  { ssr: false }
);

Reference: Fixing ‘self’ is not defined error in Next.js when importing client-side libraries

[gjhltn]

hi @mejackreed thanks for the replywhich is amazingly quick - kudos! - as you'll see from the repo, though i did try the dynamic import route, (in the branch dynamic) but that generates a similar error. cant rule out pilot error, but i think ive done it as its supposed to be! :-)

[gjhltn]

Update: I have some progress!

In the example above i was using the modified next config. by reverting the next config to the vendor default, i was able to get it working. So yes in summary the dynamic route does indeed work. Yay.

[seawind543]

Hi @gjhltn, Good to know the dynamic route works for you!

By the way, I also released version 2.5.2 to help address this issue in the morning. Feel free to try it and report issues if encounter any~

[gjhltn]

Amazing. I can't wait! It's good that there is a workaround, but so much better if things just work.

thanks man - I really respect how much you care about this.