search

ujjwalguptaofficial / JsStore

Simplifying IndexedDB with SQL like syntax and promises
http://jsstore.net/
MIT License
858 stars 110 forks source link

Integration with Next.js #192

Closed hylickipiotr closed 3 years ago

hylickipiotr commented 3 years ago

Hi, I'm having a problem implementing indexedDB using with next.js. I've created service using official examples JsStore Examples. I used worker-loader and @zeit/next-workers to load worker from the package jsstore.

project source

Thanks to any help 😃 

error - Error: Cannot find module '/Users/piotr/dev/pracuj-pl-offers/.next/server/pages-manifest.json'
Require stack:
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/require.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/load-components.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/api-utils.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/next.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/lib/start-server.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/cli/next-dev.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at getPagePath (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/require.js:1:657)
    at requirePage (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/require.js:1:1062)
    at loadComponents (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/load-components.js:1:807)
    at DevServer.findPageComponents (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:74:296)
    at DevServer.renderErrorToHTML (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:134:120)
    at DevServer.renderErrorToHTML (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/next-dev-server.js:34:1216)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async DevServer.renderToHTML (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:133:1277)
    at async DevServer.renderToHTML (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/next-dev-server.js:34:578)
    at async DevServer.render (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:72:236)
    at async Object.fn (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:56:580) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/require.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/next.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/lib/start-server.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/cli/next-dev.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/bin/next'
  ]
}
Error: Cannot find module '/Users/piotr/dev/pracuj-pl-offers/.next/server/pages-manifest.json'
Require stack:
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/require.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/load-components.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/api-utils.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/next.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/lib/start-server.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/cli/next-dev.js
- /Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at getPagePath (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/require.js:1:657)
    at requirePage (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/require.js:1:1062)
    at loadComponents (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/load-components.js:1:807)
    at DevServer.findPageComponents (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:74:296)
    at DevServer.renderErrorToHTML (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:134:120)
    at DevServer.renderErrorToHTML (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/next-dev-server.js:34:1349)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async DevServer.renderToHTML (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:133:1277)
    at async DevServer.renderToHTML (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/next-dev-server.js:34:578)
    at async DevServer.render (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:72:236)
    at async Object.fn (/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js:56:580) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/require.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/load-components.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/api-utils.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/next-server/server/next-server.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/next.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/server/lib/start-server.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/cli/next-dev.js',
    '/Users/piotr/dev/pracuj-pl-offers/node_modules/next/dist/bin/next'
  ]
}
// src/lib/storage-service/idb.ts
import * as JsStore from "jsstore";
import { IDataBase } from "jsstore";
import { offersTable } from "./Offers/offers.table";

const getWorkerPath = () => {
  if (process.env.NODE_ENV === "development") {
    return require("worker-loader!jsstore/dist/jsstore.worker.js");
  } else {
    return require("worker-loader!jsstore/dist/jsstore.worker.min.js");
  }
};

const workerPath = getWorkerPath();

export const idbCon = new JsStore.Connection(new Worker(workerPath));
export const dbname = "jobs";

export const getDatabase = (): IDataBase => ({
  name: dbname,
  tables: [offersTable],
});

export const initJsStore = async () => {
  try {
    const dataBase = getDatabase();
    await new JsStore.Connection().initDb(dataBase);
  } catch (err) {
    console.error(err);
  }
};
// src/pages/_app.js
import { ConfigProvider } from "antd";
import "antd/dist/antd.css";
import plPL from "antd/lib/locale/pl_PL";
import moment from "moment";
import "moment/locale/pl";
import { AppProps } from "next/app";
import React from "react";
import ReduxProvider from "../lib/redux/provider";
import "../styles/tailwind.css";
import "../styles/main.css";
import { initJsStore } from "../lib/storage-service/idb";

moment.locale("pl");
initJsStore();

const App = ({ Component, pageProps }: AppProps) => {
  return (
    <ReduxProvider>
      <ConfigProvider locale={plPL}>
        <Component {...pageProps} />;
      </ConfigProvider>
    </ReduxProvider>
  );
};

export default App;

// next.config.js
const withWorkers = require("@zeit/next-workers");
module.exports = withWorkers({
  webpack: (config) => {
    config.module.rules.push({
      test: /\.worker\.js/,
      use: {
        loader: "worker-loader",
        options: {
          name: "static/[hash].worker.js",
          publicPath: "/_next/",
        },
      },
    });

    config.output.globalObject = `(typeof self !== 'undefined' ? self : this)`;

    return config;
  },
});

Node version: 14.15.4 NPM version: 6.14.10 Next vesion: 10.0.5 JsStore version: 3.12.0

ujjwalguptaofficial commented 3 years ago

Issue is not with jsstore but the next rendering. I also tried different way but couldn't solve it by using worker-loader.

So i have downloaded the file and put it into public folder and use it in public path. I have sent you a PR - https://github.com/hylickipiotr/jobs/pull/1

Also important point to not here is to call initJsStore in componentDidMount, so that these codes are executed in client side.

hylickipiotr commented 3 years ago

Thank you for your help :D