search

onurzorluer / react-image-file-resizer

Resize Local Images with React 🌄 🌅
MIT License
313 stars 41 forks source link

imageFileResizer not a function after building with Vite #68

Open ivanros opened 2 years ago

ivanros commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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

gzimbron commented 1 year ago

I got the same error , someone fixed this?

ysageev commented 1 year ago

Same problem. Vite 3.0

w6fux5 commented 1 year ago

same issue

mperezguendulain commented 1 year ago

Same issue

tkejr commented 1 year ago

same issue

tkejr commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

any updates on this?

FauricioValencia commented 1 year ago

same issue

nattapatpon commented 1 year ago

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

Sachin249 commented 10 months ago

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 commented 5 months ago

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 :)