Import in Next JS fails

[MaRaSu]

I tried integrating library to my Next JS (v13 / pages router) based app, however it failed with a error message on browser console:

./node_modules/overpass-frontend/src/loadOsmFile.js:1:0
Module not found: Can't resolve 'fs'

I'm not an expert in bundling but it seemed like the way overpass-frontend relies on browserify is not co-operating with Next JS build system. I was able to circumvent the issue by importing as

import 'overpass-frontend/dist/overpass-frontend.js';
const OverpassFrontendClass = window.OverpassFrontend;`

Which solved the problem when I was using overpass-frontend directly. But then I integrated overpass-layer and got the same problem since overpass-layer tries to require directly "overpass-frontend" which triggers the same issue. I tried changing the require to point to "overpass-frontend/dist/overpass-frontend.js" but it did not work this time, probably due to how bundling works.

This looks like a great library, especially together with overpass-layer. Any ideas would be appreciated what to look for in trying to patch this to work. Next JS is not always the easiest to get right, but other bundling issues I have run into have been much easier to solve.

[MaRaSu]

...I bypassed the bundling by loading directly from CDN with <script> tag. Both overpass-frontend and overpass-layer work now really nicely! This is not preferred way of bundling these libs but works for now. Thanks for the effort in developing these!

[plepe]

Ok, I will look into it. I think, replacing the first line in src/loadOsmFile.js should do the job, because file loading will only be executed on NodeJS:

const fs = undefined