reactjstanstacknitrotanstack-start

Trying to dockerize TanStack application


I am following hosting docs for TanStack Start with Nitro hosting in order to dockerize the app.

So, in the docs there is instrution to get nitro-nightly package

npm i nitro-nightly

After that, code snippet is causing typescript errors:

import { nitro } from 'nitro/vite'

and i changed it to

import { nitro } from 'nitro-nightly/vite'

and it was OK.

So my vite.config.ts is as follows:

import { defineConfig } from 'vite'
import { tanstackStart } from '@tanstack/react-start/plugin/vite'
import viteReact from '@vitejs/plugin-react'
import viteTsConfigPaths from 'vite-tsconfig-paths'
import tailwindcss from '@tailwindcss/vite'
import { nitroV2Plugin } from '@tanstack/nitro-v2-vite-plugin'

const config = defineConfig({
    plugins: [
        // this is the plugin that enables path aliases
        viteTsConfigPaths({
            projects: ['./tsconfig.json'],
        }),
        tailwindcss(),
        tanstackStart(),
        nitroV2Plugin(),
        viteReact(),
    ],
})

export default config

After that, when i try to run npm run build command i get error

failed to load config from C:\Users\MT\source\repos\react-samples\tanstack-start\vite.config.ts
error during build:
Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'nitro' imported from C:\Users\MT\source\repos\react-samples\tanstack-start\node_modules\nitro-nightly\dist\vite.mjs
    at packageResolve (node:internal/modules/esm/resolve:873:9)
    at moduleResolve (node:internal/modules/esm/resolve:946:18)
    at defaultResolve (node:internal/modules/esm/resolve:1188:11)
    at ModuleLoader.defaultResolve (node:internal/modules/esm/loader:642:12)
    at #cachedDefaultResolve (node:internal/modules/esm/loader:591:25)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:574:38)
    at ModuleLoader.getModuleJobForImport (node:internal/modules/esm/loader:236:38)
    at ModuleJob._link (node:internal/modules/esm/module_job:130:49)

When following instructions for Nitro v2, it works all the way.


Solution

  • First of all, entry in package.json should look like:

    "nitro": "npm:nitro-nightly"
    

    Then the import

    import { nitro } from 'nitro/vite'
    

    works just fine.

    Then, there was error:

    error during build:
    node_modules/@tanstack/devtools/dist/esm/components/content-panel.js (1:19): "use" is not exported by "node_modules/solid-js/web/dist/server.js", imported by "node_modules/@tanstack/devtools/dist/esm/components/content-panel.js". 
    file: C:/Users/MT/source/repos/react-samples/tanstack-start/node_modules/@tanstack/devtools/dist/esm/components/content-panel.js:1:19
    
    1: import { template, use, insert, memo, addEventListener, effect, className, delegateEvents } from "solid-js/web";                      ^
    2: import { useDevtoolsSettings } from "../context/use-devtools-context.js";
    3: import { useStyles } from "../styles/use-styles.js";
    
        at getRollupError (file:///C:/Users/MT/source/repos/react-samples/tanstack-start/node_modules/rollup/dist/es/shared/parseAst.js:401:41)
    ...
    

    After that I had to remove (or make as dev dependencies) packges:

    @tanstack/react-devtools
    @tanstack/react-router-devtools
    

    After that npm run build succeeded and I could build Docker image.