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.
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.