[Bug]: Loading plugin causes error "The requested module does not provide an export named "default"

[radoslaw-sz]

Package.json file

{
  "name": "medusa-starter-default",
  "version": "0.0.1",
  "description": "A starter for Medusa projects.",
  "author": "Medusa (https://medusajs.com)",
  "license": "MIT",
  "keywords": [
    "sqlite",
    "postgres",
    "typescript",
    "ecommerce",
    "headless",
    "medusa"
  ],
  "scripts": {
    "build": "medusa build",
    "seed": "medusa exec ./src/scripts/seed.ts",
    "start": "medusa start",
    "dev": "medusa develop"
  },
 "dependencies": {
    "@medusajs/admin-sdk": "^2.4.0",
    "@medusajs/framework": "^2.4.0",
    "@medusajs/medusa": "^2.4.0",
    "@medusajs/cli": "^2.4.0",
    "@medusajs/icons": "^2.4.0",

    "@mikro-orm/core": "^6.4.4",
    "@mikro-orm/knex": "^6.4.4",
    "@mikro-orm/migrations": "^6.4.4",
    "@mikro-orm/postgresql": "^6.4.4",
    "awilix": "^8.0.1",
    "pg": "^8.13.0",

    "@rsc-labs/medusa-store-analytics-v2": "^0.0.3"
  },
  "devDependencies": {
    "@mikro-orm/cli": "^6.4.4",
   
    "@swc/jest": "^0.2.36",
    "medusa-test-utils": "rc",
    "jest": "^29.7.0",

    "@types/node": "^20.0.0",
    "@swc/core": "1.5.7",
    "ts-node": "^10.9.2",
    "typescript": "^5.6.2",

    "@types/react": "^18.3.2",
    "@types/react-dom": "^18.2.25",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vite": "^5.2.11"
  },
  "resolutions": {
    "**/@medusajs/medusa-cli": "link:./node_modules/@medusajs/medusa-cli"
  },
  "engines": {
    "node": ">=20"
  }
}

Node.js version

v21.7.2

Database and its version

PostgreSQL 16.2

Operating system name and version

Ubuntu 22.04.3 LTS

Browser name

Chrome

What happended?

It might be related to #11229.

We published our plugin to NPM here - https://www.npmjs.com/package/@rsc-labs/medusa-store-analytics-v2.

However, when trying to use as a plugin, we see the error, which blocks application (only blank screen is visible).

The issue is related to one of the package used by the plugin - @emotion/react which is needed to use @mui/material - the most popular React UI framework.

When working locally with the Medusa app (as a module) everything works perfectly - Medusa Store Analytics is loaded as module and visible in Admin.

However, when it has been published to NPM, loading it as a plugin gives such error:

Uncaught SyntaxError: The requested module '/app/@fs/home/ubuntu/rsc/medusa/app-medusa/node_modules/hoist-non-react-statics/dist/hoist-non-react-statics.cjs.js?v=d64e2fac' does not provide an export named 'default' (at emotion-react-_isolated-hnrs.browser.development.esm.js?v=d64e2fac:1:8)

It looks like it is related to how Medusa app is bundled (using ES modules) and for some reason, for the plugins is it is being built differently.

I would love to get some feedback from the Medusa Core Team as it can be some kind of low level issue and some special difference how plugins are being loaded to app.

Expected behavior

Plugin shall be loaded and working. It works when copy the code, but it is not working when loading as a plugin.

Actual behavior

Plugin is not being loaded by the app and only blank screen is visible.

Link to reproduction repo

N/A - clean Medusa repository and @rsc-labs/medusa-store-analytics-v2 loaded as plugin

[saranshisatgit]

Somewhere inside your modules , there is some npm module that does is probably some older version or probably because of how its getting transpiled and how ES6 is loaded or handled

There is an issue storybookjs/builder-vite#37

Adding @emotion/react to optimizeDeps solves the issue

storybookjs/builder-vite#37

[radoslaw-sz]

Somewhere inside your modules , there is some npm module that does is probably some older version or probably because of how its getting transpiled and how ES6 is loaded or handled

There is an issue storybookjs/builder-vite#37

Adding @emotion/react to optimizeDeps solves the issue

storybookjs/builder-vite#37

thanks @saranshisatgit - I saw this optimizeDeps solution, but here the issue is that from the plugin perspective I cannot do that - it is inside how Medusa built plugins (this is my understanding).
Also, it is working normally with Medusa (not as a plugin), so there is some difference how Medusa built plugins vs standalone src/modules.

[kasperkristensen]

Hi @radoslaw-sz, you can add dependencies to optimizeDeps in the medusa-config.ts of the Medusa app, which the plugin is installed in.

module.exports = defineConfig({
  admin: {
    vite: () => {
      return {
        optimizeDeps: {
          include: ["@emotion/react"], // Will be merged with config that we use to run and build the dashboard.
        },
      };
    },
  },
  projectConfig: { ... },
})

But thats obviously not ideal if needed in order for users to be able to use your plugin. The issue stems from conflicts that occur because the medusa app is a CJS project, but the dashboard is ESM.

We are investigating how/if we can improve how we configure Vite to prevent these kinds of issues until we are ready to migrate Medusa to a ESM project. And I'll report back once we have some more info or a fix.

[radoslaw-sz]

hi @kasperkristensen - thank you very much for your response. Indeed, adding configuration to medusa-config.js fixed the issue (I needed to add some more packages, but finally it works).
As you mentioned, it is some kind of additional work for the clients to use the plugins, so will be great to have it out of the box.
Anyway I am grateful for your help, as it was quite high prio for me and it is working after proposed workaround.

[trevster344]

Hi @radoslaw-sz, you can add dependencies to optimizeDeps in the medusa-config.ts of the Medusa app, which the plugin is installed in.

module.exports = defineConfig({
  admin: {
    vite: () => {
      return {
        optimizeDeps: {
          include: ["@emotion/react"], // Will be merged with config that we use to run and build the dashboard.
        },
      };
    },
  },
  projectConfig: { ... },
})

But thats obviously not ideal if needed in order for users to be able to use your plugin. The issue stems from conflicts that occur because the medusa app is a CJS project, but the dashboard is ESM.

We are investigating how/if we can improve how we configure Vite to prevent these kinds of issues until we are ready to migrate Medusa to a ESM project. And I'll report back once we have some more info or a fix.

@kasperkristensen any updates on this or potential remedies? I’ve got a scenario where importing Dayjs into a widget causes react-is to not export properly. Not entirely certain what the connection is but commenting out the code allows the admin dashboard to render properly again. I’m assuming this has something to do with cjs and esm.

[MounsifChr]

@kasperkristensen any updates on this?

[kasperkristensen]

Hi @MounsifChr, yes I was able to find a fix for this, the PR is here #11789 feel free to test it out with the snapshots. Currently, we are planning to release it next week.