[BUG]: Nextjs 15 can't find the index.mjs

rphlmr commented 1 week ago

Report hasn't been filed before.

[X] I have verified that the bug I'm about to report hasn't been filed before.

What version of `vscode-drizzle-orm` are you using?

No response

Are you using Cursor or any other VSCode fork?

[ ] yes

Is it related to `drizzle.run`?

[ ] yes

What version of `drizzle-lab` are you using?

*

What version of `@drizzle-lab/api` are you using?

*

Describe the Bug

Nextjs 15. Get the error that it can't find the index.mjs

ap-inflection commented 6 days ago

Hi! I'm getting this error as well.

I managed to fix it by installing drizzle-lab in my node_modules and editing the cli.js file directly.

It looks like import.meta.dirname is undefined in this handler: https://github.com/rphlmr/drizzle-lab/blob/fce9454acf43a5357d9aab4f8ace284962558a56/apps/cli/cli.ts#L81-L99

I wrote this (rather hack-y) way of getting the directory:

Replaced this:

process.env.NODE_ENV === "development"
      ? spawnSync("vite", ["--host"], {
          stdio: "inherit",
        })
      : spawnSync(process.execPath, [`visualizer/server/index.mjs`], {
          stdio: "inherit",
          cwd: import.meta.dirname,
          env: {
            ...process.env,
            NODE_ENV: "production",
          },
        });

With:

const cwd = import.meta.url.replace("file://", "").replace("/cli.js", "")

    process.env.NODE_ENV === "development" ? spawnSync("vite", ["--host"], {
      stdio: "inherit"
    }) : spawnSync(process.execPath, [`visualizer/server/index.mjs`], {
      stdio: "inherit",
      cwd,
      env: {
        ...process.env,
        NODE_ENV: "production"
      }
    });

Great work with the visualizer btw!

rphlmr commented 6 days ago

Hum 🧐 let me guess, is it cjs and not esm? Are on type "module" in your package.json? (esm)

rphlmr commented 6 days ago

I'll look at that this evening. Did you try the vscode extension?

rphlmr commented 6 days ago

I have installed a fresh nextjs 15 project and I can't reproduce.

{
  "name": "n15",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "drizzle-orm": "^0.36.4",
    "next": "15.0.3",
    "react": "19.0.0-rc-66855b96-20241106",
    "react-dom": "19.0.0-rc-66855b96-20241106"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "drizzle-kit": "^0.28.1",
    "eslint": "^8",
    "eslint-config-next": "15.0.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  },
  "overrides": {
    "drizzle-orm": {
      "react": "$react"
    }
  }
}

I wonder what is causing this issue. You are the second person to report it.

rphlmr commented 6 days ago

If you could try with --debug flag too, maybe there is some logs

ap-inflection commented 5 days ago

Hi @rphlmr,

I think I cracked it: import.meta.dirname is still a release candidate and only in the latest versions of node: https://nodejs.org/api/esm.html#importmetadirname

I'm running 20.9.0, which doesn't have it.

Visualizer in VS code worked though! You might want to add a bit to the README on how to access it, took me a while to realize the button was in the drizzle.config.js.

Debugging Info:

Fresh environment (just Node, not NextJS):

npm init -y
npm install drizzle-kit drizzle-orm dotenv
copied my schema and drizzle config file from the project I'm working on
npx drizzle-lab visualizer

Here's the debug info with a few things redacted, though it looked all normal:

[importModule] Importing module /Users/alexpatow/Developer/test-drizzle-visualizer/drizzle.config.ts
version 0.10.0
platform darwin
options {
  debug: true,
  config: undefined,
  'save-dir': '.drizzle',
  'project-id': 'visualizer',
  'ts-config': './tsconfig.json',
  port: 64738,
  'env-path': undefined
}
cli env {
  PORT: '64738',
  DRIZZLE_LAB_DEBUG: 'true',
  DRIZZLE_LAB_CONFIG_PATH: undefined,
  DRIZZLE_LAB_SAVE_DIR: '.drizzle',
  DRIZZLE_LAB_PROJECT_ID: 'visualizer',
  DRIZZLE_LAB_CWD: '/Users/alexpatow/Developer/test-drizzle-visualizer',
  TS_CONFIG_PATH: './tsconfig.json',
  DRIZZLE_LAB_ENV_FILE_PATH: undefined
}
config {
  dialect: 'postgresql',
  schema: [REDACTED],
  lab: { projectId: '' },
  dbCredentials: {
    url: REDACTED
  },
  verbose: true,
  strict: true,
  projectId: 'visualizer'
}

package.json:

{
  "name": "test-drizzle-visualizer",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/node": "^22.10.1"
  },
  "dependencies": {
    "dotenv": "^16.4.5",
    "drizzle-kit": "^0.28.1",
    "drizzle-orm": "^0.36.4"
  }
}

rphlmr commented 5 days ago

WOW thanks 🙏! I am on node 20 but the latest of 20. I will look at that this weekend! Maybe I will add requirements for a specific minimal version of the branch 20

rphlmr / drizzle-lab