Next.js Discord

Discord Forum

Next.js webpack error "Not a valid page"

Unanswered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
When i run @next-webpack-analyzer i get the following error:
Import trace for requested module:
./src/styles/components/Skills.module.scss
./src/components/sections/SkillSection.tsx

   Linting and checking validity of types  ..Failed to compile.

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


I am not sure why im getting this. If i run npm dev without webpack it works fine.

my contact/page.tsx:
import { ContactSection, SEO } from '@/components';
import { getBase64 } from '@/serverUtils';
import yaml from '@/templates/home.yaml';

export const Contact = async () => {
  const srcPrefix = './public';

  const blurDataURL = await getBase64(
    `${srcPrefix}${yaml.contactSection.image}`
  );
  const data = yaml.contactSection;
  data.blurDataUrl = blurDataURL;

  return (
    <>
      <SEO title="contact page" />

      <ContactSection {...data} />
    </>
  );
};
export default Contact;

10 Replies

Netherland DwarfOP
Here is my next.config.mjs:
/** @type {import('next').NextConfig} */
import withPlaiceholder from '@plaiceholder/next';
import withPWA from 'next-pwa';
import withYAML from 'next-yaml';
import withBundlerAnaylzer from '@next/bundle-analyzer';

const nextConfig = {};
const withPWA_ = withPWA({
  dest: 'public',
  register: true,
  skipWaiting: true,
  disable: process.env.NODE_ENV === 'development',
});

export default withPlaiceholder(
  withYAML({ ...withPWA_, ...withBundlerAnaylzer(nextConfig) })
);
hmm okay im starting to think its my next.config.mjs
like the order im exporting
what would be the right order? right now im just trying different order and the order i just added now results in:
Failed to compile.

./src/templates/home.yaml
Module parse failed: Unexpected token (2:16)
because of yaml file
Netherland DwarfOP
i get this error now:
./src/templates/home.yaml
Module parse failed: Unexpected token (2:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| mainSection:
>   subheading: I am Alex
|   headingAccent: Beautiful
|   heading: UI/UX
how to fix?
i install next-yaml which allows next to use yaml and in tsconfig.json i already declared the typing there for this file
Netherland DwarfOP
hmm i think is olved this, apprently i was not using a default export