anhvu0911 Posts - Answer Overflow

anhvu0911

•Created by anhvu0911 on 1/18/2024 in #support

Use environment variable in defineConfig

I have an .env.local file

VITE_API_HOST=https://test.com/backend

VITE_API_HOST=https://test.com/backend

Before SolidStart 0.4, to define the proxy to this API host, I defined in vite.config.js like so

import solid from "solid-start/vite";
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd());

    return {
        plugins: [
            solid({ ssr: false }),
        ],
        server: {
            proxy: {
                "/backend": {
                    target: env.VITE_API_HOST,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/backend/, ""),
                    secure: false
                },
            },
        },
    };
});

import solid from "solid-start/vite";
import { defineConfig, loadEnv } from "vite";

export default defineConfig(({ mode }) => {
    const env = loadEnv(mode, process.cwd());

    return {
        plugins: [
            solid({ ssr: false }),
        ],
        server: {
            proxy: {
                "/backend": {
                    target: env.VITE_API_HOST,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/backend/, ""),
                    secure: false
                },
            },
        },
    };
});

Starting from SolidStart 0.4, the callback is no longer used. I tried the following

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
    start: {
        ssr: false,
    },
    server: {
        proxy: {
            "/backend": {
                target: process.env.VITE_API_HOST,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/backend/, ""),
                secure: false
            },
        },
    },
});

import { defineConfig } from "@solidjs/start/config";

export default defineConfig({
    start: {
        ssr: false,
    },
    server: {
        proxy: {
            "/backend": {
                target: process.env.VITE_API_HOST,
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/backend/, ""),
                secure: false
            },
        },
    },
});

But the server can not recognize the process.env.VITE_API_HOST. How can I use environment variables in this case?

5 replies

SSolidJS

•Created by anhvu0911 on 10/19/2023 in #support

Loading CSS issue (FOUC) on optional parameter

9 replies

SSolidJS

•Created by anhvu0911 on 7/2/2023 in #support

Understanding Suspense in SolidStart SSR

To understand how Suspense behave in a SolidStart SSR project, I have project created using the SolidStart bare template, and updated the Home page and About page as in the attachment 2 questions: 1) When I first visit the page http://localhost:3000/, it does not show fallback of Suspense. I understand this as SSR will resolve all Suspense boundaries before returning the page. However, when I click on the about link to move to http://localhost:3000/about, it show the about page immediately, with fallback of Suspense, when the values are resolved, it shows the resolved values. How can I make the website wait for createServerData$ to resolve successfully first before showing the page (just like on the first page load)? 2) I add a button to trigger refetchRouteData. However, when I click on the button for createServerData$ and createRouteData , their Suspense don't show fallback. I thought the serverData and clientData are Resource and so, I can show the loading state with serverData.loading, just like how compData behaves, but this is not the case. How can I make them show the loading state? For 2), the real world use case would be a page showing a list of items, with pagination. When I click on the pagination, it refetches the route data and should show loading icon while re-fetching

3 replies

SSolidJS

•Created by anhvu0911 on 7/1/2023 in #support

How to deploy unplugin-icons on production?

For a SolidStart project, I'm using this library https://github.com/antfu/unplugin-icons as Icon Components. I follow the instructions in the page and have it working on local perfectly. However as I deploy to production, using Docker, I got this error

#13 0.788 Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'unplugin-icons' imported from /usr/src/app/vite.config.js.timestamp-1688028342588-49d2ca85f27bd.mjs
#13 0.788     at new NodeError (node:internal/errors:399:5)
#13 0.788     at packageResolve (node:internal/modules/esm/resolve:889:9)
#13 0.788     at moduleResolve (node:internal/modules/esm/resolve:938:20)

#13 0.788 Error [ERR_MODULE_NOT_FOUND]: Cannot find package 'unplugin-icons' imported from /usr/src/app/vite.config.js.timestamp-1688028342588-49d2ca85f27bd.mjs
#13 0.788     at new NodeError (node:internal/errors:399:5)
#13 0.788     at packageResolve (node:internal/modules/esm/resolve:889:9)
#13 0.788     at moduleResolve (node:internal/modules/esm/resolve:938:20)

