TypeError: LRU is not a constructor

[lamiaagebriel]

This error appears each time I install mysql2 using (yarn add mysql2 --save) with Next.js 13.2.
I reinstalled Next.js and mysql2 without any other dependencies to ensure it wasn't another dependency that affects it.

(
Server Error
TypeError: LRU is not a constructor

This error happened while generating the page. Any console logs will be displayed in the terminal window.
Call Stack
eval
node_modules\mysql2\lib\parsers\parser_cache.js (5:20)
(sc_server)/./node_modules/mysql2/lib/parsers/parser_cache.js
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (1470:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
require
node_modules\mysql2\lib\parsers\text_parser.js (7:20)
(sc_server)/./node_modules/mysql2/lib/parsers/text_parser.js
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (1492:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
require
node_modules\mysql2\lib\commands\query.js (10:22)
(sc_server)/./node_modules/mysql2/lib/commands/query.js
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (986:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
require
node_modules\mysql2\lib\commands\index.js (5:14)
(sc_server)/./node_modules/mysql2/lib/commands/index.js
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (953:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
require
node_modules\mysql2\lib\connection.js (29:17)
(sc_server)/./node_modules/mysql2/lib/connection.js
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (1041:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
require
node_modules\mysql2\index.js (5:19)
(sc_server)/./node_modules/mysql2/index.js
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (799:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
require
node_modules\mysql2\promise.js (3:13)
(sc_server)/./node_modules/mysql2/promise.js
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (1558:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(sc_server)/./utils/db.ts (5:72)
(sc_server)/./utils/db.ts
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (1920:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(sc_server)/./app/api/employees/route.ts (8:67)
(sc_server)/./app/api/employees/route.ts
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (216:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
eval
webpack-internal:///(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js (13:106)
(sc_server)/./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?name=app%2Fapi%2Femployees%2Froute&appPaths=&pagePath=private-next-app-dir%2Fapi%2Femployees%2Froute.ts&appDir=D%3A%5CWebsites%5Cnext-mysql%5Capp&pageExtensions=tsx&pageExtensions=ts&pageExtensions=jsx&pageExtensions=js&rootDir=D%3A%5CWebsites%5Cnext-mysql&isDev=true&tsconfigPath=tsconfig.json&assetPrefix=!
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (205:1)
webpack_require
file:///D:/Websites/next-mysql/.next/server/webpack-runtime.js (33:42)
webpack_exec
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (2073:39)

file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (2074:28)
Object.
file:///D:/Websites/next-mysql/.next/server/app/api/employees/route.js (2077:3)
Module._compile
node:internal/modules/cjs/loader (1254:14)
Module._extensions..js
node:internal/modules/cjs/loader (1308:10)
Module.load
node:internal/modules/cjs/loader (1117:32)
Module._load
node:internal/modules/cjs/loader (958:12)
Module.require
node:internal/modules/cjs/loader (1141:19)
require
node:internal/modules/cjs/helpers (110:18)
Object.requirePage
file:///D:/Websites/next-mysql/node_modules/next/dist/server/require.js (88:12)

file:///D:/Websites/next-mysql/node_modules/next/dist/server/load-components.js (49:73)
process.processTicksAndRejections
node:internal/process/task_queues (95:5)
async Object.loadComponentsImpl [as loadComponents]
file:///D:/Websites/next-mysql/node_modules/next/dist/server/load-components.js (49:26)
async DevServer.findPageComponentsImpl
file:///D:/Websites/next-mysql/node_modules/next/dist/server/next-server.js (599:36)
)

[playitcool]

I am also seeing this behavior with mysql2: ^3.2.0 and next: ^13.2.4

[sidorares]

also related #1876

@playitcool @lamiaagabriel I tried following steps but everything worked as expected for me:

• npm init -y && npm install next mysql2
• add pages/api/test.ts:

import { createConnection } from "mysql2/promise";

const DATABASE_URL='mysql://...';

export default async function handler(req, res) {
  const connection = await createConnection(DATABASE_URL);
  const [rows] = await connection.execute('SELECT * FROM test WHERE test.id = ?', ['119f4a6c-02f3-4f47-8103-9b5bf3b245db']);
  res.status(200).json({ rows })
}

[playitcool]

@sidorares - thank you for looking into it. One more detail - I am also using MysqlDialect query builder from this repo: https://github.com/koskimas/kysely, but I also tried the code you provided and got this:

error - node_modules/mysql2/lib/parsers/parser_cache.js (5:20) @ eval
error - TypeError: LRU is not a constructor
    at eval (webpack-internal:///(sc_server)/./node_modules/mysql2/lib/parsers/parser_cache.js:3:21)
    at (sc_server)/./node_modules/mysql2/lib/parsers/parser_cache.js (/Users/me/Documents/GitHub/reports/.next/server/app/page.js:1743:1)
    at __webpack_require__ (/Users/me/Documents/GitHub/reports/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/mysql2/lib/parsers/text_parser.js:6:21)
    at (sc_server)/./node_modules/mysql2/lib/parsers/text_parser.js (/Users/me/Documents/GitHub/reports/.next/server/app/page.js:1765:1)
    at __webpack_require__ (/Users/me/Documents/GitHub/reports/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/mysql2/lib/commands/query.js:7:23)
    at (sc_server)/./node_modules/mysql2/lib/commands/query.js (/Users/me/Documents/GitHub/reports/.next/server/app/page.js:1259:1)
    at __webpack_require__ (/Users/me/Documents/GitHub/reports/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///(sc_server)/./node_modules/mysql2/lib/commands/index.js:4:15) {
  type: 'TypeError',
  page: '/'
}

[sidorares]

@playitcool can you make a repro repo, and also have lockfile checked in?

[Nithur-M]

Hello @sidorares, what project structure are you using? are you using the app directory? I think it may have something to do with server components. Not sure.
Mysql2 worked fine for me with the traditional pages directory but the issue is only with the app directory. I am putting the MySQL connection logic in a util file and then calling it.

App directory is an experimental feature and you need to explicitly enable it in next.config file.

[sidorares]

Can confirm I can reproduce the issue with app directory

the result of this line

node-mysql2/lib/parsers/parser_cache.js

Line 3 in fd9bd71

const LRU = require('lru-cache');

is { default: LRUCacheConstructor } when used from app directory and LRUCacheConstructor when used from pages

not sure yet which side the fix should be - next, node-lru-cache or mysql2

There was a PR in lru-cache recently ( isaacs/node-lru-cache#266 ) adding ESM support but it's already in the version 7.18.3 that mysql2@3.2.0 currently is using

[SpBills]

Is there a version we can revert back to for now?

[SpBills]

Downgrading to Next 13.0 made it work for me with mysql2@^3.2.0

[cw1997]

I also meet this problem, and I don't know if the bug occurs from next.js or node-mysql2

[Nithur-M]

@SpBills are you using the app directory?

[edit]: just checked Next 13.0 with the App directory and the above issue still persists.

[SpBills]

Even in Next 13.0 app directory it didn't work. Maybe this is an app dir problem? Good point.

[barthicus]

Hi everyone. I also got stuck with this issue and was pulling hair of my head because I thought it should work in any node.js environment. Even in the new Next.js app router mode in page or route handler.

My stack: next 13 appDir, drizzle orm with mysql, monorepo, turbo, typescript.

So i started digging and experimenting and I think I found the solution.

I put the mysql2 dependency in next.config.js under the experimental.serverComponentsExternalPackages and after server restart it worked.

So the next.config.js should look like this:

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
    typedRoutes: true,
    serverComponentsExternalPackages: ["mysql2"],
    // runtime: "edge",
  },
}
export default config

I'm not that familiar with how this works under the hood but if it works that's fine for me and I can continue playing with next 13 appDir on the edge ⚡

You can read more about this feature here: https://beta.nextjs.org/docs/api-reference/next.config.js#servercomponentsexternalpackages

EDIT: I noticed that new next.js beta docs changes frequently so if the link above doesn't work try this: https://beta.nextjs.org/docs/api-reference/next-config#servercomponentsexternalpackages

[SpBills]

Hi everyone. I also got stuck with this issue and was pulling hair of my head because I thought it should work in any node.js environment. Even in the new Next.js app router mode in page or route handler.

My stack: next 13 appDir, drizzle orm with mysql, monorepo, turbo, typescript.

So i started digging and experimenting and I think I found the solution.

I put the mysql2 dependency in next.config.js under the experimental.serverComponentsExternalPackages and after server restart it worked.

So the next.config.js should look like this:

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
    typedRoutes: true,
    serverComponentsExternalPackages: ["mysql2"],
    // runtime: "edge",
  },
}
export default config

I'm not that familiar with how this works under the hood but if it works that's fine for me and I can continue playing with next 13 appDir on the edge zap

You can read more about this feature here: https://beta.nextjs.org/docs/api-reference/next.config.js#servercomponentsexternalpackages

Wow. Great catch.

[Angelelz]

Hi everyone. I also got stuck with this issue and was pulling hair of my head because I thought it should work in any node.js environment. Even in the new Next.js app router mode in page or route handler.

My stack: next 13 appDir, drizzle orm with mysql, monorepo, turbo, typescript.

So i started digging and experimenting and I think I found the solution.

I put the mysql2 dependency in next.config.js under the experimental.serverComponentsExternalPackages and after server restart it worked.

So the next.config.js should look like this:

/** @type {import("next").NextConfig} */
const config = {
  reactStrictMode: true,
  experimental: {
    appDir: true,
    typedRoutes: true,
    serverComponentsExternalPackages: ["mysql2"],
    // runtime: "edge",
  },
}
export default config

I'm not that familiar with how this works under the hood but if it works that's fine for me and I can continue playing with next 13 appDir on the edge ⚡

You can read more about this feature here: https://beta.nextjs.org/docs/api-reference/next.config.js#servercomponentsexternalpackages

EDIT: I noticed that new next.js beta docs changes frequently so if the link above doesn't work try this: https://beta.nextjs.org/docs/api-reference/next-config#servercomponentsexternalpackages

Mr wizard! Thank you!