aviemet / icr

Inclusive Community Resources

SLS Scheduling Application

Conventions

Vite tsconfig-paths

Using tsconfig-paths allows static imports, but it does not recognize baseUrl. Use @/ as an alias for the root directory as such:

import Component from '@/Components/Component'

Vite Dynamic Imports

Using Vite with the dynamic import plugin for rollup requires dynamic imports to be explicitly defined by path depth and must end with a file extension:

// Not allowed
import(bar)
import(`${bar}.js`)
import(`/foo/${bar}.js`)
import(`some-library/${bar}.js`)

// allowed
import(`./foo/${bar}.js`)

The dynamic imports for Inertia have been explicitly defined in app/frontend/dynamicImports.ts to adhere to these requirements, which imposes specific constraints on folder structure in the Pages directory.

• All entrypoints must be an index.tsx file in a directory named for the route
• Maximum depth of 3 folder levels for any page entrypoint

Debugging

Use to increase log depth for server side node output for debugging webpack:

const util = require('util')

console.log(util.inspect(myObject, {showHidden: false, depth: null, colors: true}))

// alternative shortcut
console.log(util.inspect(myObject, false, null, true /* enable colors */))