[go: up one dir, main page]

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

Unexpected "typeof" error when using DataSource type: 'react-native' for using Sqlite with React #11149

Open
1 of 18 tasks
Tuckertcs opened this issue Nov 27, 2024 · 0 comments
Open
1 of 18 tasks

Comments

@Tuckertcs
Copy link
Tuckertcs commented Nov 27, 2024

Issue description

When trying to set up TypeORM to use Sqlite with React via the 'react-native' DataSource type, an error "Unexpected "typeof"" prevents compilation.

Expected Behavior

The expected behavior is that npm run dev should compile and run the React app, however initializing the DataSource results in a compilation error.

Actual Behavior

Running npm run dev results in the following error:

C:\my-react-app> npm run dev

> my-react-app@0.0.0 dev
> vite


  VITE v6.0.1  ready in 615 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
X [ERROR] Unexpected "typeof"

    node_modules/react-native/index.js:15:7:
      15 │ import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionShe...
         ╵        ~~~~~~

C:\my-react-project\node_modules\esbuild\lib\main.js:1476
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
node_modules/react-native/index.js:15:7: ERROR: Unexpected "typeof"
    at failureErrorWithLog (C:\my-react-app\node_modules\esbuild\lib\main.js:1476:15)
    at C:\my-react-app\node_modules\esbuild\lib\main.js:945:25
    at C:\my-react-app\node_modules\esbuild\lib\main.js:1354:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {   
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v20.10.0

Steps to reproduce

(I'm on Windows 10, though I doubt it's OS-specific)

Run the following:

C:\> npm create vite@latest

Name the project whatever (my-react-app), then select React and TypeScript.

C:\> cd my-react-app
C:\my-react-app> npm install typeorm --save
C:\my-react-app> npm install sqlite3 --save
C:\my-react-app> npm install react-native-sqlite-storage --save
C:\my-react-app> npm install
C:\my-react-app> npm run dev

There should be no errors at the moment.

Create the file C:\my-react-app\src\db\data-source.ts:

import { DataSource } from 'typeorm';

export const AppDataSource = new DataSource({
  type: 'react-native' as any, // Compile error without casting to any, despite it being a valid option per the documentation.
  database: 'src/asets/db.sqlite', // Use `sqlite3 db.sqlite "VACUUM;"` to create this. Though you can reproduce the error without making this file.
  entities: [],
  migrations: [],
  
});

Again, run npm run dev and see that there's no errors.

Finally, add this code to C:\my-react-app\src\App.tsx:

import { useState } from 'react';
import './App.css';
import { AppDataSource } from './db/data-source';

export default function App() {
  // AppDataSource.initialize() causes the error:
  AppDataSource.initialize()
    .then(() => console.log('Database initialized.'))
    .catch((error) => console.log(error));
  const [db, setDb] = useState(AppDataSource);

  return (
    <h1>Testing</h1>
  );
}

The error:

C:\my-react-app> npm run dev

> my-react-app@0.0.0 dev
> vite


  VITE v6.0.1  ready in 288 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help
X [ERROR] Unexpected "typeof"

    node_modules/react-native/index.js:15:7:
      15 │ import typeof ActionSheetIOS from './Libraries/ActionSheetIOS/ActionShe...
         ╵        ~~~~~~

C:\my-react-app\node_modules\esbuild\lib\main.js:1476
  let error = new Error(text);
              ^

Error: Build failed with 1 error:
node_modules/react-native/index.js:15:7: ERROR: Unexpected "typeof"
    at failureErrorWithLog (C:\my-react-app\node_modules\esbuild\lib\main.js:1476:15)
    at C:\my-react-app\node_modules\esbuild\lib\main.js:945:25
    at C:\my-react-app\node_modules\esbuild\lib\main.js:1354:9
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {   
  errors: [Getter/Setter],
  warnings: [Getter/Setter]
}

Node.js v20.10.0

My Environment

Dependency Version
Operating System Windows 10
Node.js version 20.10.0
Typescript version 5.6.3
TypeORM version 0.3.20

Additional Context

Not sure if it's related, but the reason I'm using DataSource type 'react-native' instead of 'sqlite' is because it's the recommended solution for the first problem I was having, seen here: #9873

Relevant Database Driver(s)

  • aurora-mysql
  • aurora-postgres
  • better-sqlite3
  • cockroachdb
  • cordova
  • expo
  • mongodb
  • mysql
  • nativescript
  • oracle
  • postgres
  • react-native
  • sap
  • spanner
  • sqlite
  • sqlite-abstract
  • sqljs
  • sqlserver

Are you willing to resolve this issue by submitting a Pull Request?

Yes, I have the time, but I don't know how to start. I would need guidance.

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

No branches or pull requests

1 participant