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

Support
1

Hello Netlify Team! I need some help with this error, it’s my first react deployment on Netlify

Site name: https://willowy-cascaron-8c509d.netlify.app

It works perfectly fine on localhost but it brakes when I deploy the project on Netlify

Deploy Log:
12:44:05 AM: build-image version: 442a909cc19725b67a71cc230a935e063dadf683 (focal)
12:44:05 AM: buildbot version: 716793686322a0f551ced71ae75eb84b472ba215
12:44:05 AM: Fetching cached dependencies
12:44:05 AM: Failed to fetch cache, continuing with build
12:44:05 AM: Starting to prepare the repo for build
12:44:05 AM: No cached dependencies found. Cloning fresh repo
12:44:05 AM: git clone --filter=blob:none GitHub - Matdiez/Listerio
12:44:05 AM: Preparing Git Reference refs/heads/main
12:44:06 AM: Parsing package.json dependencies
12:44:07 AM: Starting to install dependencies
12:44:07 AM: Python version set to 3.8
12:44:07 AM: Attempting Ruby version 2.7.2, read from environment
12:44:08 AM: Using Ruby version 2.7.2
12:44:09 AM: Started restoring cached go cache
12:44:09 AM: Finished restoring cached go cache
12:44:09 AM: Installing Go version 1.19.5 (requested 1.19.5)
12:44:15 AM: go version go1.19.5 linux/amd64
12:44:15 AM: Using PHP version 8.0
12:44:16 AM: v16.20.0 is already installed.
12:44:16 AM: Now using node v16.20.0 (npm v8.19.4)
12:44:16 AM: Enabling Node.js Corepack
12:44:16 AM: Started restoring cached build plugins
12:44:16 AM: Finished restoring cached build plugins
12:44:16 AM: Started restoring cached corepack dependencies
12:44:16 AM: Finished restoring cached corepack dependencies
12:44:16 AM: No npm workspaces detected
12:44:16 AM: Started restoring cached node modules
12:44:16 AM: Finished restoring cached node modules
12:44:17 AM: Installing npm packages using npm version 8.19.4
12:44:18 AM: added 82 packages, and audited 83 packages in 1s
12:44:18 AM: 9 packages are looking for funding
12:44:18 AM: run npm fund for details
12:44:18 AM: found 0 vulnerabilities
12:44:18 AM: npm packages installed
12:44:18 AM: Install dependencies script success
12:44:18 AM: Starting build script
12:44:19 AM: Detected 1 framework(s)
12:44:19 AM: “vite” at version “4.2.1”
12:44:19 AM: Section completed: initializing
12:44:20 AM: ​
12:44:20 AM: Netlify Build
12:44:20 AM: ────────────────────────────────────────────────────────────────
12:44:20 AM: ​
12:44:20 AM: ❯ Version
12:44:20 AM: @netlify/build 29.9.1
12:44:20 AM: ​
12:44:20 AM: ❯ Flags
12:44:20 AM: baseRelDir: true
12:44:20 AM: buildId: 6438cc013d8ff47518766daf
12:44:20 AM: deployId: 6438cc013d8ff47518766db1
12:44:20 AM: ​
12:44:20 AM: ❯ Current directory
12:44:20 AM: /opt/build/repo
12:44:20 AM: ​
12:44:20 AM: ❯ Config file
12:44:20 AM: No config file was defined: using default values.
12:44:20 AM: ​
12:44:20 AM: ❯ Context
12:44:20 AM: production
12:44:20 AM: ​
12:44:20 AM: 1. Build command from Netlify app
12:44:20 AM: ────────────────────────────────────────────────────────────────
12:44:20 AM: ​
12:44:20 AM: $ npm run build
12:44:21 AM: > listerio@0.0.0 build
12:44:21 AM: > vite build
12:44:21 AM: vite v4.2.1 building for production…
12:44:21 AM: transforming…
12:44:22 AM: ✓ 36 modules transformed.
12:44:22 AM: rendering chunks…
12:44:22 AM: computing gzip size…
12:44:22 AM: dist/index.html 0.43 kB
12:44:22 AM: dist/assets/index-d263e0bc.css 1.48 kB │ gzip: 0.65 kB
12:44:22 AM: dist/assets/index-51206827.js 146.19 kB │ gzip: 47.29 kB
12:44:22 AM: ✓ built in 885ms
12:44:22 AM: ​
12:44:22 AM: Starting post processing
12:44:22 AM: (build.command completed in 1.4s)
12:44:22 AM: ​
12:44:22 AM: 2. Deploy site
12:44:22 AM: Post processing - HTML
12:44:22 AM: ────────────────────────────────────────────────────────────────
12:44:22 AM: ​
12:44:22 AM: Starting to deploy site from ‘dist’
12:44:22 AM: Post processing - header rules
12:44:22 AM: Calculating files to upload
12:44:22 AM: 0 new files to upload
12:44:22 AM: 0 new functions to upload
12:44:22 AM: Post processing - redirect rules
12:44:22 AM: Section completed: deploying
12:44:22 AM: Site deploy was successfully initiated
12:44:22 AM: ​
12:44:22 AM: Post processing done
12:44:22 AM: (Deploy site completed in 62ms)
12:44:22 AM: ​
12:44:22 AM: Netlify Build Complete
12:44:23 AM: Section completed: postprocessing
12:44:22 AM: ────────────────────────────────────────────────────────────────
12:44:22 AM: ​
12:44:22 AM: (Netlify Build completed in 1.5s)
12:44:22 AM: Caching artifacts
12:44:22 AM: Started saving node modules
12:44:22 AM: Finished saving node modules
12:44:22 AM: Started saving build plugins
12:44:22 AM: Finished saving build plugins
12:44:22 AM: Started saving corepack cache
12:44:22 AM: Finished saving corepack cache
12:44:22 AM: Started saving pip cache
12:44:22 AM: Finished saving pip cache
12:44:23 AM: Site is live :sparkles:
12:44:22 AM: Started saving emacs cask dependencies
12:44:22 AM: Finished saving emacs cask dependencies
12:44:22 AM: Started saving maven dependencies
12:44:22 AM: Finished saving maven dependencies
12:44:22 AM: Started saving boot dependencies
12:44:22 AM: Finished saving boot dependencies
12:44:22 AM: Started saving rust rustup cache
12:44:22 AM: Finished saving rust rustup cache
12:44:22 AM: Started saving go dependencies
12:44:22 AM: Finished saving go dependencies
12:44:23 AM: Build script success
12:44:23 AM: Section completed: building
12:44:23 AM: Uploading Cache of size 73.5MB
12:44:24 AM: Section completed: cleanup
12:44:24 AM: Finished processing build request in 19.056s

2

Hi Matdiez! I think the problem is coming from your code. I can see the error is coming from your tasks array being null when you call .filter on it.

I believe this is stemming from this section of your code. On line 15 you are setting tasks equal to the value of an item in localStorage. If that item doesn’t exist in localStorage, then it’s getting set to null and causing the error.

Perhaps a quick fix would be to only setTasks if it isn’t null - e.g.

if (tasks) {
  setTasks(tasks);
}
1 Like