Dynamic routes in data loader: SyntaxError: FileAttachment requires a single literal string argument (4:14)

[spandl]

Hello,

I'm trying to create dynamic links to data loaders as described in the docs.

I'm a bit surprised it works with parameters from the URL, but not with static variables.
Example:

Markup page:
file name: donut-[sheetId]-[tabId].md
URL: http://127.0.0.1:3000/donut-XYZ-123

Working code

const sheet = FileAttachment(
  `./data/sheets/sheetId-${observable.params.sheetId}-tabId-${observable.params.tabId}.json`
).json();

display(sheet);

Not working code

const sheetId = "XYZ";
const tabId = "123";
const path = `./data/sheets/sheetId-${sheetId}-tabId-${tabId}.json`;
const sheet2 = FileAttachment(path).json();

display(sheet2);

Error message: SyntaxError: FileAttachment requires a single literal string argument (4:15)

Question

What is the difference between a string literal composed of URL parameters and and local variables?
Is there a way to dynamically create the Ids within the markup page (example a drop-down value)?

Maybe an oversight of something else... ?

Thanks

[Fil]

The difference is static analysis. The Observable markdown parser can detect the former, because it has a unique shape that does not require to run the code to know what the values are.

But for the latter, the only way to know the value of the variable is to run the code—and this is out of bounds (and sometimes squarely impossible, say if your code depends on a random number or a date).

In other words (and that may be a bit of a stretch of a metaphor), we can "compile" the page, but not "execute" it. (At the end of the process we need to build static files.)

[spandl]

Thanks, @Fil

I think I understand the issue.

More important, I know now that the best (or only) way is to work with parameterized routes or to hardcode the values in a single string.

Thanks for the super-quick answer!