jakeman Posts - Answer Overflow

jakeman

•Created by jakeman on 2/28/2024 in #questions

@verce/og referencing unsupported modules

Bit of a long shot asking here but: I am experiencing an issue with the @vercel/og package for on-demand OG image creation. After upgrading from Next.js 12 to Next.js 14, I encountered the following error at build time on vercel:

Error: The Edge Function "api/og" is referencing unsupported modules:
    - index.js: ./resvg.wasm?module, ./yoga.wasm?module, url

Error: The Edge Function "api/og" is referencing unsupported modules:
    - index.js: ./resvg.wasm?module, ./yoga.wasm?module, url

"next": "^14.1.0", "@vercel/og": "^0.6.2", mre: https://github.com/JakeSchroeder/og-test This problem has been mentioned in the support discussion forums and on GitHub, but I have not found a solution. Is there a fix available for this issue? Related: https://github.com/orgs/vercel/discussions/3029 https://github.com/orgs/vercel/discussions/1976 https://github.com/remix-run/remix/issues/4735

1 replies

TTCTheo's Typesafe Cult

•Created by jakeman on 4/10/2023 in #questions

Figma Icons to React Components

Does anyone have a 'goto' package or plugin to handle the integration of svg (icons) created in figma to a set of react components... I really dont want to manually export and refactor all the svg -> jsx valid syntax etc everytime I want to update the figma stuff.

18 replies

TTCTheo's Typesafe Cult

•Created by jakeman on 2/19/2023 in #questions

Single nested admin route catch-all for all pages?

How can I setup my file-based routing to be something like: pages index.js about.js contact.js admin.js And then access the url /admin or /about/admin or /contact/admin ? Ideally I don't want to have: pages home index.js admin.js about index.js admin.js contact index.js admin.js

2 replies

TTCTheo's Typesafe Cult

•Created by jakeman on 2/11/2023 in #questions

Why does react rerender this at the component level but not when using a hook?

I've been toying with a type-writer effect in react and cant understand why react's lifecycle is working this way. Can someone explain why react is re-rendering the <WithoutHook/> component such that it doesnt work While the <WithHook/> one does? https://codesandbox.io/s/damp-moon-v24dzf?file=/src/App.jsx Notice 'strict mode' is on and if you disable it, it still breaks when not using a hook.

21 replies

TTCTheo's Typesafe Cult

•Created by jakeman on 1/16/2023 in #questions

How to manage cookie preferences with Nextjs SSG?

I am trying to setup a compliance banner and preferences menu for GDPR. Haven't been able to find a proper good example... seems like there could be more moving parts than just "store a cookie" Any help is appreciated. ps. It should only show when a user connects from the EU / GDPR enforced countries

1 replies

TTCTheo's Typesafe Cult

•Created by jakeman on 12/14/2022 in #questions

How best to implement browser feature detection?

I have a set of features, some css and some web api that have spotty support on safari, edge, and ie. Is there a standard way of targeting per browser environments or wrap unsupported features in a conditional? All i've seen is hacky css media queries hooking into a particular unsupported css feature to estimate the browser version... Is there something more foolproof or standard? I just came across this https://www.npmjs.com/package/caniuse-db figured it might be related here? Like ideally something on the server with the user agent so I dont have to ship unused stuff... that would be slick.

1 replies

TTCTheo's Typesafe Cult

•Created by jakeman on 12/7/2022 in #questions

Bad Idea? Detect mobile with UserAgent Next.js

I have a component that I am showing/hiding with mediaqueries like this

const [selectedPlan, setSelectedPlan] = useState<PricingGridPlanType>('hobby');
<div className="hidden lg:block">
  <PricingGridHeader selectedPlan={'all'} />
  <PricingGridTable selectedPlan={'all'} />
</div>
<div className="block lg:hidden">
  <PricingGridHeader selectedPlan={selectedPlan} setSelectedPlan={setSelectedPlan} />
  <PricingGridTable selectedPlan={selectedPlan} />
</div>

const [selectedPlan, setSelectedPlan] = useState<PricingGridPlanType>('hobby');
<div className="hidden lg:block">
  <PricingGridHeader selectedPlan={'all'} />
  <PricingGridTable selectedPlan={'all'} />
</div>
<div className="block lg:hidden">
  <PricingGridHeader selectedPlan={selectedPlan} setSelectedPlan={setSelectedPlan} />
  <PricingGridTable selectedPlan={selectedPlan} />
</div>

I was thinking of using getInitialProps to get the UserAgent and detect a mobile device or other and pass down a isMobile: boolean prop. New component:

const [selectedPlan, setSelectedPlan] = useState<PricingGridPlanType>(isMobile ? 'hobby' : 'all');
<PricingGridHeader selectedPlan={selectedPlan} setSelectedPlan={setSelectedPlan} />
<PricingGridTable selectedPlan={selectedPlan} />

getInitialProps({ ctx }) {
  let isMobile = (ctx.req
    ? ctx.req.headers['user-agent']
    : navigator.userAgent).match(
      /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
    )
   
    return {
      isMobile: Boolean(isMobile)
    }
}

const [selectedPlan, setSelectedPlan] = useState<PricingGridPlanType>(isMobile ? 'hobby' : 'all');
<PricingGridHeader selectedPlan={selectedPlan} setSelectedPlan={setSelectedPlan} />
<PricingGridTable selectedPlan={selectedPlan} />

getInitialProps({ ctx }) {
  let isMobile = (ctx.req
    ? ctx.req.headers['user-agent']
    : navigator.userAgent).match(
      /Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile|WPDesktop/i
    )
   
    return {
      isMobile: Boolean(isMobile)
    }
}

Is this unpredictable/would have some devices falling out of the match above? Is it just better to do the mediaquery?

11 replies

TTCTheo's Typesafe Cult

•Created by jakeman on 11/25/2022 in #questions

Anyone know a good way of diagnosing Nextjs hydration mismatch errors

I am familiar with some of the reasons listed here: https://nextjs.org/docs/messages/react-hydration-error I was wondering if there was some intellisense extension or resource I could use to identify the issue quickly.

1 replies

TTCTheo's Typesafe Cult

•Created by jakeman on 10/31/2022 in #questions

Whats better for Nextjs image src - import or path?

Is there a difference between, if so which one is better? import logo from "../logo.svg" <Image src={logo} /> and <Image src="/logo.svg"/>

8 replies

Gaming

Programming