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

TypeError: LRU is not a constructor #1885

Closed
lamiaagebriel opened this issue Mar 10, 2023 · 26 comments · Fixed by #2988
Closed

TypeError: LRU is not a constructor #1885

lamiaagebriel opened this issue Mar 10, 2023 · 26 comments · Fixed by #2988

Comments

@lamiaagebriel
Copy link

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
Copy link

playitcool commented Mar 10, 2023

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

@sidorares
Copy link
Owner

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
Copy link

@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
Copy link
Owner

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

@Nithur-M
Copy link

Nithur-M commented Mar 11, 2023

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
Copy link
Owner

Can confirm I can reproduce the issue with app directory

the result of this line

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
Copy link

SpBills commented Mar 11, 2023

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

@SpBills
Copy link

SpBills commented Mar 11, 2023

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

@cw1997
Copy link

cw1997 commented Mar 12, 2023

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

@Nithur-M
Copy link

Nithur-M commented Mar 12, 2023

@SpBills are you using the app directory?

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

@SpBills
Copy link

SpBills commented Mar 13, 2023

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

@barthicus
Copy link

barthicus commented Mar 17, 2023

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
Copy link

SpBills commented Mar 17, 2023

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
Copy link

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!

@KieranLinton
Copy link

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

You are an absolute life saver!

@SamuelBucher
Copy link

I have the same issue, but I work with Node.js and npm. How can this be solved for my case?

@arondeparon
Copy link

Same issue here, Next 13.3.0 and Mysql 3.2.3. Not using app directory, but anything in /api seems to cause this error.

@sidorares
Copy link
Owner

@SamuelBucher can you make a repro repository? Are you using any bundler tools or its just a standard node module system?

@SamuelBucher
Copy link

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

I rebuilt my project for Next.js, but this solution still didn't work.

@barthicus
Copy link

@SamuelBucher Could you share a repro link? It's difficult to help without it. Next.js in app dir mode is being updated daily by dev team through releases (canary) and maybe some new issue appeared.

@SamuelBucher
Copy link

@SamuelBucher Could you share a repro link? It's difficult to help without it. Next.js in app dir mode is being updated daily by dev team through releases (canary) and maybe some new issue appeared.

I've already solved this issue by messing with versions in package.json

"dependencies": {
"mysql2": "^2.2.5",
"pg-hstore": "^2.3.4",
"sequelize": "^5.22.5"
},

@jaakumasi
Copy link

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

Perfect! Issue fixed! God bless 🙏🏼

@Beipy
Copy link

Beipy commented May 11, 2023

Nuxt3 #2001 (comment)

@Tenodec
Copy link

Tenodec commented Nov 30, 2023

Build for electron,it's the same problem .
already use
const LRU = require('lru-cache').default;

@wellwelwel
Copy link
Collaborator

wellwelwel commented Dec 1, 2023

Hi @Tenodec, can you share a basic repro? Also, knowing the electron and mysql2 versions might help 🙋🏻‍♂️

Daiius added a commit to Daiius/videmus that referenced this issue Oct 30, 2024
Githubにissueが上がっていました、その通りに対処して解決しました
sidorares/node-mysql2#1885
@lbxx11
Copy link

lbxx11 commented Nov 5, 2024

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

you really a life saver 🙏

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

Successfully merging a pull request may close this issue.