404 on localhost:4983/init Impossible to Load Drizzle Studio

[versecafe]

attempting to run pnpm drizzle-kit studio starts up on local.drizzle.studio but only as a skeleton due to /init returning a 404, this is on the latest 0.20.16 and even after downgrading to a previously functioning 0.20.14

[wouter173]

I am getting the exact same issue on both 0.20.15 and 0.20.16

[JepriCreations]

Same issue with 0.20.16, but rolling back to a preview version (0.20.14, 0.20.15) not solve the problem. An alert is display to force you updating.

[RomanNabukhotnyi]

@versecafe Hey! Can you please share your schema and logs from browser console?

[versecafe]

@RomanNabukhotnyi

import {
  boolean,
  datetime,
  index,
  int,
  json,
  mysqlEnum,
  mysqlTable,
  primaryKey,
  text,
  varchar,
} from "drizzle-orm/mysql-core";

const languages = mysqlEnum("language", [
  "en",
  "es",
  "fr",
  "de",
  "it",
  "pt",
  "nl",
]).notNull();

export const answerTranslationsTable = mysqlTable(
  "answer_translations",
  {
    answerId: int("answer_id")
      .notNull()
      .references(() => answersTable.id),
    language: languages,
    text: varchar("text", { length: 1023 }).notNull(),
  },
  (table) => {
    return {
      pk: primaryKey({
        columns: [table.answerId, table.language],
      }),
    };
  },
);

export interface Dimension {
  dimension: string;
  position: number;
}

export const answersTable = mysqlTable(
  "answers",
  {
    id: int("id").autoincrement().notNull().primaryKey(),
    questionId: int("question_id")
      .notNull()
      .references(() => questionsTable.id),
    text: varchar("text", { length: 1023 }).notNull(),
    imageUrl: varchar("image_url", { length: 1023 }),
    dimensions: json("dimensions").$type<Dimension[]>().notNull(),
  },
  (table) => {
    return {
      questionAnswersIdx: index("question_answers_index").on(table.questionId),
    };
  },
);

export const articlesTable = mysqlTable("articles", {
  authorId: varchar("author_id", { length: 255 }).references(
    () => usersTable.id,
  ),
  title: varchar("title", { length: 255 }).notNull(),
  content: text("content").notNull(),
  createdAt: datetime("created_at").notNull(),
  imageUrl: varchar("image_url", { length: 1023 }).notNull(),
  slug: varchar("slug", { length: 255 }).notNull().primaryKey(),
  language: languages.default("en"),
  site: mysqlEnum("site", ["psychometrica", "shared-smiles", "all"])
    .default("all")
    .notNull(),
  published: boolean("published").default(false).notNull(),
  description: varchar("description", { length: 255 }).notNull(),
});

export const communitiesTable = mysqlTable("communities", {
  id: int("id").autoincrement().notNull().primaryKey(),
  published: boolean("published").default(false).notNull(),
  name: varchar("name", { length: 255 }).notNull(),
  description: varchar("description", { length: 1023 }).notNull(),
  imageUrl: varchar("image_url", { length: 1023 }).notNull(),
  content: text("content").notNull(),
  weights: json("weights").notNull(),
  slug: varchar("slug", { length: 255 }).notNull().unique(),
});

export const communityMembersTable = mysqlTable(
  "community_members",
  {
    userId: varchar("user_id", { length: 255 })
      .notNull()
      .references(() => usersTable.id),
    communityId: int("community_id")
      .notNull()
      .references(() => communitiesTable.id),
    role: mysqlEnum("role", ["member", "moderator", "admin"])
      .default("member")
      .notNull(),
  },
  (table) => {
    return {
      pk: primaryKey({
        columns: [table.userId, table.communityId],
      }),
    };
  },
);

export const communityTranslationsTable = mysqlTable(
  "community_translations",
  {
    communityId: int("community_id")
      .notNull()
      .references(() => communitiesTable.id),
    language: languages,
    name: varchar("name", { length: 255 }).notNull(),
    description: varchar("description", { length: 1023 }).notNull(),
    content: text("content").notNull(),
  },
  (table) => {
    return {
      pk: primaryKey({
        columns: [table.communityId, table.language],
      }),
    };
  },
);

export const oauthAccountsTable = mysqlTable(
  "oauth_accounts",
  {
    providerId: varchar("provider_id", { length: 255 }).notNull(),
    providerUserId: varchar("provider_user_id", { length: 255 }).notNull(),
    userId: varchar("user_id", { length: 255 })
      .notNull()
      .references(() => usersTable.id),
  },
  (table) => {
    return {
      pk: primaryKey({
        columns: [table.providerId, table.providerUserId],
      }),
    };
  },
);

