SilentRhetoric Posts - Answer Overflow

SilentRhetoric

•Created by SilentRhetoric on 11/24/2024 in #support

Vinxi conditional config by mode

Is there a way to set up app.config.ts to be aware of the mode in which Vinxi is being run? When using Vite directly, the following is possible: https://vite.dev/config/#conditional-config It does not appear that SolidStart's defineConfig is similarly capable of taking a function that is aware of the mode in which Vinxi is being run.

11 replies

SSolidJS

•Created by SilentRhetoric on 9/30/2024 in #support

Vinxi server build fails: Big integer literals not available in target environment ("es2019")

I am getting an error when building locally as well as when Netlify tries to build:

.../.vinxi/build/ssr/index.js:1:40327: ERROR: Big integer literals are not available in the configured target environment ("es2019")

I have looked through the Solid Start, Vinxi and Nitro docs to try to figure out where I can configure this to use a more modern target environment. My app.config.ts currently looks like this:

export default defineConfig({
  ssr: true,
  server: {
    prerender: {
      routes: ["/", "/about", "/manage"],
    },
  },
  vite: {
    optimizeDeps: {
      include: [
        "@perawallet/connect",
        "@blockshake/defly-connect",
        "@walletconnect/modal",
        "@walletconnect/sign-client",
        "algosdk",
      ],
      esbuildOptions: {
        target: "es2020",
        // Node.js global to browser globalThis
        define: {
          global: "globalThis",
        },
        supported: {
          bigint: true,
        },
      },
    },
    build: {
      target: ["es2020"],
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },
    esbuild: { drop: ["console"] },
  },
})

export default defineConfig({
  ssr: true,
  server: {
    prerender: {
      routes: ["/", "/about", "/manage"],
    },
  },
  vite: {
    optimizeDeps: {
      include: [
        "@perawallet/connect",
        "@blockshake/defly-connect",
        "@walletconnect/modal",
        "@walletconnect/sign-client",
        "algosdk",
      ],
      esbuildOptions: {
        target: "es2020",
        // Node.js global to browser globalThis
        define: {
          global: "globalThis",
        },
        supported: {
          bigint: true,
        },
      },
    },
    build: {
      target: ["es2020"],
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },
    esbuild: { drop: ["console"] },
  },
})

And tsconfig.json:

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "lib": ["es2020", "esnext"],
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "allowJs": true,
    "noEmit": true,
    "strict": true,
    "types": ["vinxi/types/client"],
    "isolatedModules": true,
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ES2020",
    "lib": ["es2020", "esnext"],
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "jsx": "preserve",
    "jsxImportSource": "solid-js",
    "allowJs": true,
    "noEmit": true,
    "strict": true,
    "types": ["vinxi/types/client"],
    "isolatedModules": true,
    "paths": {
      "~/*": ["./src/*"]
    }
  }
}

Nothing in either config file seems to have any impact on this "configured target environment" so any help on how I can reconfigure this would be much appreciated!

5 replies

SSolidJS

•Created by SilentRhetoric on 9/5/2023 in #support

Creating Package - Need Bundling Help

This is the first time I have tried to create a library, and I need help 😅 Objective: Provide a convenience library to make it easy for people to integrate several other libraries in a SolidJS client app (browser only; no SSR for now). Problem: I tried to build with tsup using https://github.com/solidjs-community/solid-lib-starter as a starting point, but some of the libraries have a dynamic require that errors in the browser.
My Lib --> Imported Lib that uses require to get --> Third Party Lib It not clear to me if I need to solve for this when building the library or on the client side. Any direction or recommendations would be much appreciated.
Thank you in advance 🙏

14 replies

SSolidJS

•Created by SilentRhetoric on 7/3/2023 in #support

Why is storageSignal possibly null?

I am having trouble understanding why TypeScript thinks that this storageSignal theme can be null:

const darkMode = document.documentElement.classList.contains("dark") ? "dark" : "light"
  
const [theme, setTheme] = createStorageSignal<"light" | "dark">("theme", darkMode, {
    api: localStorage,
  })

const darkMode = document.documentElement.classList.contains("dark") ? "dark" : "light"
  
const [theme, setTheme] = createStorageSignal<"light" | "dark">("theme", darkMode, {
    api: localStorage,
  })

I am setting the initial value to a ternary and explicitly typing the signal, but alas, TS says that theme can be "dark" | "light" | null. What am I missing here?

15 replies

SSolidJS

•Created by SilentRhetoric on 4/10/2023 in #support

mergeProps deeply?

How deeply does merge props actually merge objects? Could I do?

const merged = mergeProps(
  defaultsObj: {
    key1: defaultValue1,
    key2: defaultValue2
  },
  props
)

const merged = mergeProps(
  defaultsObj: {
    key1: defaultValue1,
    key2: defaultValue2
  },
  props
)

where props has a props myObj with the values I want to default?

{
  myObj:{
    key1: value1,
    key2: value2
  }
}

{
  myObj:{
    key1: value1,
    key2: value2
  }
}

4 replies

SSolidJS

•Created by SilentRhetoric on 3/19/2023 in #support

Props/Default Defaults

The tutorial example at https://www.solidjs.com/tutorial/props_defaults does not seem to behave any differently before and after being solved. What is the difference?

4 replies

SSolidJS

•Created by SilentRhetoric on 12/3/2022 in #support

SolidStart prod build fails to start on `require()`

My site uses a library algosdk that has dependencies which utilize require() in them, which cause the production build to fail with the below error.

undefined:1
require('crypto')
^

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/name/Code/alright-solid/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at eval (eval at nodeWrap (file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:25657:19), <anonymous>:1:1)

undefined:1
require('crypto')
^

ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and '/Users/name/Code/alright-solid/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
    at eval (eval at nodeWrap (file:///Users/name/Code/alright-solid/dist/server-86e62de6.js:25657:19), <anonymous>:1:1)

64 replies

SSolidJS

•Created by SilentRhetoric on 12/3/2022 in #support

Import JS library via script tag

A JS SDK library I need to use recommends importing a browser bundle by adding a script tag to index.html:

<script
src="https://unpkg.com/[email protected]/dist/browser/algosdk.min.js"
  integrity="sha384-1gIB0FiLMNmJ7adAfBOdH20Mnw0DZarB9D3PTozUAhKn/uT9CpHdaSbBIpmZTgrU"
  crossorigin="anonymous"
></script>

<script
src="https://unpkg.com/[email protected]/dist/browser/algosdk.min.js"
  integrity="sha384-1gIB0FiLMNmJ7adAfBOdH20Mnw0DZarB9D3PTozUAhKn/uT9CpHdaSbBIpmZTgrU"
  crossorigin="anonymous"
></script>

Can I add this to a route index.tsx for the page where I will use this SDK? And then, how do I import it and use functions from the SDK?

45 replies

Gaming

Programming