Client renders in dev mode, but not once built

Hi I'm new to solid and I'm making a simple app with solid start. When I use

npm run dev

npm run dev

it works fine and I can build and debug as expected. When I use

npm run build

npm run build

then

npm run start

npm run start

, the client does not render my

index.tsx

index.tsx

page, but the server does indeed work as expected. I am not using any ssr in my vite plugin config.

Not sure what's going on as most of it is as generated by the solid start template, and seems to match the docs. I'm assuming it's not an issue with the file structure as it works fine in dev mode, and remains unchanged from the template.

package.json

package.json

important parts

"scripts": {
    "dev": "solid-start dev",
    "build": "solid-start build",
    "start": "solid-start start",
    "deploy": "npm install && npm run build && npm run start"
  },
"devDependencies": {
    "@types/node": "^20.5.9",
    "esbuild": "^0.19.2",
    "solid-start-node": "^0.3.5",
    "typescript": "^5.2.2",
    "vite": "^4.4.9"
  },
"dependencies": {
    "@melodev/solid-datepicker": "^0.1.15",
    "@solid-primitives/selection": "^0.0.6",
    "@solidjs/meta": "^0.28.6",
    "@solidjs/router": "^0.8.3",
    "@suid/icons-material": "^0.6.9",
    "@suid/material": "^0.14.2",
    "@suid/system": "^0.10.4",
    "@suid/vite-plugin": "^0.1.4",
    "ag-grid-community": "^30.1.0",
    "ag-grid-solid": "^30.1.0",
    "deep-equal": "^2.2.2",
    "dotenv": "^16.3.1",
    "mysql2": "^3.6.0",
    "prop-types": "^15.8.1",
    "solid-js": "^1.7.11",
    "solid-start": "^0.3.5",
    "vite-tsconfig-paths": "^4.2.0"
  },
  "engines": {
    "node": ">=16.8"
  }

"scripts": {
    "dev": "solid-start dev",
    "build": "solid-start build",
    "start": "solid-start start",
    "deploy": "npm install && npm run build && npm run start"
  },
"devDependencies": {
    "@types/node": "^20.5.9",
    "esbuild": "^0.19.2",
    "solid-start-node": "^0.3.5",
    "typescript": "^5.2.2",
    "vite": "^4.4.9"
  },
"dependencies": {
    "@melodev/solid-datepicker": "^0.1.15",
    "@solid-primitives/selection": "^0.0.6",
    "@solidjs/meta": "^0.28.6",
    "@solidjs/router": "^0.8.3",
    "@suid/icons-material": "^0.6.9",
    "@suid/material": "^0.14.2",
    "@suid/system": "^0.10.4",
    "@suid/vite-plugin": "^0.1.4",
    "ag-grid-community": "^30.1.0",
    "ag-grid-solid": "^30.1.0",
    "deep-equal": "^2.2.2",
    "dotenv": "^16.3.1",
    "mysql2": "^3.6.0",
    "prop-types": "^15.8.1",
    "solid-js": "^1.7.11",
    "solid-start": "^0.3.5",
    "vite-tsconfig-paths": "^4.2.0"
  },
  "engines": {
    "node": ">=16.8"
  }

vite.config.ts

vite.config.ts

export default defineConfig({
    plugins: [suidPlugin(), solid({ssr: false}), tsconfigPaths()],
    build: {
        target: "esnext",
    },
    base: "./",
    server: {
        port: 3000,
        host: '127.0.0.1'
    }
});

export default defineConfig({
    plugins: [suidPlugin(), solid({ssr: false}), tsconfigPaths()],
    build: {
        target: "esnext",
    },
    base: "./",
    server: {
        port: 3000,
        host: '127.0.0.1'
    }
});

entry-client.tsx

entry-client.tsx

import {mount, StartClient} from "solid-start/entry-client";

console.log("Client Entry!");
mount(() => <StartClient/>, document);

import {mount, StartClient} from "solid-start/entry-client";

console.log("Client Entry!");
mount(() => <StartClient/>, document);

I do get the console log in my browser as expected. I do not get a console log for the first line of my index.tsx's default export function component.

File structure

$ tree src/routes
src/routes
├── [...404].tsx
├── api
│   ├── groups
│   │   ├── :groupId.ts
│   │   └── index.ts
│   ├── index.ts
│   ├── payments
│   │   ├── :paymentId.ts
│   │   └── index.ts
│   └── people
│       ├── :personId.ts
│       └── index.ts
└── index.tsx

$ tree src/routes
src/routes
├── [...404].tsx
├── api
│   ├── groups
│   │   ├── :groupId.ts
│   │   └── index.ts
│   ├── index.ts
│   ├── payments
│   │   ├── :paymentId.ts
│   │   └── index.ts
│   └── people
│       ├── :personId.ts
│       └── index.ts
└── index.tsx

I'm aware solid start is a WIP so I'm not sure if it's a problem with the framework, or I'm doing something horribly wrong with solid start.

