FileType.{extensions,mimeTypes} is undefined in browser build

[qodeboy]

Hello,

Documentation states that FileType.extensions and FileType.mimeTypes should list corresponding lists. But when accessed from a browser build, both properties are undefined.

Reproducible demo

Consider following code:

import FileType from "file-type/browser";
console.log(FileType, FileType.extensions, FileType.mimeTypes)

It results in following:

Here is the demo: https://codesandbox.io/s/charming-edison-7q4p7?file=/src/App.vue

Expected behaviour:

List of supported extensions and mime types are being logged.

[qodeboy]

Ok, sorted it out.

I'm using Nuxt + TypeScript and the thing is initially file-type has been throwing error

This dependency was not found:                                                                                                                                                          
* fs in ./node_modules/strtok3/lib/FsPromise.js

When imported as import FileType from "file-type";. But is appears there is a webpack issue when target is set to node, see https://stackoverflow.com/questions/39249237/node-cannot-find-module-fs-when-using-webpack.

So the solution was to add

node: {
    fs: "empty"
}

To the webpack config and import FileType correctly using import FileType from "file-type";

Cheers!

[Haraldson]

Your ‘solution’ makes it not crash initially, but it will ultimately when trying to use the fromFile in a browser, as fromBlob isn’t available anymore in Node mode. This is no fix in my opinion, and it’s really weird that documented properties aren’t there when using the file-type/browser edition…

I guess what I can do is add node: { fs: 'empty' }, and import selectively from each target, but this API feels super weird.

import FileType from 'file-type/browser'
import { extensions as FileTypeExtensions } from 'file-type'