ESM/browser support

[felixfbecker]

I'd love to use this package in the browser, but currently it uses Node-style CommonJS and also requires the path module for path.extname(). Would it be possible to support ESM through package.json fields, and remove the path dependency?

[dougwilson]

I am fine to add more platforms than Node.js if that does not end up forking the code too much. If someone would like to put a pull request together that adds said support and includes the appropriate tests that back up whatever the platform is in the CI. It sounds like you said web browser, so we'd want to make sure some kind of web browser test matrix is added to the CI with it.

As for the path dependency, this has been brought up many times and no, we are not interested in removing it, as it is part of our API. See closed issues on that point.

[dougwilson]

This package actually works quite well in the web browser, with the benefit of having a smaller footprint by inlining the mime-db dependency and storing it a bit more compact: https://www.npmjs.com/package/mime

[felixfbecker]

Thanks for the reply! I wasn't aware the path thing was brought up before, apologies. I read through https://github.com/jshttp/mime-types/issues/50 but don't understand what you mean with "as it is part of our API"? From that thread I thought it would be possible to include an extname helper function.

I really just want to use type-is in the browser, but it has a dependency on this package, so this package would need to be browser-ready too and I can't swap it for mime. Or would you consider replacing mime-types in type-is with mime?

[dougwilson]

Or would you consider replacing mime-types in type-is with mime?

No, as the purpose of this module was to build out our own chain for Express, and that move would have defeated the entire purpose of creating this module :)

[nathanczachur]

The browser support might not be as good as you think. I have tested a few cases with modern versions of Chrome on Windows and Chrome on some Android, all don't work unfortunately.

Would you be open to adding some messaging to the README.md to deter people from using it on a browser application?

[dougwilson]

Hi @nathanczachur this module does not work in the web browser, which is what this issue is about (seeing what it would take to make it work in the web browser). As far as the README, it does currently state it is a Node.js module (thus meant for Node.js); we could list everywhere it doesn't work, but that would be endless. It is much better practice to list where it does work, as the list is small and determinate.

[ZaidHassan-PwC]

Agree with the people stating that the support isn't great for browsers. Here's the build error I'm getting after we had to upgrade to [email protected] to deal with vulnerabilities reported by npm.

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
        - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
        - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
        resolve.fallback: { "path": false }

If a solution for this isn't planned, are there more browser-friendly alternatives out there that I can use instead?

[skypesky]

browser get mimeType, see mime-wrapper: https://www.npmjs.com/package/mime-wrapper

[aynh]

There is a path drop-in replacement called pathe, you might want to check their codes.

[MartinX3]

Using nuxt / vue / vuetify 3 with node 19 and it doesn't work anymore in my newest chromium browser

error caught during app initialization TypeError: extname is not a function
    at Object.lookup (index.js:138:19)

[alshdavid]

I created a fork where I migrated the package to TypeScript and included browser support: https://github.com/alshdavid/mime-types

I would love to merge parts of it with upstream if that's something the maintainers are open to

[dougwilson]

Everyone looking to use a mime mapper in the web browser should be using the module https://www.npmjs.com/package/mime