cannot find module "fs"

[MartinDawson]

Tried install v3.5 and v3.6 and I still get this error as soon as I require or import this package:

Error: cannot find module "fs".

What am I doing wrong? No other npm module gives me this.

Webpack version: 3.0

[aadsm]

fs is a built-in module of nodejs, there's no reason it shouldn't work. Which node version are you using?

[MartinDawson]

7.9.0.

I am running webpack through asp.net spa services although that shouldn't matter.

[aadsm]

I'm not sure how webpack plays a part here. I don't use it in my own projects so maybe there's something there I'm missing.
I've created a new project locally like this: https://gist.github.com/aadsm/7fdb3cb8c4e087e3d2497873655e88f0, then run npm installand node main.js. It run without a problem. You can also test this library here https://npm.runkit.com/jsmediatags.

Can you post your setup here?

[MartinDawson]

@aadsm Thanks for the fast responses.

I cloned a simple react app with webpack config and just changed the index.js to use jsmediatags.

https://github.com/MartinDawson/jsmediatagserror

Cd into it then do npm install. Then do npm run dev. You will see the error in the console or browser console.

Same error here. I tried to add

node: { fs: 'empty' }

as per this thread suggests: webpack-contrib/css-loader#447

If I do this then I get a different error, cannot find fs.stat. Probably because the above just removes the file system altogether instead of fixing the problem I presume. Don't know what to do.

[aadsm]

Thanks for the repo, I was able to understand how the webpack thingy works.
This is being run on the browser in the end, not in node, that's why fs module doesn't exist as it's a node module.
The npm module I publish does contain the browser version (added for bower support) but you need to import it explicitly: import jsmediatags from 'jsmediatags/dist/jsmediatags';.
However, it still doesn't work for various reasons:

1. jsmediatags checks the global process variable to figure out if it's running under node and for some reason in this environment this variable exists! So wrong assumptions are being made in the core logic.
2. Your path to the mp3 file is a local path - "./Sleep Away.mp3" - but since this is being run in the browser it should be an http:// path.

I don't know much about webpack because I've never used it so no idea what all of these findings mean in this context, but I can tweak the process check to be more robust for this situation.

Another thought is: since webpack tries to run node modules on the browser maybe there's a way to polyfil the fs module for the browser? Then you wouldn't need to worry with all this and it would just work (from a quick google search it doesn't look like it though).

[MartinDawson]

Thanks for reply. That's got me one step closer.

https://stackoverflow.com/questions/29096018/react-webpack-process-env-is-undefined

It seems that process is defined when target: 'web' is set in webpack. This is also the default setting.
I can't change this because other code depends on process.

A couple of things:

1. Could you please change this when you have time. It's not a critical issue because I can work around it by providing a valid file url all the time.

2. http files don't seem to work either. Could you give an example please? I tried http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3 and it just gives a generic error. It definitely has metadata in the song.

3. Blob preview files aren't supported by that regex. I want to get the metadata from blob preview .mp3 files such as: blob:http://localhost:8070/1dd7e4bc-a8d8-4fd9-bbee-672399aa747c. Could this be supported? The reason I need this supporting is because I want to get the metadata tags instantly before uploading the files so I can populate a form for the user automatically.

Thanks.

[aadsm]

1. 👍
2. You can only load mp3 files from the same domain as your app. You didn't paste the error you get but that's probably what the issue is.
3. You can read directly from a Blob object, that's supported. Check the Blob example here: https://github.com/aadsm/jsmediatags/#browser

[MartinDawson]

Works fantastic.

Thanks for all the help.