typeorm: Using with Vite: Uncaught ReferenceError: require is not defined

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch typeorm@0.2.45 for the project I’m working on.

I’m using TypeORM in a Vite based project, and when building the project in production mode, I get the following error

Uncaught ReferenceError: require is not defined

which is thrown from BrowserPlatformTools:150

I understand that this is not necessarily a common use case, and I’m not sure if this change would break other clients, so if that’s the case feel free to close my issue, and I’ll just carry on using the patch-package workaround.

Here is the diff that solved my problem:

diff --git a/node_modules/typeorm/browser/platform/BrowserPlatformTools.js b/node_modules/typeorm/browser/platform/BrowserPlatformTools.js
index 7b23ac5..123b61d 100644
--- a/node_modules/typeorm/browser/platform/BrowserPlatformTools.js
+++ b/node_modules/typeorm/browser/platform/BrowserPlatformTools.js
@@ -5,6 +5,8 @@
  * For node.js environment this class is not getting packaged.
  * Don't use methods of this class in the code, use PlatformTools methods instead.
  */
+import Buffer from "buffer";
+
 var PlatformTools = /** @class */ (function () {
     function PlatformTools() {
     }
@@ -147,7 +149,7 @@ var Writable = /** @class */ (function () {
 }());
 export { Writable };
 if (typeof window !== "undefined") {
-    window.Buffer = require("buffer/").Buffer;
+    window.Buffer = Buffer;
 }
 // NativeScript uses global, not window
 if (typeof global !== "undefined") {

This issue body was partially generated by patch-package.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 15
Comments: 23 (7 by maintainers)

Most upvoted comments

I created a new pull request #10196 with @jacobg’s solution Right now I use patch-package to apply the fix, which works fine. Hopefully the fix will get merged at some point.

+11

Dukezo on Jul 10, 2023

Here’s a potential pull request that makes typeorm work with application built using vite: https://github.com/typeorm/typeorm/compare/master...jacobg:vite?expand=1

@pleerock Will you accept such a pull request? Any feedback? Thanks!

+11

jacobg on Mar 16, 2023

If you need to use Vite with Typeorm, you can create a new JavaScript file with the same content as QueryBuilder and rename it e.g. DeleteQueryBuilderBase. Then, replace QueryBuilder with your newly created file in any file that extends QueryBuilder.

--- a/node_modules/typeorm/browser/query-builder/DeleteQueryBuilder.js
+++ b/node_modules/typeorm/browser/query-builder/DeleteQueryBuilder.js
@@ -1,11 +1,11 @@
-import { QueryBuilder } from "./QueryBuilder";
 import { DeleteResult } from "./result/DeleteResult";
 import { ReturningStatementNotSupportedError } from "../error/ReturningStatementNotSupportedError";
 import { InstanceChecker } from "../util/InstanceChecker";
+import { DeleteQueryBuilderBase } from "./DeleteQueryBuilderBase";
 /**
  * Allows to build complex sql queries in a fashion way and execute those queries.
  */
-export class DeleteQueryBuilder extends QueryBuilder {
+export class DeleteQueryBuilder extends DeleteQueryBuilderBase {
     // -------------------------------------------------------------------------
     // Constructor
     // -------------------------------------------------------------------------

Afterwards in your vite.config.js enable following options

  esbuild: {
    keepNames: true, // typeorm migrations require timestamp in their names and this way it can be defined with name property
  },
  build: {
    commonjsOptions: {
      transformMixedEsModules: true, // https://github.com/rollup/plugins/tree/master/packages/commonjs#transformmixedesmodules
    },
  },

I haven’t field-tested this but it looks like it’s working for now.

Note: I couldn’t post the whole patch in github as it extends the 65k character limit. See: https://pastebin.com/R6xhaFxU Disclaimer: I know this solution is not good, but you can still use Typeorm with Vite this way.

DawidWetzler on Sep 11, 2022

I haven’t tried this myself, but perhaps something like https://www.npmjs.com/package/vite-plugin-require could work?

raymondboswel on Jul 6, 2022

I’ve been having this issue for weeks now. I’m using SvelteKit with Vite which shares the Typeorm classes with the backend. Took me a while to identify Typeorm as the culprit. Thank you for this solution @raymondboswel, I can finally stop banging my head on the wall.

Creskendoll on Jun 4, 2022

I just created a react-vite-typeorm-sql.js boilerplate https://github.com/laukaichung/react-vite-typeorm-sqljs. It’s worked without any issues so far.

laukaichung on Aug 5, 2023

Any news on this?

Dukezo on Jul 10, 2023

We also have the same issue running nuxt3 + vite setup and importing typeorm on the server side!

It took very long to find this issue - after hours of searching I’m thankful that we’re not the only ones and a fix exists, thanks @raymondboswel! (:

BracketJohn on Jun 25, 2022