typeorm: browser: Can't resolve 'react-native-sqlite-storage'

Hi, I just run into the same problem using the latest NextJS.

To reproduce

1. clone this repo: https://github.com/Nutlope/twitterbio/tree/main

2. npm install Typeorm

3. npm install pg

4. Add these lines bellow

5. npm run dev

6. write something and click the button.

Any help and workarounds will be really useful. I want to use the Typeorm together with Langchain SQL Agent. But I am running into this problem.

Thanks 🙏

I just experienced the same problem with the latest Next.JS app that led me to this place

Still happening in 0.2.16

If you’re running create-react-app/react-scripts you might not be able (or want to use external tools) to configure the webpack config. The most elegant solution to work around this, that I found so far, is: create an empty file shims/react-native-sqlite-storage/index.js in your project and just add the following dependency to your project’s package.json:

{
  "dependencies": {
    "react-native-sqlite-storage": "file:./shims/react-native-sqlite-storage"
  }
}

Now after installing dependencies again you shouldn’t see that error anymore.

I use Nextjs and still have this issue when building it

And this issue is back with 0.2.29 (while it was fixed in 0.2.28), I think this issue needs to be reopened.

you can also add line to externals in webpack.config.js:

externals: {
  'react-native-sqlite-storage': 'react-native-sqlite-storage'
}

I’m having the same problem. I’m using TypeORM 0.2.22 together with MySQL.

I converted the command line from one of the answers above: https://github.com/typeorm/typeorm/issues/2158#issuecomment-537733866 to a script:

const replace = require('replace');

replace({
    regex: 'import { ReactNativeDriver } from "./react-native/ReactNativeDriver";',
    replacement: '',
    paths: ['node_modules/typeorm/browser/driver/DriverFactory.js']
});
replace({
    regex: 'case "react-native":',
    replacement: '',
    paths: ['node_modules/typeorm/browser/driver/DriverFactory.js']
});
replace({
    regex: 'return new ReactNativeDriver\\(connection\\);',
    replacement: '',
    paths: ['node_modules/typeorm/browser/driver/DriverFactory.js']
});

This workaround works at least for me.

Just experiencing the same with v0.2.17 Any updates in this @daniel-lang @pleerock?

Hi, I just run into the same problem using the latest NextJS.

To reproduce

1. clone this repo: https://github.com/Nutlope/twitterbio/tree/main
2. npm install Typeorm
3. npm install pg
4. Add these lines bellow

5. npm run dev 6. write something and click the button. Any help and workarounds will be really useful. I want to use the Typeorm together with Langchain SQL Agent. But I am running into this problem.

Thanks 🙏

my next.config.js

/** @type {import(‘next’).NextConfig} */ const nextConfig = {experimental: { serverComponentsExternalPackages: [“typeorm”], }, typescript: { ignoreBuildErrors: true, } }

module.exports = nextConfig

it works!

now i need a migration work 😦

I’ve got the same issue too. It was caused by an enum defined and exported in the same file I was creating an entity. The enum was imported both in the frontend and in the backend of my Next.js application.

import { Entity, PrimaryColumn, Column } from "typeorm";

export const TABLE_NAME = "project";
export enum ProjectStatus {
  LEAD = "lead",
  INCOMPLETE = "incomplete",
}

@Entity()
export class Project {
  @PrimaryColumn()
  id: string;

  ...
}

Same issue in 0.2.21.

Same with 0.2.18. Currently suppressed through aliasing in tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    ...
    "paths": {
      "react-native-sqlite-storage": [
        "src/dummy.ts"
      ]
    }
  },
  "include": [
    "src/dummy.ts", // empty ts file as placeholder
  ]
}

I got it to reproduce on a new clean build with Vue CLI v4.5.13 :

vue create demoapp <<default Vue 2>>
cd demoapp
vue add electron-builder
npm install --save typeorm better-sqlite3

in App.vue:

<script>
import HelloWorld from './components/HelloWorld.vue'
import {createConnection, getConnection} from "typeorm";

createConnection({
  type: 'better-sqlite3',
  database: 'testdatabase.sqlite'
})
window.getConnection = getConnection

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

npm run serve

Module not found: Error: Can't resolve 'react-native-sqlite-storage'

exact dependancy versions

  "dependencies": {
    "better-sqlite3": "^7.4.3",
    "core-js": "^3.6.5",
    "typeorm": "^0.2.37",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "electron": "^11.0.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "vue-cli-plugin-electron-builder": "~2.1.1",
    "vue-template-compiler": "^2.6.11"
  },

same issue in “typeorm”: “^0.2.22”,

Hi, I just run into the same problem using the latest NextJS.

To reproduce

1. clone this repo: https://github.com/Nutlope/twitterbio/tree/main

2. npm install Typeorm

3. npm install pg

4. Add these lines bellow

5. npm run dev

6. write something and click the button.

Any help and workarounds will be really useful. I want to use the Typeorm together with Langchain SQL Agent. But I am running into this problem.

Thanks 🙏

+1 Same issue here. v0.2.43, Angular 13 + Ionic 6.

