Web build fails with expo-notifications. (localStorage is not defined)

[moonjoungyoung]

Summary

Hello.

I cant build my app after install expo-notifications and use it.

It is a bug or my mistake?

What platform(s) does this occur on?

Web

SDK Version

create-expo-app v2.0.3

Environment

expo-env-info 1.0.5 environment info:
System:
OS: Windows 10 10.0.22621
Binaries:
Node: 16.18.1 - C:\Program Files\nodejs\node.EXE
npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
npmPackages:
expo: ~49.0.5 => 49.0.6
react: 18.2.0 => 18.2.0
react-dom: 18.2.0 => 18.2.0
react-native: 0.72.3 => 0.72.3
react-native-web: ~0.19.6 => 0.19.7
Expo Workflow: managed

Minimal reproducible example

console

npx create-expo-app --template
select Navigation (TypeScript)

// cd to app
npm i expo-notifications

code
app/(tabs)/two.tsx

// paste on line 6
import * as Notifications from 'expo-notifications';

Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: false,
    shouldSetBadge: false,
  }),
});

console

npm run web

error in console

http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:98300
        return localStorage.getItem(REGISTRATION_INFO_KEY);
        ^

ReferenceError: localStorage is not defined
    at Object.<anonymous> (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:98300:9)
    at Generator.next (<anonymous>)
    at asyncGeneratorStep (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:2486:26)
    at _next (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:2505:11)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:2510:9
    at new Promise (<anonymous>)
    at Object.<anonymous> (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:2502:14)
    at Object.getRegistrationInfoAsync (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:98303:42)
    at http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:97282:39
    at loadModuleImplementation (http://localhost:8081/node_modules/expo-router/node/render.bundle//&platform=web&dev=true&minify=false&resolver.environment=node&transform.environment=node:328:7)

[heythisischris]

I'm also experiencing this issue.

[jtc3161]

Also experienced this issue. It appears expo-router is rendering the page using nodejs, which does not have access to the localStorage instance in the browser that is being used in the expo-notifications module. this is an annoying incompatibility between the two libraries, but expo documents that they do not support using the expo-notifications module for web applications.

A temporary fix I'm using is to use the "platform specific extensions" feature documented here: https://docs.expo.dev/router/advanced/platform-specific-modules/#platform-specific-extensions

I have a single module called notifications with a NotificationProvider context provider exported. This is the only file in my app that imports the expo-notifications module, which allowed me to simply create a notifications.web.tsx file with a dummy NotificationProvider in it. someday I might implement actual web notifications in this provider but for now it gets me past this issue until expo can resolve it

[heythisischris]

Sick, thank you for the suggested temporary fix!