issue with typescript usage

[tractorcow]

This works perfectly fine in dev, but does not seem to work in production build.

const genshindbBase = require('./genshindb-nodata.js');
console.log(genshindbBase, 'genshindbBase')
console.log(genshindbBase.setOptions, 'setOptions');

dev console:

running static build:

Context: this is a create-react-app using typescript.

Is there any npm installable version of genshindb-nodata I can import into typescript?

[tractorcow]

With lots of painful testing I got this to work!

import type { default as genshinNamespace } from 'genshin-db';

export type genshinDbType = typeof genshinNamespace

const genshindbBase = require('./genshindb-nodata.js');

declare global {
  interface Window {
    GenshinDb?: genshinDbType;
  }
}

// Fixes some issues with lazy loading genshindb
if (typeof window !== 'undefined') {
  window.Buffer = window.Buffer || require("buffer").Buffer;
}

// Sometimes window.GenshinDB works (dist build), sometimes the require works (dev)
// I do not know why we need both
const genshindb = window.GenshinDb || genshindbBase as genshinDbType

export default genshindb

For production build we have to rely on window.GenshinDb, but on dev the import works fine.

[tractorcow]

Weird finding but not a bug, so will close thanks :D

[theBowja]

??? Are you sure this is not a bug???

[theBowja]

Actually the intended usage was not importing genshindb-nodata with require but straight up using window.GenshinDb because the webpack sets it globally to the window object.

As for types, I don't have a solution. Looks like you fixed that by importing types-only from the main package. Hopefully that won't include the data bloat from the main package. I'll probably need to publish a separate npm package for types or maybe include them in the data loader itself.

I'm not sure what you're doing with window.Buffer

[theBowja]

Actually can you check if require('GenshinDb') works properly in production?

[tractorcow]

Setdata was crashing until I manually installed Buffer and registered it. I think it was a node vs browser runtime issue.

I'm sure the main issue here is just my lack of understanding 😁

[tractorcow]

As for types, I don't have a solution. Looks like you fixed that by importing types-only from the main package. Hopefully that won't include the data bloat from the main package

Using 'import type' makes it safe to use without bloat

[tractorcow]

I'll probably need to publish a separate npm package for types or maybe include them in the data loader itself.

I suggest publishing the loader itself as a package. I used the cdn methods of loading data and it works extremely well. I'll share my solution once it's working. Maybe you could package a cdn data loader helper too?

[tractorcow]

Here's my data loader helper FYI. I built it as a react hook that could asynchronously load multiple data files (as needed). There was an issue with the urls in your readme, but I found that cdn.jsdelivr.net worked fine (and no cors issues on the browser).

https://github.com/tractorcow/genshin-teamspin/pull/2/files#diff-f946834ddb9c994e8885bc1e5155364033247794678d4a1db62c92a41cc7ff89