𝔪𝔟𝔩𝔢 Posts - Answer Overflow

𝔪𝔟𝔩𝔢

•Created by 𝔪𝔟𝔩𝔢 on 2/5/2025 in #❓・help

Server read data from public

Hello, In server/api I have data script, that reads file from public, and returns json

import fs from 'fs';
import {parse} from 'smol-toml';
import path from 'path';
import url from 'url';

export default defineEventHandler((event) => {
  try {
    const dataRaw = fs.readFileSync(path.relative(process.cwd(), './public/personal/main.toml'));
    const data = parse(dataRaw.toString());
    return data;
  } catch (e) {
    console.log(e);
    return {}
  }
})

import fs from 'fs';
import {parse} from 'smol-toml';
import path from 'path';
import url from 'url';

export default defineEventHandler((event) => {
  try {
    const dataRaw = fs.readFileSync(path.relative(process.cwd(), './public/personal/main.toml'));
    const data = parse(dataRaw.toString());
    return data;
  } catch (e) {
    console.log(e);
    return {}
  }
})

When I build and run it locally, everything is fine; but when I try to deploy it with netlify I get empty response from api/data. Most likely it is due to current working directory (process.cwd()) being outside of dist folder, however I have no idea, how else I can load that data, as relative path to public differs between dev and build.

12 replies

NNuxt

•Created by 𝔪𝔟𝔩𝔢 on 2/19/2024 in #❓・help

Idk how to hydrate / execute client side only

When I have this code:

<script setup lang="ts">
const colorMode = useColorMode()
const img = useImage()
const background = computed(() => {
  const light = img('hero_yagami.jpg', { width: 2137 });
  const dark = img('hero_dark.jpg', { width: 2137 });
  return (colorMode.value === "light") ? { backgroundImage: `url('${light}')` } : { backgroundImage: `url('${dark}')` };
})
console.log(background);
</script>

<script setup lang="ts">
const colorMode = useColorMode()
const img = useImage()
const background = computed(() => {
  const light = img('hero_yagami.jpg', { width: 2137 });
  const dark = img('hero_dark.jpg', { width: 2137 });
  return (colorMode.value === "light") ? { backgroundImage: `url('${light}')` } : { backgroundImage: `url('${dark}')` };
})
console.log(background);
</script>

I get this console.warn message:

[Vue warn]: Hydration style mismatch on 
<article id="hero" style="background-image:url('/_…w_2137/hero_dark.jpg');" data-v-inspector="pages/index.vue:3:5" data-v-02281a80=""> 
  - rendered on server: style="background-image:url('/_ipx/w_2137/hero_dark.jpg');"
  - expected on client: style="background-image:url('/_ipx/w_2137/hero_yagami.jpg');"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/", hash: "", query: {}, name: "index", path: "/", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=3 > 
  at <NuxtRoot>

[Vue warn]: Hydration style mismatch on 
<article id="hero" style="background-image:url('/_…w_2137/hero_dark.jpg');" data-v-inspector="pages/index.vue:3:5" data-v-02281a80=""> 
  - rendered on server: style="background-image:url('/_ipx/w_2137/hero_dark.jpg');"
  - expected on client: style="background-image:url('/_ipx/w_2137/hero_yagami.jpg');"
  Note: this mismatch is check-only. The DOM will not be rectified in production due to performance overhead.
  You should fix the source of the mismatch. 
  at <Index onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/" vnode= 
Object { __v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, ref: {…}, scopeId: null, slotScopeIds: null, children: null, component: null, … }
 route= 
Object { fullPath: "/", hash: "", query: {}, name: "index", path: "/", params: {}, matched: (1) […], meta: Proxy, redirectedFrom: undefined, href: "/" }
  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=3 > 
  at <NuxtRoot>

And background image is dark, even though system theme, and subsequently the page, is light.

12 replies

Gaming

Programming