imageFileResizer not a function after building with Vite

[ivanros]

Describe the bug Using Vitejs this is the only library that is unable to compile correctly in production. I understand that it is related to the way of compiling the library because if I copy and paste the code in my repository I get the Resizer to compile correctly. Uncaught (in promise) TypeError: er.imageFileResizer is not a function It may have related with the construction of the project in CommonJS.

To Reproduce Steps to reproduce the behavior: Build project with Vitejs.

Expected behavior Well, it would be awesome if it would just work. :)

Desktop (please complete the following information): OS: Ubuntu 20.04 Browser Chrome Edge

This is basically the same problem that this user had in issue https://github.com/onurzorluer/react-image-file-resizer/issues/60

[kanru]

Related issue reported to vitejs https://github.com/vitejs/vite/issues/4935, looks like the commonjs2 build target is not compatible with the default vite config.

[ksi9302]

Was anyone able to use this library with vite somehow? dying to know..

[gzimbron]

I got the same error , someone fixed this?

[ysageev]

Same problem. Vite 3.0

[tomichGIT]

vite 3.0.9 still same issue :(

[w6fux5]

same issue

[mperezguendulain]

Same issue

[tkejr]

same issue

[tkejr]

Alright I figured out a solution

1. First thing go here and copy the whole file https://github.com/onurzorluer/react-image-file-resizer/blob/3a0fab44211f985aaf048b4fa71027b7149da90e/src/index.js
2. Make a file called Resizer.js in your src directory in react.
3. Paste the code you copied in this file
4. Whenever you want to use this function import Resizer from "relative path to Resizer.js";
5. Remove import Resizer from "react-image-file-resizer"; wherever it is used

[DayBr3ak]

This is not really helpful. I don't want to locally fork the module

My workaround is to do

import Resizer from "react-image-file-resizer";
// @ts-expect-error https://github.com/onurzorluer/react-image-file-resizer/issues/68
const resizer: typeof Resizer = (Resizer.default || Resizer);

[mikejackowski]

any updates on this?

[FauricioValencia]

same issue

[nattapatpon]

same issue typeError: buildExports.imageFileResizer is not a function at onChange

[Sachin249]

Alright I figured out a solution

1. First thing go here and copy the whole file https://github.com/onurzorluer/react-image-file-resizer/blob/3a0fab44211f985aaf048b4fa71027b7149da90e/src/index.js
2. Make a file called Resizer.js in your src directory in react.
3. Paste the code you copied in this file
4. Whenever you want to use this function import Resizer from "relative path to Resizer.js";
5. Remove import Resizer from "react-image-file-resizer"; wherever it is used

it works , thanks for your help

[shahidmau]

Alright I figured out a solution

1. First thing go here and copy the whole file https://github.com/onurzorluer/react-image-file-resizer/blob/3a0fab44211f985aaf048b4fa71027b7149da90e/src/index.js
2. Make a file called Resizer.js in your src directory in react.
3. Paste the code you copied in this file
4. Whenever you want to use this function import Resizer from "relative path to Resizer.js";
5. Remove import Resizer from "react-image-file-resizer"; wherever it is used

It worked.. thanks :)