Unexpected token export when using prerenderUrls

[randomprogramming]

Hello, today I tried using the --prerenderUrls tag with a .js file in a TypeScript project.. I need some dynamic props in my prerender-urls file, which means I also imported some other files in it, and then using export default of the function with the array of props that I need, but I get Unexpected token export.. When I try using module.exports = ... I then again have issues about my imports since they're .ts files.. Is there any way to accomplish what I am doing?

[rschristian]

Yes, you have to use CJS as our examples show. export default ... is ESM. You're also not going to be able to use TS, as we don't transpile anything related to prerender files.

If you need to import external values into your prerender-urls.js, you can use require() or import(). We do allow for async functions to be returned, so you can import ESM if need be. See the following (for example):

// prerender-urls.js
module.exports = async function () {
    const { default: fooUrl } = await import('./foo.mjs');
    return [
        {
            url: '/',
            title: 'Homepage',
        },
        {
            url: fooUrl,
        }
    ]
}

// foo.mjs
export default '/foo-url';

[randomprogramming]

Okay, I see, thanks. Is there really no way of importing TS files then? Maybe having a command to transpile the TS before running preact watch?

[rschristian]

Sure, you certainly can transpile that yourself with TSC or Babel (or any number of other tools). It's just not something we will do automatically for you.

I'd recommend just using JSDoc if you really can't live without types in those files though. Transpiling for that small use case sounds like more of a pain than it's worth. JSDoc works just as well.

FWIW I'm not against TS config files, so maybe I'll take a look and see if this can be easily added. We also do allow for CJS and ESM in the config file (preact.config.js) so it'd be nice to do the same for prerender-urls.