as @kenberkeley mentions, patch-package is the elegant way, for me it was shared web and react-native code where it worked fine (on react-native) but webpack barfs when you try to pull in react-native stuff (naturally). There should be a way to toggle off drivers or similar, but the patch is simple, just exclude the ReactNative driver

patch-package result is like this:

mike@isabela:~/work/Kullki/ksocialscore/packages/public-app (rebranding *) % more patches/typeorm+0.2.25.patch 
diff --git a/node_modules/typeorm/browser/driver/DriverFactory.js b/node_modules/typeorm/browser/driver/DriverFactory.js
index af17fe4..ab66e44 100644
--- a/node_modules/typeorm/browser/driver/DriverFactory.js
+++ b/node_modules/typeorm/browser/driver/DriverFactory.js
@@ -5,7 +5,6 @@ import { SqlServerDriver } from "./sqlserver/SqlServerDriver";
 import { OracleDriver } from "./oracle/OracleDriver";
 import { SqliteDriver } from "./sqlite/SqliteDriver";
 import { CordovaDriver } from "./cordova/CordovaDriver";
-import { ReactNativeDriver } from "./react-native/ReactNativeDriver";
 import { NativescriptDriver } from "./nativescript/NativescriptDriver";
 import { SqljsDriver } from "./sqljs/SqljsDriver";
 import { MysqlDriver } from "./mysql/MysqlDriver";

Thanks @MieszkoGulinski

Another approach is using patch-package to modify (more elegant!)

Same problem with the version “^0.2.24”

Okay for me it’s the following warning in the browser:

And the console spits out:

wait  - compiling...
warn  - ./node_modules/typeorm/browser/driver/react-native/ReactNativeDriver.js
Module not found: Can't resolve 'react-native-sqlite-storage' in '/dealer_price_tracker/node_modules/typeorm/browser/driver/react-native'

The warning only gets printed when I navigate to the page, not straight away.

Update

I now know what exact line is causing the error to appear. It is not the importing of it, but I create a new instance of one of the entities. To be specific I use it as default value inside of a hook:

const [entity, setEntitiy] = useState(new Enitity());

@imnotjames No reproduction right now but rather a question. I use typeorm in my NextJs project and typeorm is only really used on the server (API routes). The catch is, I obviously import the entities in the client code as I want to have the type declaration for them. I suspect this could be the issue for other people as well. Am I using the library wrong? Is there any way to prevent this?

Same deal here. It’s funny I didn’t touch anything in package.json or anywhere. Just some text changes on a page. I had deployed fine for last 2 weeks. Today my nextjs deployment on vercel is failing for react-native thats so funny I don’t use react-native lol

06:50:56.088 | Failed to compile.
-- | --
06:50:56.089 | ModuleNotFoundError: Module not found: Error: Can't resolve 'react-native-sqlite-storage' in '/vercel/path0/node_modules/typeorm/browser/driver/react-native'
06:50:56.089 | > Build error occurred
06:50:56.090 | Error: > Build failed because of webpack errors
06:50:56.090 | at /vercel/path0/node_modules/next/dist/build/index.js:15:924
06:50:56.090 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)

Interesting. This might be a lead. I thought this was A runtime error for some reason.

Indeed interesting. If I recall correctly it is only a warning for me. If it helps, I can check tomorrow at work. 😃

Friendly reminder that we still need a reproducible example of this issue.

@RDX777 @paschaldev @NikolaosArgy I found a solution for that. I have read the package.json of typeorm, and found out that typeorm imports different libraries for different environment (node or browser). By default, Next.js will pack typeorm into browser (client-side) environment, which will cause typeorm require react-native libraries. To handle this, just add this into your project’s package.json:

  "browser": {
    "typeorm": false
  }

I ran into this while trying to use cockroachdb in an Electron app. This is the patch I’m using:

patches/typeorm+0.3.16.patch

diff --git a/node_modules/typeorm/browser/driver/DriverFactory.js b/node_modules/typeorm/browser/driver/DriverFactory.js
index fa19d4e..6b78fad 100644
--- a/node_modules/typeorm/browser/driver/DriverFactory.js
+++ b/node_modules/typeorm/browser/driver/DriverFactory.js
@@ -5,7 +5,6 @@ import { SqlServerDriver } from "./sqlserver/SqlServerDriver";
 import { OracleDriver } from "./oracle/OracleDriver";
 import { SqliteDriver } from "./sqlite/SqliteDriver";
 import { CordovaDriver } from "./cordova/CordovaDriver";
-import { ReactNativeDriver } from "./react-native/ReactNativeDriver";
 import { NativescriptDriver } from "./nativescript/NativescriptDriver";
 import { SqljsDriver } from "./sqljs/SqljsDriver";
 import { MysqlDriver } from "./mysql/MysqlDriver";
