I am using react-dropzone is my remote app & getting this error "useDropzone is not a function", while if i remove it from my vite config, project builds & runs successfully

[ubaidrajputtmetastaq]

This is my Vite config file.

import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import federation from "@originjs/vite-plugin-federation";

export default defineConfig({ plugins: [ react(), federation({ name: "remote", filename: "remoteEntry.js", exposes: { "./Storebuilder": "./src/builder", }, shared: [ "react", "react-dom", "axios", "immer", "react-beautiful-dnd", "react-dropzone", "react-hook-form", "react-modal", "zustand", ], }), ], build: { modulePreload: false, target: "esnext", minify: false, cssCodeSplit: false, }, });

Please see the error on my console with the attached image.

I am able to run my app if I remove "react-dropzone" from the shared config.

Please get back to me on this.

[JClackett]

Yeah, also have the exact same issue

[omrirz]

@JClackett @ubaidrajputtmetastaq try:

import * as reactDropzone from "react-dropzone"; const { useDropzone } = reactDropzone;

[rolandjitsu]

@omrirz thanks for the suggested fix. Do you know why is it behaving that way? Is it related to ESM?