export const questionTranslationsTable = mysqlTable(
  "question_translations",
  {
    questionId: int("question_id")
      .notNull()
      .references(() => questionsTable.id),
    language: languages,
    text: varchar("text", { length: 1023 }).notNull(),
  },
  (table) => {
    return {
      pk: primaryKey({
        columns: [table.questionId, table.language],
      }),
    };
  },
);

export const questionsTable = mysqlTable(
  "questions",
  {
    id: int("id").autoincrement().notNull().primaryKey(),
    quizId: int("quiz_id").references(() => quizzesTable.id),
    text: varchar("text", { length: 1023 }).notNull(),
    displayType: mysqlEnum("display_type", [
      "image-grid",
      "image-list",
      "text-grid",
      "text-list",
      "scale",
    ]).notNull(),
    maxChoices: int("max_choices").default(1).notNull(),
    imageUrl: varchar("image_url", { length: 1023 }),
    sourceAnswerId: int("source_answer_id"),
    variant: varchar("variant", { length: 50 }),
  },
  (table) => {
    return {
      quizQuestionsIdx: index("quiz_questions_index").on(table.quizId),
      variantIdx: index("variant_index").on(table.variant),
    };
  },
);

export const quizLandersTable = mysqlTable("quiz_landers", {
  slug: varchar("slug", { length: 255 })
    .primaryKey()
    .notNull()
    .references(() => quizzesTable.slug),
  title: varchar("title", { length: 255 }).notNull(),
  description: varchar("description", { length: 255 }).notNull(),
  content: text("content").notNull(),
});

export const quizTranslationsTable = mysqlTable(
  "quiz_translations",
  {
    quizId: int("quiz_id")
      .notNull()
      .references(() => quizzesTable.id),
    language: languages,
    name: varchar("name", { length: 255 }).notNull(),
    description: varchar("description", { length: 1023 }).notNull(),
  },
  (table) => {
    return {
      pk: primaryKey({
        columns: [table.quizId, table.language],
      }),
    };
  },
);

export const quizzesTable = mysqlTable(
  "quizzes",
  {
    id: int("id").autoincrement().notNull(),
    name: varchar("name", { length: 255 }).notNull(),
    description: varchar("description", { length: 1023 }).default("").notNull(),
    skipableQuestions: boolean("skipable_questions").default(false).notNull(),
    published: boolean("published").default(false).notNull(),
    imageUrls: json("image_urls").$type<{
      logo: string;
      tile: string;
      icon: string;
    }>(),
    slug: varchar("slug", { length: 255 }).notNull().unique(),
    category: varchar("category", { length: 255 }).default("").notNull(),
    llmContext: varchar("llm_context", { length: 1023 }).default("").notNull(),
  },
  (table) => {
    return {
      pk: primaryKey({ columns: [table.id], name: "quizzes_id" }),
    };
  },
);

export const quizConfigsTable = mysqlTable(
  "quiz_configs",
  {
    quiz_slug: varchar("quiz_slug", { length: 255 })
      .notNull()
      .references(() => quizzesTable.slug),
    default: boolean("default").notNull().default(false),
    premium: boolean("premium").notNull().default(false),
    estimatedTime: int("estimated_time"),
    title: varchar("title", { length: 255 }).notNull(),
    description: varchar("description", { length: 255 }).notNull(),
    type: mysqlEnum("type", ["static", "dynamic"]).notNull().default("dynamic"),
    shuffle: boolean("shuffle").notNull().default(true),
    variants:
      json("variants").$type<{ variant: string; instances: number }[]>(),
  },
  (table) => {
    return {
      pk: primaryKey({ columns: [table.quiz_slug, table.title] }),
    };
  },
);

export const sessionsTable = mysqlTable("sessions", {
  id: varchar("id", {
    length: 255,
  })
    .notNull()
    .primaryKey(),
  userId: varchar("user_id", {
    length: 255,
  })
    .notNull()
    .references(() => usersTable.id),
  expiresAt: datetime("expires_at").notNull(),
});

export const userAnswersTable = mysqlTable(
  "user_answers",
  {
    userId: varchar("user_id", { length: 255 })
      .notNull()
      .references(() => usersTable.id),
    quizId: int("quiz_id")
      .notNull()
      .references(() => quizzesTable.id),
    answerId: int("answer_id")
      .notNull()
      .references(() => answersTable.id),
    dimensions: json("dimensions").$type<Dimension[]>().notNull(),
  },
  (table) => {
    return {
      pk: primaryKey({
        columns: [table.userId, table.quizId, table.answerId],
      }),
    };
  },
);