@@ -45,8 +44,6 @@ export class DriverFactory {
                 return new CordovaDriver(connection);
             case "nativescript":
                 return new NativescriptDriver(connection);
-            case "react-native":
-                return new ReactNativeDriver(connection);
             case "sqljs":
                 return new SqljsDriver(connection);
             case "oracle":
diff --git a/node_modules/typeorm/browser/entity-manager/EntityManagerFactory.js b/node_modules/typeorm/browser/entity-manager/EntityManagerFactory.js
index 7a9b350..0007ce0 100644
--- a/node_modules/typeorm/browser/entity-manager/EntityManagerFactory.js
+++ b/node_modules/typeorm/browser/entity-manager/EntityManagerFactory.js
@@ -9,10 +9,12 @@ export class EntityManagerFactory {
      * Creates a new entity manager depend on a given connection's driver.
      */
     create(connection, queryRunner) {
-        if (connection.driver.options.type === "mongodb")
-            return new MongoEntityManager(connection);
-        if (connection.driver.options.type === "sqljs")
-            return new SqljsEntityManager(connection, queryRunner);
+        if (connection.driver.options) {
+            if (connection.driver.options.type === "mongodb")
+                return new MongoEntityManager(connection);
+            if (connection.driver.options.type === "sqljs")
+                return new SqljsEntityManager(connection, queryRunner);
+        }
         return new EntityManager(connection, queryRunner);
     }
 }

Simply create a patches folder, put the above in a file called typeorm+0.3.16.patch and run npx patch-package. If you are using a different version of TypeORM you might get a warning. These files don’t change often though, you can probably simply change the version number in the filename.

To make sure that you run patch-package on every install, you can update your package.json:

  ...
  "scripts": {
    ...
    "postinstall": "patch-package",
  }

@RewriteH and all that +1 or metoo

I am also affected by this issue, but that’s not the constructive way to engage with an open source repo. You are not separate from the developers and asking them something. You are the developer and you are usually just taking up the time of another developer. Different perspective

Last maintainer comment was:

Friendly reminder that we still need a reproducible example of this issue.

https://hackernoon.com/i-thought-i-understood-open-source-i-was-wrong-cf54999c097b

Omg. Sorry. npm i --save-dev @types/node and adding to app.tsconfig.json “types”:[“node”] solved the problem. Hope this helps

@Noitidart As I have found that the issue only happens to me if I actually construct a new instance of the entity, this is rather interesting. You are merely referencing an object, which is not even an entity. Given your case, it would probably suffice if you extract the object into a separate file (btw you could you an enum for that 😛), which would remove any reference to files containing entities in the frontend. Still, seems odd to me, especially mentioning the circumstances in which I experience the issue.

@imnotjames No reproduction right now but rather a question. I use typeorm in my NextJs project and typeorm is only really used on the server (API routes). The catch is, I obviously import the entities in the client code as I want to have the type declaration for them. I suspect this could be the issue for other people as well. Am I using the library wrong? Is there any way to prevent this?

Same deal here. It’s funny I didn’t touch anything in package.json or anywhere. Just some text changes on a page. I had deployed fine for last 2 weeks. Today my nextjs deployment on vercel is failing for react-native thats so funny I don’t use react-native lol

06:50:56.088 | Failed to compile.
-- | --
06:50:56.089 | ModuleNotFoundError: Module not found: Error: Can't resolve 'react-native-sqlite-storage' in '/vercel/path0/node_modules/typeorm/browser/driver/react-native'
06:50:56.089 | > Build error occurred
06:50:56.090 | Error: > Build failed because of webpack errors
06:50:56.090 | at /vercel/path0/node_modules/next/dist/build/index.js:15:924
06:50:56.090 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)

Interesting. This might be a lead. I thought this was A runtime error for some reason.

❤️ Would it be useful for me to share my repo? Its private but nothing especially private.

Edit: Actually here it is. Here is my commits - https://github.com/Noitidart/ai18n/commits/master

You see the latest commit has an “X” on it. And the commit before called “Improve types” has a “Check” meaning it was succesfully deployed. The one with X if you look at that commit, it is just some basic logic in text changes. No packages installed or anything.

@imnotjames No reproduction right now but rather a question. I use typeorm in my NextJs project and typeorm is only really used on the server (API routes). The catch is, I obviously import the entities in the client code as I want to have the type declaration for them. I suspect this could be the issue for other people as well. Am I using the library wrong? Is there any way to prevent this?

Same deal here. It’s funny I didn’t touch anything in package.json or anywhere. Just some text changes on a page. I had deployed fine for last 2 weeks. Today my nextjs deployment on vercel is failing for react-native thats so funny I don’t use react-native lol

06:50:56.088 | Failed to compile.
-- | --
06:50:56.089 | ModuleNotFoundError: Module not found: Error: Can't resolve 'react-native-sqlite-storage' in '/vercel/path0/node_modules/typeorm/browser/driver/react-native'
06:50:56.089 | > Build error occurred
06:50:56.090 | Error: > Build failed because of webpack errors
06:50:56.090 | at /vercel/path0/node_modules/next/dist/build/index.js:15:924
06:50:56.090 | at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/telemetry/trace/trace.js:6:584)

Interesting. This might be a lead. I thought this was A runtime error for some reason.