Any help greatly appreciated!

Client renders in dev mode, but not once built

Hi I'm new to solid and I'm making a simple app with solid start. When I use

npm run dev

npm run dev

it works fine and I can build and debug as expected. When I use

npm run build

npm run build

then

npm run start

npm run start

, the client does not render my

index.tsx

index.tsx

package.json

package.json

important parts

"scripts": {
    "dev": "solid-start dev",
    "build": "solid-start build",
    "start": "solid-start start",
    "deploy": "npm install && npm run build && npm run start"
  },
"devDependencies": {
    "@types/node": "^20.5.9",
    "esbuild": "^0.19.2",
    "solid-start-node": "^0.3.5",
    "typescript": "^5.2.2",
    "vite": "^4.4.9"
  },
"dependencies": {
    "@melodev/solid-datepicker": "^0.1.15",
    "@solid-primitives/selection": "^0.0.6",
    "@solidjs/meta": "^0.28.6",
    "@solidjs/router": "^0.8.3",
    "@suid/icons-material": "^0.6.9",
    "@suid/material": "^0.14.2",
    "@suid/system": "^0.10.4",
    "@suid/vite-plugin": "^0.1.4",
    "ag-grid-community": "^30.1.0",
    "ag-grid-solid": "^30.1.0",
    "deep-equal": "^2.2.2",
    "dotenv": "^16.3.1",
    "mysql2": "^3.6.0",
    "prop-types": "^15.8.1",
    "solid-js": "^1.7.11",
    "solid-start": "^0.3.5",
    "vite-tsconfig-paths": "^4.2.0"
  },
  "engines": {
    "node": ">=16.8"
  }

"scripts": {
    "dev": "solid-start dev",
    "build": "solid-start build",
    "start": "solid-start start",
    "deploy": "npm install && npm run build && npm run start"
  },
"devDependencies": {
    "@types/node": "^20.5.9",
    "esbuild": "^0.19.2",
    "solid-start-node": "^0.3.5",
    "typescript": "^5.2.2",
    "vite": "^4.4.9"
  },
"dependencies": {
    "@melodev/solid-datepicker": "^0.1.15",
    "@solid-primitives/selection": "^0.0.6",
    "@solidjs/meta": "^0.28.6",
    "@solidjs/router": "^0.8.3",
    "@suid/icons-material": "^0.6.9",
    "@suid/material": "^0.14.2",
    "@suid/system": "^0.10.4",
    "@suid/vite-plugin": "^0.1.4",
    "ag-grid-community": "^30.1.0",
    "ag-grid-solid": "^30.1.0",
    "deep-equal": "^2.2.2",
    "dotenv": "^16.3.1",
    "mysql2": "^3.6.0",
    "prop-types": "^15.8.1",
    "solid-js": "^1.7.11",
    "solid-start": "^0.3.5",
    "vite-tsconfig-paths": "^4.2.0"
  },
  "engines": {
    "node": ">=16.8"
  }

vite.config.ts

vite.config.ts

export default defineConfig({
    plugins: [suidPlugin(), solid({ssr: false}), tsconfigPaths()],
    build: {
        target: "esnext",
    },
    base: "./",
    server: {
        port: 3000,
        host: '127.0.0.1'
    }
});

export default defineConfig({
    plugins: [suidPlugin(), solid({ssr: false}), tsconfigPaths()],
    build: {
        target: "esnext",
    },
    base: "./",
    server: {
        port: 3000,
        host: '127.0.0.1'
    }
});

entry-client.tsx

entry-client.tsx

import {mount, StartClient} from "solid-start/entry-client";

console.log("Client Entry!");
mount(() => <StartClient/>, document);

import {mount, StartClient} from "solid-start/entry-client";

console.log("Client Entry!");
mount(() => <StartClient/>, document);

I do get the console log in my browser as expected. I do not get a console log for the first line of my index.tsx's default export function component.

File structure

$ tree src/routes
src/routes
├── [...404].tsx
├── api
│   ├── groups
│   │   ├── :groupId.ts
│   │   └── index.ts
│   ├── index.ts
│   ├── payments
│   │   ├── :paymentId.ts
│   │   └── index.ts
│   └── people
│       ├── :personId.ts
│       └── index.ts
└── index.tsx

$ tree src/routes
src/routes
├── [...404].tsx
├── api
│   ├── groups
│   │   ├── :groupId.ts
│   │   └── index.ts
│   ├── index.ts
│   ├── payments
│   │   ├── :paymentId.ts
│   │   └── index.ts
│   └── people
│       ├── :personId.ts
│       └── index.ts
└── index.tsx

I'm aware solid start is a WIP so I'm not sure if it's a problem with the framework, or I'm doing something horribly wrong with solid start.

Any help greatly appreciated!

Client renders in dev mode, but not once built

Client renders in dev mode, but not once built

Similar Threads

Similar Threads

Similar Threads