Build error : "fetchData" is not a valid Page export field

[kamirazo]

Describe the issue you're facing

Hello !

I'm using NextJS 14.1.0 with the App Router configuration. I followed the instructions on this page : https://www.storyblok.com/tp/add-a-headless-cms-to-next-js-13-in-5-minutes completed by this repo to better handle the typescript adjustments https://github.com/arorachakit/storyblok-react/tree/main/playground-next13-live-editing

The npm run dev works fine but the npm run build gives me this error :

src/app/page.tsx
Type error: Page "src/app/page.tsx" does not match the required types of a Next.js Page.
  "fetchData" is not a valid Page export field.

Any idea of what could be missing ?

Thanks in advance !

Reproduction

No URL available

Steps to reproduce

No response

System Info

System:
    OS: macOS 14.2.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 237.58 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.6.1 - ~/.nvm/versions/node/v20.6.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v20.6.1/bin/yarn
    npm: 9.8.1 - ~/.nvm/versions/node/v20.6.1/bin/npm
    pnpm: 7.27.0 - ~/.nvm/versions/node/v20.6.1/bin/pnpm
  Browsers:
    Chrome: 121.0.6167.85
    Safari: 17.2.1

Used Package Manager

npm

Error logs (Optional)

npm verb cli /Users/camgicqu/.nvm/versions/node/v20.6.1/bin/node /Users/camgicqu/.nvm/versions/node/v20.6.1/bin/npm
npm info using npm@9.8.1
npm info using node@v20.6.1
npm verb title npm run build
npm verb argv "run" "build" "--loglevel" "verbose"
npm verb logfile logs-max:10 dir:/Users/camgicqu/.npm/_logs/2024-01-31T09_38_17_028Z-
npm verb logfile /Users/camgicqu/.npm/_logs/2024-01-31T09_38_17_028Z-debug-0.log

> sb-next14-front@0.1.0 build
> next build

   ▲ Next.js 14.1.0
   - Environments: .env.local

   Creating an optimized production build ...
 ✓ Compiled successfully
   Linting and checking validity of types  ..Failed to compile.

src/app/page.tsx
Type error: Page "src/app/page.tsx" does not match the required types of a Next.js Page.
  "fetchData" is not a valid Page export field.

npm verb exit 1
npm verb code 1

Validations

• Follow our Code of Conduct

[arorachakit]

Hey @MattHughson !
This looks like the issue we worked on a couple of weeks ago, can you suggest something here :)

[kamirazo]

Hello again !

Since then I've tried something to make the build ok : I've just removed the export of the function fetchData in the page.tsx file (https://github.com/arorachakit/storyblok-react/blob/main/playground-next13-live-editing/app/page.tsx) like so :

const fetchData = () => {
  let sbParams: ISbStoriesParams = { version: "draft" };

  const storyblokApi: StoryblokClient = getStoryblokApi();
  return storyblokApi.get(`cdn/stories/home`, sbParams);
}

Please me know if this way of doing may cause issues :)

[bartundmett]

Hello again !

Since then I've tried something to make the build ok : I've just removed the export of the function fetchData in the page.tsx file (https://github.com/arorachakit/storyblok-react/blob/main/playground-next13-live-editing/app/page.tsx) like so :

const fetchData = () => {
  let sbParams: ISbStoriesParams = { version: "draft" };

  const storyblokApi: StoryblokClient = getStoryblokApi();
  return storyblokApi.get(`cdn/stories/home`, sbParams);
}

Please me know if this way of doing may cause issues :)

Yes that’s the correct way.

You see this error since nextJS is build around conventions and though at its core it’s not a real error, nextJS expects you to only export certain things from a page. They list everything what’s a valid export in their docs (like revalidate, dynamic etc)

[kamirazo]

Hello, it's very clear, thanks for your answer. I'm closing the ticket then