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

Usage in a web browser with a bundler #60

Open
catamphetamine opened this issue Jun 5, 2023 · 0 comments
Open

Usage in a web browser with a bundler #60

catamphetamine opened this issue Jun 5, 2023 · 0 comments

Comments

@catamphetamine
Copy link

Hi.
The readme provides an example of using this library in a web browser via a <script/> tag:

<input type="file">

<script type="module">
import * as id3 from '//unpkg.com/id3js@^2/lib/id3.js';

document
  .querySelector('input[type="file"]')
  .addEventListener('change', async (e) => {
    const tags = await id3.fromFile(e.currentTarget.files[0]);
    // tags now contains v1, v2 and merged tags
  });
</script>

That's not the most conventional way of using packages in a web browser.
The most conventional one is using a "bundler" like Webpack and importing directly from npm packages.

Example:

import { fromFile } from 'id3js'

const tags = await fromFile(file)
// tags now contains v1, v2 and merged tags

But it throws an error:

Module not found: Can't resolve 'fs' in '...\node_modules\id3js\lib'
node_modules/id3js/lib/localReader.js

So the main file of the library looks like this:
https://unpkg.com/browse/id3js@2.1.1/lib/id3.js

{
  "name": "id3js",
  "version": "2.1.1",
  "main": "./lib/id3.js",
  "types": "./lib/id3.d.ts",
  "type": "module",
  ...
}
...

export async function fromPath(path) {
  const mod = await import('./localReader.js');
  return fromReader(new mod.LocalReader(path));
}

...

For some reason, it seems to execute that await import() statement even though I didn't call that specific function called fromPath().
The error happens before calling any function, already at the import level:

import * as Id3 from 'id3js'

I've fixed that in my fork by introducing two separate exports: /browser and /node.

See the updated README:
https://github.com/catamphetamine/id3

It now works in my setup (Webpack).

I've also added a function for getting an album cover image data URL.

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

No branches or pull requests

1 participant