react-image-crop

react-image-crop copied to clipboard

I'm using react-image-crop with Preact and webpack but I'm running into this error when rendering the component:

TypeError: Cannot read properties of undefined (reading 'current')

After some digging, I found that it is coming from react/jsx-runtime which is being included in the minified react-image-crop bundle.

We could mark react/jsx-runtime as an external in the webpack config, but this may break when using it as a UMD bundle.

Instead, we can switch the JSX runtime mode to 'classic' by changing the tsconfig.

As an added bonus, the bundle is 0.4KB smaller (gzipped) this way.

tl;dr: change JSX runtime to classic to fix an error from bundling react/jsx-runtime

Hey, thanks for this. jsx-runtime is supposed to make it easier to not use React 🤔

Did you try this?: https://preactjs.com/guide/v10/getting-started/#aliasing-in-webpack

const config = { 
   //...snip
  "resolve": { 
    "alias": { 
      "react": "preact/compat",
      "react-dom/test-utils": "preact/test-utils",
      "react-dom": "preact/compat",     // Must be below test-utils
      "react/jsx-runtime": "preact/jsx-runtime"
    },
  }
}

With the classic JSX runtime you didn't have to change anything and it just worked?

Thanks for your quick response!

Yep, I tried that—part of what puzzled me because I thought it should work—until I realised react/jsx-runtime was part of the react-image-crop JS bundle so webpack wasn't replacing it.

I didn't have to change anything else after switching to the classic runtime. It just worked.

Sorry forgot about this PR - it's published in 10.0.8