ERR_INVALID_URL for es-module-shims when defaultProvider = 'nodemodules'

[zachsa]

Running the JSPM generator with defaultProvider = 'nodemodules' doesn't work as I expected. I'm using JSPM via the chomp extension - here is the task definition:

[[task]]
name = 'jspm:react'
dep = 'clients/html/#.html'
target = '.cache/#.html'
template = 'jspm'
[task.template-options]
env = ['browser', 'production', 'module']
default-provider = 'nodemodules'
preload = true
integrity = false

And I get the following error:

node:internal/errors:465
    ErrorCaptureStackTrace(err);
    ^

TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:372:5)
    at URL.onParseError (node:internal/url:563:9)
    at new URL (node:internal/url:643:5)
    at Resolver.resolveLatestTarget (file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:927:18)
    at Resolver.resolveLatestTarget (file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1425:85)
    at Generator.htmlGenerate (file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:2663:58)
    at async file:///home/zach/code/saeon/repositories/somisana/web//[cm]:16:41 {
  input: 'node_modules/es-module-shims',
  code: 'ERR_INVALID_URL'
}

Node.js v18.0.0

[guybedford]

Can you share what packages you are importing here?

[zachsa]

The import map produced when the provider is jspm looks like this:

  {
    "scopes": {
      "../": {
        "react": "https://ga.jspm.io/npm:react@18.0.0/dev.index.js",
        "react-dom/client": "https://ga.jspm.io/npm:react-dom@18.0.0/dev.client.js",
        "react/jsx-runtime": "https://ga.jspm.io/npm:react@18.0.0/dev.jsx-runtime.js"
      },
      "https://ga.jspm.io/": {
        "process": "https://ga.jspm.io/npm:@jspm/core@2.0.0-beta.24/nodelibs/browser/process.js",
        "react": "https://ga.jspm.io/npm:react@18.0.0/dev.index.js",
        "react-dom": "https://ga.jspm.io/npm:react-dom@18.0.0/dev.index.js",
        "scheduler": "https://ga.jspm.io/npm:scheduler@0.21.0/dev.index.js"
      }
    }
  }

(I assume the same libraries are imported)

[guybedford]

I still don't have a full replication here unfortunately. Can you share a full repo, or alternatively edit line 927 of dist/generator.js to include console.log(node_modules/${target.name}, parentUrl) to see why the invalid URL error is being thrown?

[zachsa]

I added the log to line 927 and didn't see anything (I'm using the most recent published NPM). This line is the problem:

file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1600
                throw new JspmError(`Module not found: ${resolvedUrl}${importedFrom(parentUrl)}`, 'MODULE_NOT_FOUND');
                      ^

JspmError: Module not found: file:///home/zach/code/saeon/repositories/somisana/web//node_modules/react-router-dom/server imported from file:///home/zach/code/saeon/repositories/somisana/web//server/ssr/index.js

I'm not sure why I seem to have more information in this log than previous.

[zachsa]

But basically. If I take a JSPM workflow that works (producing an import map for node), and then change the JSPM provider to be nodemodules - that breaks the workflow:

Here is the full error from above:

file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1600
                throw new JspmError(`Module not found: ${resolvedUrl}${importedFrom(parentUrl)}`, 'MODULE_NOT_FOUND');
                      ^

JspmError: Module not found: file:///home/zach/code/saeon/repositories/somisana/web//node_modules/react-router-dom/server imported from file:///home/zach/code/saeon/repositories/somisana/web//server/ssr/index.js
    at Resolver.analyze (file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1600:23)
    at async TraceMap.traceUrl (file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1968:71)
    at async TraceMap.trace (file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1948:13)
    at async file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1998:30
    at async Promise.all (index 11)
    at async TraceMap.traceUrl (file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1993:9)
    at async TraceMap.trace (file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1880:13)
    at async file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1998:30
    at async Promise.all (index 12)
    at async TraceMap.traceUrl (file:///home/zach/code/saeon/repositories/somisana/web/node_modules/@jspm/generator/dist/generator.js:1993:9) {
  jspmError: true,
  code: 'MODULE_NOT_FOUND'
}

(here is the repo - https://github.com/SAEON/somisana/tree/next/web)

[guybedford]

https://unpkg.com/browse/react-router-dom@6.3.0/server.js is a CommonJS file.

The problem here is that the nodemodules provider only works so far as you are loading from ES modules, and breaks down with CommonJS module resolutions. This is also the reason the JSPM CDN exists in the first place.

[zachsa]

Ah I see. Thanks for following up.

[zachsa]

.. Actually. Looking at the initial post. My list of dependencies has expanded quite a bit. So the common js module may or may not be the problem (if so it is one of the imports in the initial import map I shared)

[guybedford]

It most likely is CommonJS resolution differences, I can pretty much guarantee that.