TypeError: Cannot read properties of null (reading 'attributes') Only on one files

Questions and Answers
1
System Information
  • Strapi Version: 4.3.2
  • Operating System: Windows 10
  • Database: PostGress
  • Node Version: 16.16.0
  • NPM Version:
  • Yarn Version: 1.22.19

Hello I follow the tutorial create your “next” app using Next.js and strapi to working with slugified data

And i use the props {film.attributes.title} on an URL to show a movie list ( is okay )
And a second time to show the movie information. And i got the error

TypeError: Cannot read properties of null (reading 'attributes')

components>Film.js

import Link from "next/link";

const Films = ({ films }) => {
  return (
    <>
      <ul className="list-none space-y-4 text-4xl font-bold mb-3">
        {films &&
          films.data.map((film) => {
            return (
              <li key={film.id}>
                <Link href={`film/` + film.id}>{film.attributes.title}</Link>
              </li>
            );
          })}
      </ul>
    </>
  );
};

export default Films;

I use the same props on my uages>film>[slug].js file to show the movie name in the .
And when i’m on the url to see movie informations i got an error

TypeError: Cannot read properties of null (reading 'attributes')

pages>film>[slug].js

import Layout from "../../components/Layout";
import { fetcher } from "../../lib/api";

const Film = ({ film }) => {
  return (
    <Layout>
      <h1 className="text-5xl md:text-6xl font-extrabold leading-tighter mb-4">
        <span className="bg-clip-text text-transparent bg-radient-to-r from-blue-500 to-teal-400 py-2">
          {film.attributes.title}
        </span>
      </h1>
    </Layout>
  );
};

export async function getServerSideProps({ params }) {
  const { slug } = params;
  const filmResponse = await fetcher(
    `${process.env.NEXT_PUBLIC_STRAPI_URL}/films/${slug}`
  );
  return {
    props: {
      film: filmResponse.data,
    },
  };
}

export default Film;

Why i don’t get the same probleme on the url than show the movie list ?

How can i resolve the problem ?

Thanks

2

Hello @ninja_turtles,

Can you double-check with console.log the film inside the Film component and see what it returns?

3

Hello @sunnyson
If i lauch the command node Film.js i have an error.

import Link from "next/link";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1033:15)
    at Module._compile (node:internal/modules/cjs/loader:1069:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
    at node:internal/main/run_main_module:17:47

This is my Film.js code

import Link from "next/link";

const Films = ({ films }) => {
  return (
    <>
      <ul className="list-none space-y-4 text-4xl font-bold mb-3">
        {films &&
          films.data.map((film) => {
            return (
              <li key={film.id}>
                <Link href={`film/` + film.id}>{film.attributes.title}</Link>
              </li>
            );
          })}
      </ul>
    </>
  );
};

console.log("toto");

export default Films;
4

Hello @ninja_turtles,
You can’t just run React component with node cli. It doesn’t work like that.
You should run it inside the NextJS.

5

Hi there, I´m having the same problem. I checked with console.log the film in Films component and it´s getting the data. The problem is in the [slug].js file. For some reason, it´s not receiving the film.

Any ideas?

ps: the code is the same, this is a tutorial for creating a nextjs app with strapi.