importing drizzle schema client side error [nextjs monorepo]

Hey all, I'm trying to import a drizzle schema to the client side and I'm getting a webpack loader error:

../../packages/db/utils/index.ts
Module parse failed: Unexpected token (11:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

../../packages/db/utils/index.ts
Module parse failed: Unexpected token (11:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

../../packages/db/utils/index.ts
Module parse failed: Unexpected token (11:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

../../packages/db/utils/index.ts
Module parse failed: Unexpected token (11:1)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

'use client'
import { formatStatus } from "db/utils"

const Test = () => {
  return ( 
    <div>
      {formatStatus("accepted-paid")}
    </div>
   );
}

'use client'
import { formatStatus } from "db/utils"

const Test = () => {
  return ( 
    <div>
      {formatStatus("accepted-paid")}
    </div>
   );
}

'use client'
import { formatStatus } from "db/utils"

const Test = () => {
  return ( 
    <div>
      {formatStatus("accepted-paid")}
    </div>
   );
}

'use client'
import { formatStatus } from "db/utils"

const Test = () => {
  return ( 
    <div>
      {formatStatus("accepted-paid")}
    </div>
   );
}

I saw this similar issue but exporting the function from the db/index.ts gives the same error
https://github.com/drizzle-team/drizzle-orm/discussions/885

Any ideas? Thanks!

GitHub

Sharing schema across monorepo · drizzle-team drizzle-orm · Discuss...

I'm currently converting a nextJs frontend to a monorepo with a new backend for handling async tasks. I'd like some help on how to share the db schema across my services. My Setup looks som...

Solution

Just have to transpile the package! Just realised the webpack error was throwing on a typescript character

const nextConfig = {
  transpilePackages: ['db'],
}

const nextConfig = {
  transpilePackages: ['db'],
}

const nextConfig = {
  transpilePackages: ['db'],
}

const nextConfig = {
  transpilePackages: ['db'],
}

Awesome

Jump to solution

importing drizzle schema client side error [nextjs monorepo]

Similar Threads

Similar Threads

Similar Threads