Module not found: 'main/codecs' in '/lerna-monorepo/node_modules/json-url/src/main'

[andy14312]

I'm trying to use lerna to maintain multiple packages. One of my packages uses json-url npm module and when I tried to run my webpack bundle it gave me this error
Module not found: 'main/codecs' in '/lerna-monorepo/node_modules/json-url/src/main'

the folder structure is
lerna-monorepo
--node_modules
json-url
--packages
--mypackage

I believe this is due to usage of absolute file referencing in json-url/src/main/index.js

Could you please help me out here

[bryanbraun]

I saw a similar issue when attempting to install this package with snowpack, (which is is like a bundler for es6 modules):

✖ 'main/codecs' is imported by 'node_modules/json-url/src/main/index.js', but could not be resolved.
  Make sure that the package is installed and that the file exists.
✖ 'main/loaders' is imported by 'node_modules/json-url/src/main/index.js', but could not be resolved.
  Make sure that the package is installed and that the file exists.

I found that I could make the errors go away by digging into my node_modules folder and changing the json-url paths to use relative file referencing like this:

- import ALGORITHMS from 'main/codecs';
+ import ALGORITHMS from './codecs';
- import LOADERS from 'main/loaders';
+ import LOADERS from './loaders';

I also found that similar changes were needed in other files, like codecs/index.js, codecs/lzma.js, codecs/lzstring.js, and codecs/lzw.js.

I'm thinking that the module entrypoint still needs some tweaking before it can be used directly as es6 imports in browsers.

[kmiyashiro]

Currently, the module entrypoint is broken due to babel aliases.

I'm importing json-url into a webpack project (Gatsby/Webpack) and using import JsonUrl from 'json-url', which works in development but fails during build.

Generating SSR bundle failed

Can't resolve './main/codecs' in '/Projects/node_modules/json-url/src/main'

If you're trying to use a package make sure that './main/codecs' is installed. If you're trying to use a local file make sure that the path is correct.

File: node_modules/json-url/src/main/index.js

I'm actually surprised that it works in development, I thought node_modules are not run through babel. It's possible that webpack is picking up the browser entrypoint instead of module during development.

The fix would be to make the module entrypoint not dependent on babel, which would just be making the import paths relative as explained here: #17 (comment)

Reproduction: https://github.com/kmiyashiro/json-url-import-repro

Workaround: import JsonUrl from "json-url/dist/node"

@masotime This is due to using babel aliases which are not processed when importing in another project. They are fine if you only intend the built libraries to be used and imported, but since package.json module points to src/main/index.js, it breaks.

[bryanbraun]

I took a pass at updating the import paths in bryanbraun@6115645 and while that did make json-url itself es6 module compatible, I was still running into warnings saying that json-urls dependencies used node-specific features that would need to be polyfilled:

> npx snowpack@2.9.0

[snowpack] ! installing dependencies…
[snowpack] node_modules/msgpack5/index.js
   Import "assert" (Node.js built-in) is not available in the browser. Run with --polyfill-node to fix.
[snowpack] node_modules/lzma/index.js
   Import "path" (Node.js built-in) is not available in the browser. Run with --polyfill-node to fix.
[snowpack] node_modules/msgpack5/lib/decoder.js
   Import "util" (Node.js built-in) is not available in the browser. Run with --polyfill-node to fix.
[snowpack] node_modules/safe-buffer/index.js
   Import "buffer" (Node.js built-in) is not available in the browser. Run with --polyfill-node to fix.
[snowpack] node_modules/readable-stream/lib/_stream_readable.js
   Import "events" (Node.js built-in) is not available in the browser. Run with --polyfill-node to fix.
⋮

That makes me think that if we're truly going to have a "module" entrypoint in package.json, then it'll need to point to a module-specific build (perhaps /dist/module?) that has been compiled (and polyfilled), similar to the /dist/browser one.

It looks like Webpack has just added support for module builds in v5, so setting that up is probably the best route to getting this working.

The alternative is to revert f7d69af, so tools like webpack and snowpack will rely on the browser or node entrypoints instead (as a side-note, another workaround for this issue is to install "json-url": "2.4.0", which was the version before the module entrypoint was added. 😅 )

[masotime]

Thanks for diving into this. My day job has been... busier than usual so it's been hard to find the time to update the codebase which is admittedly out of date.

I can't guarantee I'll have time to work on this, but I'll keep an eye out for PRs.

[bryanbraun]

Hey @masotime, I was holding out hope that Webpack would shortly add support for Module builds, but 6 months later it's still not here. 😕

I think it's probably best to just revert the module entrypoint for now, so this issue won't happen anymore—so I put together a PR here. It should be pretty straightforward to merge and bump the package version.

If you want to revisit modules later once Webpack supports module builds, I'd be happy to help with that.