Import ts files in static.config.js in React Static typescript template

Reporting a bug?

After creating new React Static app with typescript template i can’t import .ts files in static.config.js. The similar situation happens when i change my static.config.js to static.config.ts and i try import .ts file then i got an errror:

=> File changed: /artifacts/react-static-browser-plugins.js
=> Updating build...
Failed to build! Fix any errors and try again!
multi /MY_PROJECT/node_modules/react-dev-utils/webpackHotDevClient.js (webpack)/hot/only-dev-server.js ../lib/bootstrapPlugins.js ../lib/bootstrapTemplates.js /MY_PROJECT/src/index.js
Module not found: Can't resolve '/MY_PROJECT/src/index.js' in '/MY_PROJECT/node_modules/react-static/node_modules'

Environment

Latest version of react-static create with typescript template

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

1. react-static create
2. select typescript template
3. Open static.config.js
4. Try to import in static.config.js any .ts file
5. npm start / yarn start -> error

1a. Rename static.config.js to static.config.ts 2.Try to import .ts file -> error 3b. npm start / yarn start -> error

Expected Behavior

I should be able to import .ts files in static.config.js or build app with static.config.ts

Reproducible Demo

react-static create

[SleeplessByte]

Not yet. I’ll make sure it’s somewhere once I finished the export command, so that I know who to allocate building the rest / what it would take. It’s mostly an internal rewrite, without too many “external”/public API changes.

This is what my static looks like in RS 8:

// static.config.ts

import { AppConfig, RouteConfigList } from '@react-static/types'

const config: AppConfig = {
  data: { global: { my: 'data' } },
  routes: async (): Promise<RouteConfigList>  => {
    const items = [
      { data: 'example', id: 1 },
      { data: 'other', id: 2 },
    ]

    // Creates the /items route, and exposes ALL item data
    // Creates the /items/1 and /items/2 routes, and exposes a single item
    return [
      {
        path: '/items',
        data: { items },
        children: items.map((item) => ({
          path: `/${item.id}`,
          template: 'src/containers/Item',
          data: Promise.resolve(item),
        })),
      },
    ]
  },
  plugins: [
    [
      '@react-static/plugin-source-filesystem',
      {
        location: './src/pages',
      },
    ],
    '@react-static/plugin-reach-router',
    '@react-static/plugin-sitemap',
  ],
}

export default config

It also allows you to use .jsx and .tsx, because some plugins will allow you to pass in React.ComponentType.

We also encourage people to use the TypeScript variant, or at least turn on // @ts-check, because the types correctly accepts for example the following data values for routes:

{
  data: { some: 'object' },
  data: Promise.resolve({ some: 'result of a promise' }),
  data: () => ({ some: 'function that returns an object' }),
  data: async () => ({ some: 'async function that returns an object' })
}

[andrezero]

I believe this is not a plugin responsibility. It’s a matter of running react-static in a ts environment as you mentioned. It’s about how to write your SSG code, leveraging existing libraries, data sources, etc…

So, the good news is: I just tried to launch react-static with ts-node and everything seems to be working fine.

node -r ts-node/register node_modules/.bin/react-static  start

Then, from within static-config.js I am able to import typescript modules straight up.

import getRoutes from './src/routes';

For now, I’m just running the basic example converted to typescript. I will continue down this path and see if/where it breaks 😉