The Docker file is

FROM node:18.14.2-alpine

#... omit some credential details
WORKDIR /usr/src/app

# Install all dependencies needed for production build
ENV NODE_ENV production
COPY package.json yarn.lock ./
RUN yarn install \
    --prefer-offline \
    --frozen-lockfile

# Copy source files
COPY . .

# Build the app
RUN yarn build

# Run the app
CMD [ "yarn", "start" ]

FROM node:18.14.2-alpine

#... omit some credential details
WORKDIR /usr/src/app

# Install all dependencies needed for production build
ENV NODE_ENV production
COPY package.json yarn.lock ./
RUN yarn install \
    --prefer-offline \
    --frozen-lockfile

# Copy source files
COPY . .

# Build the app
RUN yarn build

# Run the app
CMD [ "yarn", "start" ]

This is due to the fact that unplugin-icons is declared in package.json as devDependency (as told by the library), so when it is installed in PRODUCTION mode, it cannot find the module. Has anyone got it working on production? What is the proper way to use this library?

2 replies

SSolidJS

•Created by anhvu0911 on 6/15/2023 in #support

Using CSR mode, got asset error when there is a new build

7 replies

SSolidJS

•Created by anhvu0911 on 5/30/2023 in #support

Reactivity with normal functions

I try the following: doubleCount is using createMemo while tripleCount is a normal anonymous function. They work just fine, the value is updated accordingly. The tripleCount is like an accessor at this point. - How can this work? Do signals simply re-trigger any functions that wrap it? - What are the benefits of using createMemo over normal function like this? https://playground.solidjs.com/anonymous/4da086d5-a747-42b1-a50d-7cf8241cde74

function Counter() {
  const [count, setCount] = createSignal(1);
  const doubleCount = createMemo(() => count() * 2)
  const tripleCount = () => count() * 3

  return (
    <>
    <button type="button" onClick={() => setCount(count() + 1)}>
     {count()}
    </button>
    <br/>
    x2: {doubleCount()}
    <br/>
    x3: {tripleCount()}
    </>
  );
}

function Counter() {
  const [count, setCount] = createSignal(1);
  const doubleCount = createMemo(() => count() * 2)
  const tripleCount = () => count() * 3

  return (
    <>
    <button type="button" onClick={() => setCount(count() + 1)}>
     {count()}
    </button>
    <br/>
    x2: {doubleCount()}
    <br/>
    x3: {tripleCount()}
    </>
  );
}

5 replies

SSolidJS

•Created by anhvu0911 on 3/12/2023 in #support

undefined context for dynamically added component

Hi team, I am coding a toast component. The idea is to expose a success method via context. Users can pass in any components as the first param of the success method to be displayed inside a toast. Users can use ToastBody as the first param, which will contain a close button. The close button will close the toast via onClose method exposed in the context. Using React, as demo here https://playcode.io/1290862, the console log context=... prints out correctly the value of the context that the ToastBody is wrapped in. Using Solid, https://playground.solidjs.com/anonymous/7b30d865-66e4-499e-b346-dbcab04670ba, The console log prints out undefined Questions: - I think this has something to do when the component is created. In Solid case, ToastBody is created much after the ToastContext.Provider is created, so it cannot set the correct owner. What do you think? - What can I do to get the context in this case?

5 replies

SSolidJS

•Created by anhvu0911 on 3/9/2023 in #support

Questions on the `owner` of using children() helper inside a context

I'm writing a component to show Toast. The idea is to wrap the main component inside a ToastContext. It exposes a method success() to show a Toast for a successful action. The shorten demo code is here https://playground.solidjs.com/anonymous/b8a41bdc-5569-41a0-86f5-d8fe42583d8f - If I used props.children inside the ToastContext, then the component can useContext normally. We can see the context in the owner chain - If I used children() helper inside the ToastContext, when the component use useContext , it results in a undefined context. There is no context in the owner chain So: - Why using children() helper does not keep the correct owner? - How is an owner attached? I assume that as long as it is inside a JSX element, that JSX element is the owner, but it seems not to be the case here.

4 replies

Gaming

Programming