No source info available for syntax error caused during dynamic import

[danfuzz]

Version

v19.2.0

Platform

Darwin chug.lan 21.5.0 Darwin Kernel Version 21.5.0: Tue Apr 26 21:08:29 PDT 2022; root:xnu-8020.121.3~4/RELEASE_ARM64_T8101 arm64

Subsystem

ESM (presumably)

What steps will reproduce the bug?

Make a fresh directory with the two files shown here, main.mjs and other.mjs, and then run main.mjs. Here's a convenient script to make the files and then run Node:

#!/bin/bash

cmdName="$(readlink -f "$0")" || exit "$?"
cmdDir="${cmdName%/*}"

rm -rf "${cmdDir}/files"
mkdir "${cmdDir}/files"
cd "${cmdDir}/files"

cat >'main.mjs' <<EOF
const otherUrl = new URL('other.mjs', import.meta.url);
try {
  console.log('########## Importing...');
  const imp = await import(otherUrl);
  console.log('########## Imported!');
  imp.default();
  console.log('########## Ran!');
} catch (e) {
  console.log('########## Error!\n%o', e);
}
EOF

cat >'other.mjs' <<EOF
console.log('Hello from Other!');
export default () => { console.log('Hello again!'); };

beep boop
EOF

node main.mjs

How often does it reproduce? Is there a required condition?

Consistently reproducible. No conditions required AFAIK.

What is the expected behavior?

Error thrown which contains the usual text that allows for easy identification. The output from this example would be something like this:

########## Importing...
########## Error!
SyntaxError: Unexpected identifier 'boop'
file:///Users/danfuzz/tmp/files/error-example/other.mjs:4
beep boop
     ^^^^
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:14)
    at async link (node:internal/modules/esm/module_job:68:21) {
  [stack]: "SyntaxError: Unexpected identifier 'boop'\n" +
    'file:///Users/danfuzz/tmp/error-example/files/other.mjs:4\n' +
    'beep boop\n'
    '     ^^^^\n' +
    '    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)\n' +
    '    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:14)\n' +
    '    at async link (node:internal/modules/esm/module_job:68:21)',
  [message]: "Unexpected identifier 'boop'"
}

or, arguably nicer, something like this:

########## Importing...
########## Error!
SyntaxError: Unexpected identifier 'boop'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:14)
    at async link (node:internal/modules/esm/module_job:68:21) {
  [stack]: "SyntaxError: Unexpected identifier 'boop'\n" +
    '    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)\n' +
    '    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:14)\n' +
    '    at async link (node:internal/modules/esm/module_job:68:21)',
  [message]: "Unexpected identifier 'boop'"
  [sourceUrl]: 'file:///Users/danfuzz/tmp/error-example/files/other.mjs'
  [sourcePosition]: { index: 95, line: 4, col: 6, length: 4 }
  [sourceSnippet]: 'beep boop\n' +
    '     ^^^^\n'
}

What do you see instead?

########## Importing...
########## Error!
SyntaxError: Unexpected identifier 'boop'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:14)
    at async link (node:internal/modules/esm/module_job:68:21) {
  [stack]: "SyntaxError: Unexpected identifier 'boop'\n" +
    '    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)\n' +
    '    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:457:14)\n' +
    '    at async link (node:internal/modules/esm/module_job:68:21)',
  [message]: "Unexpected identifier 'boop'"
}

Additional information

I did notice apparently-related issue #17277 and PR #17281, which I would have thought addressed this issue, but I guess not.

[aduh95]

@nodejs/modules

[GeoffreyBooth]

If you host those two files locally and open one in Chrome, what does the browser version of this error look like?

[danfuzz]

If you host those two files locally and open one in Chrome, what does the browser version of this error look like?

The browser seems to figure out the source position info. This is what I see in the console:

########## Error!
SyntaxError: Unexpected identifier 'boop' (at other.mjs:4:6)

The source position is clickable in the Chrome UI and indeed links to the expected line/column. Strangely to me (though I suspect not to you all), the source position info does not seem to be present at all in the actual Error object (based on what is reported by Object.getOwnPropertyDescriptors()).

[mariusa]

I'm also getting this error, can't find the cause due to no info:

SyntaxError: Unexpected token '.'
    at ESMLoader.moduleStrategy (node:internal/modules/esm/translators:119:18)
    at ESMLoader.moduleProvider (node:internal/modules/esm/loader:468:14)
    at async link (node:internal/modules/esm/module_job:68:21)

node 18.x. Can't open execute this in Chrome, since it's a server-side nodejs app with fastify.

[danfuzz]

@mariusa ICYI, I imperfectly work around this problem in my project right now like this:

If I see a SyntaxError from a loaded file, I fork() a Node subprocess just to try to load the failed file as a main script, capturing that subprocess's output to relay back as error output from the main process.

https://github.com/danfuzz/lactoserv/blob/v0.5.9/src/main-lactoserv/private/WarehouseMaker.js#L114

[JSDUNIYA]

@mariusa you need babel config

refer my sample poc on it https://github.com/JSDUNIYA/server-side-render-react-app/blob/main/babel.config.js