在使用Prisma ORM的React应用程序中，我在Table组件（用于显示数据的组件）中导入Prisma，并得到一个错误：
表.jsx组件：

import React, { useState, Fragment } from "react";
import ReadOnlyRow from "./ReadOnlyRow";
import "./table.css"
import { prisma } from "../../prisma/prismaScript";

const historico = async () => {
  const hst = await prisma.historico.findMany()
  return hst
}

const Table = () => {
  const [contacts, setContacts] = useState(historico);
  const [addFormData, setAddFormData] = useState({
    "data": "",
    "barcaca": "",
    "inspecao": "",
    "inspetor": "",
    "anotacoes": "",
    "relatorio": ""
  });

  const handleAddFormChange = (event) => {
    event.preventDefault();

    const fieldName = event.target.getAttribute("name");
    const fieldValue = event.target.value;
    const newFormData = { ...addFormData };
    newFormData[fieldName] = fieldValue;

    setAddFormData(newFormData);
  };

  const handleAddFormSubmit = (event) => {
    event.preventDefault();

    const newContact = {
      data: addFormData.data,
      barcaca: addFormData.barcaca,
      inspecao: addFormData.inspecao,
      inspetor: addFormData.inspetor,
      anotacoes: addFormData.anotacoes,
      relatorio: addFormData.relatorio
    };

    const newContacts = [...contacts, newContact];
    setContacts(newContacts);
  };

  return (
    <div className="app-container">
      <form>
        <table className="table table-hover">
          <thead>
            <tr className="table-primary">
              <th>Data</th>
              <th>Barcaça</th>
              <th>Inspeção</th>
              <th>Inspetor</th>
              <th>Anotações</th>
              <th>Relatório</th>
            </tr>
          </thead>
          <tbody>
            {contacts.map((contact) => (
              <Fragment>
                  <ReadOnlyRow
                    contact={contact} 
                  />
              </Fragment>
            ))}
          </tbody>
        </table>
      </form>

      <h2>Add a Contact</h2>
      <form onSubmit={handleAddFormSubmit}>
        <input
          type="date"
          name="data"
          required="required"
          placeholder="DD/MM/AAAA"
          onChange={handleAddFormChange}
        />
        <input
          type="text"
          name="barcaca"
          required="required"
          placeholder="Barcaça"
          onChange={handleAddFormChange}
        />
        <input
          type="text"
          name="inspecao"
          required="required"
          placeholder="Inspeção"
          onChange={handleAddFormChange}
        />
        <input
          type="text"
          name="inspetor"
          required="required"
          placeholder="IN"
          onChange={handleAddFormChange}
        />
        <input
          type="number"
          name="anotacoes"
          required="required"
          placeholder="Anotações"
          onChange={handleAddFormChange}
        />
        <input
          type="file"
          name="relatorio"
          required="required"
          placeholder="Relatório"
          onChange={handleAddFormChange}
        />
        <button type="submit">Adicionar</button>
      </form>
    </div>
  );
};

export default Table;

Prisma脚本：

import { PrismaClient } from "@prisma/client";

declare global {
  var prisma: PrismaClient | undefined;
}

export const prisma =
  global.prisma ||
  new PrismaClient({
    log: ["info", "warn", "error"],
  });

if (process.env.NODE_ENV !== "production") {
  global.prisma = prisma;
}

prisma.schema文件：

// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "sqlite"
  url      = "file:./dev.db"
}

model Inspetor {
  ID         String        @id @default(uuid())
  Nome       String        @unique
  Email      String        @unique
  Inspecoes  Historico[]   
}

model Barcaca {
  ID          String        @id @default(uuid())
  Nome        String        @unique
  Anotacoes   Int 
  Inspecoes   Historico[] 

}

model Rebocador {
  ID          String        @id @default(uuid())
  Nome        String        @unique
  Anotacoes   Int
  Inspecoes   Historico[]   
}

model Historico {
  ID            Int           @id @default(autoincrement())
  Data          DateTime      @default(now())
  Barcaca       Barcaca?      @relation(fields: [BarcacaId], references: [ID])
  BarcacaId     String?
  Rebocador     Rebocador?    @relation(fields: [RebocadorId], references: [ID])
  RebocadorId   String?
  Inspetor      Inspetor      @relation(fields: [InspetorId], references: [ID])
  InspetorId    String
  Inspecao      String         
  Anotacoes     Int 
  Relatorio     String  
  
}

我希望数据显示在表组件中，但
“未捕获的错误：PrismaClient无法在浏览器中运行。”
出现错误。