Error using tinybase in electron.js app

[uwemneku]

Describe the bug

I'm currently trying to use tinybase in an electon.js personal project but keep on getting an import error saying
Error [ERR_REQUIRE_ESM]: require() of ES Module ...\tinybase.js from .....\dataBase.js not supported. Instead change the require of tinybase.js in ...\dataBase.js to a dynamic import() which is available in all CommonJS modules.

dataBase.js is the file where I'm trying to use tinybase

Your Example Website or App

https://github.com/uwemneku/electron-quick-start/blob/master/main.js

Steps to Reproduce the Bug or Issue

1. Clone this repo
2. Start the app npm start

Expected behavior

As a user, I expect the app to start without any issues

Screenshots or Videos

Platform

• OS: [Windows]
• Browser: [Chronium]

Additional context

No response

[jamesgpearce]

You may want to try the UMD variant of the distribution, down in the lib/umd folder. If you require it directly by file name, that might be it. Let me know!

[jamesgpearce]

Hey @uwemneku, did that work for you? I'd like to close out this issue if so :)

[uwemneku]

You may want to try the UMD variant of the distribution, down in the lib/umd folder. If you require it directly by file name, that might be it. Let me know!

I tried importing from "/lib/umb" and got the same error. No luck with other formats. I was able to find a way around by adding tinybase as a dynamic import

async function startApp(){
   const tinybase = await import("tinybase")
  // do some stuff
}

[uwemneku]

@jamesgpearce I poked around the codebase and I think I found a fix,

I added cjs format to the exported lib

     await compileModule(module, false, `${LIB_DIR}/cjs`, 'cjs');
     await copyDefinitions(`${LIB_DIR}/cjs`);

renamed file extension to .cjs when exporting to lib/cjs

  const fileExtension = format === 'cjs' ? 'cjs' : 'js';

  const outputConfig = {
    dir,
    entryFileNames: `[name].${fileExtension}`,
    format,
    globals: {
      react: 'React',
      fs: 'fs',
    },
    interop: 'default',
    name:
      'TinyBase' +
      (module == 'tinybase'
        ? ''
        : module == 'ui-react'
        ? 'UiReact'
        : module[0].toUpperCase() + module.slice(1)),
  };

  

then I added the cjs directory to the exports in package.json

  "exports": {
    ".": "./lib/tinybase.js",
    "./package.json": "./package.json",
    "./*": "./lib/*.js",
    "./cjs": "./lib/cjs/tinybase.cjs"
  },

To test, I created a production build using npm run compileForProd, replaced the lib files of the node__modules in my electron project with the new ones generated and then imported tinybase using

import { createStore } from "tinybase/cjs";

and it worked!!!!! I was able to get the "hello world" example running.
It also worked a bare node project and was I able to use tinybase without creating a .mjs file

I would love to make a PR, but have no idea how to test to make sure I didn't break anything

[jamesgpearce]

Ok that's great! I can take that and test it out if you'd like.

[uwemneku]

Ok that's great! I can take that and test it out if you'd like.

Awesome. Thanks James!!!

[WonderPanda]

Does this mean we can expect to have a CJS version of TinyBase available soon? We've been having a lot of trouble being able to use TinyBase in Node scripts and test setups due to the default ESM module output and trying to use any of the other formats don't seem to help

[jamesgpearce]

Re-opening so I can track the cjs requirement!

[WonderPanda]

Re-opening so I can track the cjs requirement!

FWIW I tried out the suggestion from @uwemneku yesterday in a fork of tinybase and with his small changes to the gulpfile to include the CJS output it fixed all the problems we'd been facing with using TinyBase in our current codebase

[jamesgpearce]

well ok, this could be the easiest addition ever then :)

[jamesgpearce]

OK, please see https://github.com/tinyplex/tinybase/releases/tag/v3.0.2 - I also added es6 and some other helpful import patterns. Feel free to verify again! :)