Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[@medusajs/js-sdk] ERR_UNSUPPORTED_DIR_IMPORT when using the js-sdk #9573

Open
RATIU5 opened this issue Oct 14, 2024 · 1 comment
Open

[@medusajs/js-sdk] ERR_UNSUPPORTED_DIR_IMPORT when using the js-sdk #9573

RATIU5 opened this issue Oct 14, 2024 · 1 comment

Comments

@RATIU5
Copy link

RATIU5 commented Oct 14, 2024

Bug report

Describe the bug

When installing and and using the @medusajs/js-sdk and write the code to setup a client, it throws an ERR_UNSUPPORTED_DIR_IMPORT error similar to the following:

node:internal/modules/esm/resolve:251                                                                                        
    throw new ERR_UNSUPPORTED_DIR_IMPORT(path, fileURLToPath(base), String(resolved));                                       
          ^                                                                                                                  
                                                                                                                             
Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import '/Users/username/storefront/node
_modules/.pnpm/@[email protected][email protected][email protected][email protected]_@[email protected]_/node_module
s/@medusajs/js-sdk/dist/esm/admin' is not supported resolving ES modules imported from /Users/username/storefront/node_modules/
.pnpm/@[email protected][email protected][email protected][email protected].
9_@[email protected]_/node_modules/@medusajs/js-sdk/dist/esm/index.js                                                        
    at finalizeResolution (node:internal/modules/esm/resolve:251:11)                                                         
    at moduleResolve (node:internal/modules/esm/resolve:914:10)                                                              
    at defaultResolve (node:internal/modules/esm/resolve:1038:11)                                                            
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:557:12)                                                 
    at ModuleLoader.resolve (node:internal/modules/esm/loader:525:25)                                                        
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:246:38)                                                   
    at ModuleJob._link (node:internal/modules/esm/module_job:126:49) {                                                       
  code: 'ERR_UNSUPPORTED_DIR_IMPORT',                                                                                        
  url: 'file:///Users/username/storefront/node_modules/.pnpm/@[email protected]
[email protected][email protected][email protected]_@[email protected]_/node_modules/@medusajs/js-sdk/dist/esm/admin'     
}                                                                                                                            
                                                                                                                             
Node.js v22.9.0

I got the same error using the following package managers:

  • npm v10.8.3
  • pnpm v9.12.1
  • yarn v1.22.22

System information

Medusa version (including plugins): Only @medusajs/js-sdk rc-4
Node.js version: 22.9.0
Database: Postgres 16
Operating system: macOS 15
Browser (if relevant): Arc (chromium)

Steps to reproduce the behavior

  1. Create a new storefront with a chosen framework (or initialize an empty/blank npm project)
  2. Add "type": "module", to your package.json
  3. Install the @medusajs/js-sdk package with version "rc"
  4. Run the server to see the error

Expected behavior

The error simply should not appear, and the client should import successfully.

Screenshots

If applicable, add screenshots to help explain your problem

Code snippets

I tested this error without a framework on an empty npm project, with this code inside run.js:

import Medusa from "@medusajs/js-sdk";

const client = new Medusa({
  baseUrl: "http://localhost:9000",
});

const test = client.store.cart.retrieve("test");
console.log(test);

Then I ran node run.js to replicate the error.

This is what the package.json looks like for this empty project:

{
  "name": "test",
  "version": "1.0.0",
  "main": "run.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "@medusajs/js-sdk": "rc"
  }
}

Additional context

My guess is that this has to do with the bundling/transpiling of the typescript to javascript in the js-sdk package.

@RATIU5
Copy link
Author

RATIU5 commented Oct 15, 2024

For the time being, I setup a temporary fix using the following script to rewrite all the imports and exports to be explicit in defining the file name:

const fs = require("fs");
const path = require("path");

function fixImports(dir) {
  const files = fs.readdirSync(dir);

  files.forEach((file) => {
    const filePath = path.join(dir, file);
    const stat = fs.statSync(filePath);

    if (stat.isDirectory()) {
      fixImports(filePath);
    } else if (file.endsWith(".js")) {
      let content = fs.readFileSync(filePath, "utf8");

      // Fix imports
      content = content.replace(
        /from\s+['"](\.[^'"]+)['"]/g,
        (match, importPath) => {
          const fullPath = path.resolve(path.dirname(filePath), importPath);
          let relativePath = path
            .relative(path.dirname(filePath), fullPath)
            .replace(/\\/g, "/");

          if (!relativePath.startsWith(".")) {
            relativePath = "./" + relativePath;
          }

          if (fs.existsSync(fullPath + ".js")) {
            return `from '${relativePath}.js'`;
          } else if (fs.existsSync(path.join(fullPath, "index.js"))) {
            return `from '${relativePath}/index.js'`;
          }
          return match;
        },
      );

      // Fix exports
      content = content.replace(
        /export\s+.*from\s+['"](\.[^'"]+)['"]/g,
        (match, exportPath) => {
          const fullPath = path.resolve(path.dirname(filePath), exportPath);
          let relativePath = path
            .relative(path.dirname(filePath), fullPath)
            .replace(/\\/g, "/");

          if (!relativePath.startsWith(".")) {
            relativePath = "./" + relativePath;
          }

          if (fs.existsSync(fullPath + ".js")) {
            return match.replace(exportPath, relativePath + ".js");
          } else if (fs.existsSync(path.join(fullPath, "index.js"))) {
            return match.replace(exportPath, relativePath + "/index.js");
          }
          return match;
        },
      );

      fs.writeFileSync(filePath, content);
    }
  });
}

const esmDir = path.join(
  __dirname,
  "..",
  "node_modules",
  "@medusajs",
  "js-sdk",
  "dist",
  "esm",
);
fixImports(esmDir);
console.log("Fixed ESM imports and exports for @medusajs/js-sdk");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant