Issue in Production build

[nitiandiv]

Describe the bug Issue in Production build

To Reproduce Steps to reproduce the behavior: created bundle and deploy

Expected behavior it should open shown w/o any error

Desktop (please complete the following information): issue started coming in 1-2 days

react_devtools_backend.js:2574 TypeError: Super expression must either be null or a function at image-gallery.js:1094 at image-gallery.js:1093 at image-gallery.js:1092 at image-gallery.js:375 at Object. (image-gallery.js:4) at Object.1311 (image-gallery.js:4) at b (jobList?challenge_id=6114cddd5c90a30008b69f09:14) at Module.1338 (videoPart.js:114) at b (jobList?challenge_id=6114cddd5c90a30008b69f09:14) overrideMethod @ react_devtools_backend.js:2574 is @ react-dom.production.min.js:5058 r.callback @ react-dom.production.min.js:5568 da @ react-dom.production.min.js:3108 us @ react-dom.production.min.js:5182 (anonymous) @ react-dom.production.min.js:6408 t.unstable_runWithPriority @ scheduler.production.min.js:309 jn @ react-dom.production.min.js:2816 Nu @ react-dom.production.min.js:6204 cu @ react-dom.production.min.js:5895 (anonymous) @ react-dom.production.min.js:2851 t.unstable_runWithPriority @ scheduler.production.min.js:309 jn @ react-dom.production.min.js:2816 Qn @ react-dom.production.min.js:2846 U @ scheduler.production.min.js:203 T.port1.onmessage @ scheduler.production.min.js:94

Additional context Add any other context about the problem here.

[xiaolin]

This looks like a duplicate of #621. Can you explain a little more? The stack trace doesn't help much here. Are you able to get the component working in a development build?

[xiaolin]

For what it's worth, the demo site is using a latest production build of react-image-gallery.

https://www.linxtion.com/demo/react-image-gallery/

[ThatSkiPatroller]

I am currently having this same issue. The image gallery runs perfect locally, but when I try to deploy it I get the 'TypeError: Super expression must either be null or a function' error and I can only see the background color of the page, no components.

[jobindcruz]

I got same error in production build

[xiaolin]

Is there any issues with your imports? See https://stackoverflow.com/questions/30116430/reactjs-giving-error-uncaught-typeerror-super-expression-must-either-be-null-or

[Anilkumar18]

Face the same issue on a production build. Is there any solution found? I tried all the possibilities from the above link. Nothing can make work on it. Thanks in advance

[Muhzn]

I'm also having the same issue.

My issue got solved by downgrading the node version to 10.16.3

[jyelewis]

I'm seeing this same issue, seems to only occur when webpack minimize is enabled.

In webpack.config.js

optimization: {
  minimize: true,
}

[jeferbc]

Any solution? I have the same issue

[T0to22]

Any help or solution? Same issue here

[TomlDev]

Same issue here

[hu-milize]

Same issue here, who have good idea?

[BuckeyeCoder]

Same issue. Using create-react-app straight up, no ejected code. Looks like this project is abandoned.

[xiaolin]

There is a "can't replicate" label on this issue, if anyone can provide clear steps to reproduce It will help debug and solve this issue.

[gimurpe]

@xiaolin I think you can try with node 14.8.0 and webpack minimize enabled.

In webpack.config.js

optimization: {
  minimize: true,
}

[gimurpe]

@xiaolin I can confirm that after disabling webpack minimize the issue stoped occurring

[gimurpe]

If you don't want to disable the minimize property you can make this work with the following code:

Useful links: terser-webpack-plugin webpack optimization minimize

npm install terser-webpack-plugin --save-dev for webpack v5 npm install [email protected] --save-dev for webpack v4

webpack.config.js

const TerserPlugin = require('terser-webpack-plugin');

  optimization = {
    minimize: true,
    minimizer: [new TerserPlugin({ exclude: /\/node_modules\/react-image-gallery/ })],
  };

or

config-overrides.js

const TerserPlugin = require('terser-webpack-plugin');

config.optimization = { minimize: true, minimizer: [new TerserPlugin({ exclude: /\/node_modules\/react-image-gallery/ })], };

[superCoderDOM]

Same issue.

[PriyaJainDev]

Same issue. Seeing the comments above to add optimization: { minimize: true, } how to add this object with the new React v18?

[iamarturr]

Same issue...

[Murtala-1]

Same here

[xiaolin]

Closing this as steps to reproduce is not clear and there are many instances of this lib in production. If you're able to reproduce with this package isolated please list steps and repopen.

[greenais]

In case someone will bump here in search for any solution but "disable minimizing at all" - I can confirm that @gimurpe 's one works like charm (tested for Webpack 4). Thank you a lot, camarade!

[xiaolin]

FWIW, I tried to reproduce using the config below and was not able to replicate the issue, is it isolated to webpack < 5??

package.json

"react-image-gallery": "^1.1.1",
"terser-webpack-plugin": "^5.3.6",
"webpack": "^5.30.0",

webpack.config.js

  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },

[00simba]

here is what fixed it for me, thank you @gimurpe

config-overrides.js

const TerserPlugin = require('terser-webpack-plugin');

module.exports = function override(webpackConfig) {
    webpackConfig.optimization = 
      {
        minimize: true,
        minimizer: [new TerserPlugin({ exclude: /\/node_modules\/react-image-gallery/ })],
      }
    return webpackConfig;
  }

package.json

"terser-webpack-plugin": "^4.2.3",
"webpack": "^4.28.3"

few things to mention:

1. the image gallery was working fine locally but not in production
2. installed terser webpack plugin without --save-dev
3. was getting webpack version issues but added SKIP_PREFLIGHT_CHECK=true to .env

[iget-master]

I confirm that minification causes this, but it's a random issue. I'm working for a year on a project and now after a rebuild it just throw this error.

Infortunatelly @gimurpe workaround cannot fix here.

Removing the import to this pacakge stops the error, don't occur on dev, only on production minfiied.