export const usersTable = mysqlTable("users", {
  id: varchar("id", { length: 255 }).notNull().primaryKey(),
  username: varchar("username", { length: 255 }).notNull(),
  avatarUrl: varchar("avatar_url", { length: 1023 }),
  email: varchar("email", { length: 255 }),
  role: mysqlEnum("role", ["user", "creator", "moderator", "admin"])
    .default("user")
    .notNull(),
});

[hectorruizlaph]

same here, can't get it to run since upgrade, using ?ssl={"rejectUnauthorized":false}

[RomanNabukhotnyi]

@versecafe @hectorruizlaph Can you try a hard refresh in browser?

[versecafe]

@hectorruizlaph Tried hard refreshes, cache clears, and wiping node modules and a full reboot

[RomanNabukhotnyi]

Can you provide responses from requests to localhost? Or just check maybe there error in response

[kimjisena]

Same here...It was working just fine but then now it's returning 404 and forcing me to upgrade even though I'm on the latest version.

[RomanNabukhotnyi]

@kimjisena Hey! Do you have version 0.20.17? If yes then maybe try reinstalling

[hectorruizlaph]

@versecafe @kimjisena I've tried everything, with no success, I'm using "next": "^14.1.3", "drizzle-kit": "^0.20.17", "mysql2": "^3.6.1", pnpm

[JepriCreations]

For me, it started working again with 0.20.16 when I deleted my local database and created it again (I am using Turso local development), and uninstalled drizzle-kit, and installed it again. After updating to 0.20.17, everything is still working fine. I'm not sure what really fixed it though.

[kimjisena]

@kimjisena Hey! Do you have version 0.20.17? If yes then maybe try reinstalling

I tried reinstalling everything to no avail.

One thing I haven't tried is dropping the database and rerunning migrations (as someone has suggested in the thread). Let me try that too.

[RomanNabukhotnyi]

@kimjisena Can you provide database url without credentials?

[kimjisena]

@kimjisena Can you provide database url without credentials?

here's the contents of my drizzle config

// drizzle.config.ts
import "dotenv/config";
import type { Config } from "drizzle-kit";

export default {
  schema: "./src/db/schemas/index.ts",
  out: "./src/db/migrations",
  driver: "pg", // 'pg' | 'mysql2' | 'better-sqlite' | 'libsql' | 'turso'
  dbCredentials: {
    host: process.env.PG_HOST as string,
    port: Number(process.env.PG_PORT),
    user: process.env.PG_USER,
    password: process.env.PG_PASSWORD,
    database: process.env.PG_NAME as string,
  },
} satisfies Config;

[RomanNabukhotnyi]

@kimjisena Can you provide database url without credentials?

here's the contents of my drizzle config

// drizzle.config.ts
import "dotenv/config";
import type { Config } from "drizzle-kit";

export default {
  schema: "./src/db/schemas/index.ts",
  out: "./src/db/migrations",
  driver: "pg", // 'pg' | 'mysql2' | 'better-sqlite' | 'libsql' | 'turso'
  dbCredentials: {
    host: process.env.PG_HOST as string,
    port: Number(process.env.PG_PORT),
    user: process.env.PG_USER,
    password: process.env.PG_PASSWORD,
    database: process.env.PG_NAME as string,
  },
} satisfies Config;

Oh, you're using Postgres. Then can you show your schema?

[kimjisena]

@kimjisena Can you provide database url without credentials?

here's the contents of my drizzle config

// drizzle.config.ts
import "dotenv/config";
import type { Config } from "drizzle-kit";

export default {
  schema: "./src/db/schemas/index.ts",
  out: "./src/db/migrations",
  driver: "pg", // 'pg' | 'mysql2' | 'better-sqlite' | 'libsql' | 'turso'
  dbCredentials: {
    host: process.env.PG_HOST as string,
    port: Number(process.env.PG_PORT),
    user: process.env.PG_USER,
    password: process.env.PG_PASSWORD,
    database: process.env.PG_NAME as string,
  },
} satisfies Config;

Oh, you're using Postgres. Then can you show your schema?

Yes, I'm using Postgres. Actually, in the initial set up I was using MySQL and it was working fine (I even tweeted about it). But then I decided to switch to Postgres so I updated my schemas and everything. I can generate migrations just fine and I can run them. All tables are being created correctly but Drizzle Studio is somehow not working.

As for schemas, I have several schema files that I have re-exported in one file (see code below):

// ./src/db/schemas/index.ts
export { asset } from "./asset";
// ... more schemas
// ... even more schemas
export {
  transaction,
  transactionStatusEnum,
  transactionTypeEnum,
} from "./transaction";
export { userGroup } from "./user-group";
export { userMessage } from "./user-message";
export { user, userRoleEnum, userStatusEnum } from "./user";

[RomanNabukhotnyi]

@kimjisena And you also have this error?

[kimjisena]

@kimjisena And you also have this error?

Not exactly...error on my end is "Invalid API version"

[RomanNabukhotnyi]

@kimjisena Then try removing the node_modules and package lock file and reinstalling the dependencies (also check that you have the latest version of drizzle-kit)

[kimjisena]

@kimjisena Then try removing the node_modules and package lock file and reinstalling the dependencies (also check that you have the latest version of drizzle-kit)

At first I was just removing node_modules and left the lock files as they were.

This finally worked. Thanks!

# remove `node_modules` and all lock files
rm -fr node_modules bun.lockb yarn.lock 

# reinstall dependencies
bun install

[stefanikostic]

@kimjisena Then try removing the node_modules and package lock file and reinstalling the dependencies (also check that you have the latest version of drizzle-kit)

I've tried removing the node_modules and pnpm_lock.yaml file and reinstalling the dependencies (using drizzle-kit 0.20.17) and I still have this issue

Any suggestions what can I do next?

[RomanNabukhotnyi]

@stefanikostic Hey! Can you please share your schema?

[stefanikostic]

@stefanikostic Hey! Can you please share your schema?

Yes, here it is:

import { relations } from 'drizzle-orm';
import { integer, sqliteTable, text } from 'drizzle-orm/sqlite-core';

export const quizzes = sqliteTable('quizzes', {
id: integer('id').primaryKey(),
name: text('name').notNull().unique(),
description: text('description'),
isPublished: integer('is_published', { mode: 'boolean' }).default(false),
});

export const quizRelations = relations(quizzes, ({ many }) => ({
questions: many(questions),
}));

export const questions = sqliteTable('questions', {
id: integer('id').primaryKey(),
quizId: integer('quiz_id')
.notNull()
.references(() => quizzes.id, { onDelete: 'cascade' }),
text: text('text').notNull(),
duration: integer('duration').notNull(),
points: integer('points').notNull(),
});

export const questionsRelations = relations(questions, ({ one, many }) => ({
quiz: one(quizzes, {
fields: [questions.quizId],
references: [quizzes.id],
}),
answers: many(answers),
}));

export const answers = sqliteTable('answers', {
id: integer('id').primaryKey(),
questionId: integer('question_id')
.notNull()
.references(() => questions.id, { onDelete: 'cascade' }),
text: text('text').notNull(),
isCorrect: integer('is_correct', { mode: 'boolean' }),
});

export const answersRelations = relations(answers, ({ one }) => ({
question: one(questions, {
fields: [answers.questionId],
references: [questions.id],
}),
}));

[ecwyne]

Having the same issue here. No workaround

[sveenxx]

Same issue here

[vieko]

+1 on this issue.

mysql
drizzle-kit: v0.20.17
drizzle-orm: v0.30.9

[eslym]

I am seeing bun default page while using bun

and then ofc cors failed

[bielarusajed]

+1 here.
drizzle-kit: v0.20.17
drizzle-orm: v0.30.10
It sends requests to the http://localhost:4983/init and https://localhost:4983/init, and the http one is with an empty response, https one is with 404:

My drizzle.config.ts:

import type { Config } from 'drizzle-kit';

export default {
  schema: './src/schema/*',
  out: './migrations',
  driver: 'pg',
  dbCredentials: {
    connectionString: process.env.DATABASE_URL!,
  },
} satisfies Config;

Running on Node v20.10.0.

UPD: Apparently, the problem I got the first one, that was a reason, I found this issue, was the incompatibility with bun: I tried to run bun --bun drizzle-kit studio just for the .env autoloading, and drizzle-studio didn't launch at all. I switched to the dotenv -- drizzle-kit studio, studio launched, but didn't detect any schema, and I still got these 204 and 404 errors. So, I thought that studio is still completely broken even on node, and that's why I commented here. BUT even though these errors are still here, all my schemas appeared, and it seems to work just fine right after I did drizzle-kit push:pg.

[josean-dev]

+1 on this issue

Also happening to me on Chrome.

postgres
drizzle-kit: v0.20.17
drizzle-orm: v0.30.10