[Expo 49] Module not found: Can't resolve 'normalize-css-color'

[jansenfelipe]

Description

I started a simple project with Expo 49 and installed "nativebase" normally, but when trying to open the project on the web, this error Module not found: Can't resolve 'normalize-css-color' appeared

CodeSandbox/Snack link

Snack doesn't have Expo 49

Steps to reproduce

1. npx expo init -t expo-template-blank-typescript@49
2. npm install native-base
3. npx expo install [email protected] [email protected]
4. npx expo install react-native-web@~0.19.6 [email protected] @expo/webpack-config
5. npx expo start
6. Press w │ open web

NativeBase Version

^3.4.28

Platform

• [ ] Android
• [ ] CRA
• [X] Expo
• [ ] iOS
• [ ] Next

Other Platform

No response

Additional Information

No response

[qd-wl]

npm install normalize-css-color

[r-bman]

Same issue here after upgrading react-native-web to the latest version. The issue doesn't happen on RNW v0.18.12. I'm also a little concerned about the typo in the directory name!

[elenitaex5]

Same issue here trying to upgrade my repo from EXPO 48 to EXPO 49. At least this error is found in WEB

[Yamini0]

Getting same error after upgrading Expo Sdk to 49. Any solution?

[mwk24]

I did yarn add normalize-css-colors and it works

Side note: there is a typo in native-base

node_modules/native-base/lib/commonjs/utils/react-native-web-fucntions

[elenitaex5]

I did yarn add normalize-css-colors and it works

Side note: there is a typo in native-base

node_modules/native-base/lib/commonjs/utils/react-native-web-fucntions

It could be meanwhile solution, but I think install "not-used" dependencies in a project could be a fine solution for anyone...

[joaomantovani]

-yarn add normalize-css-colors
+yarn add normalize-css-color

A little adjust for me, the library must be is in singular instead of plural when running yarn.

[ts-candide]

normalize-css-color was removed from RNW as of v0.19.6, to be replaced with @react-native/normalize-color. The two packages have the same API, with the latter supporting more color notations.

Regardless, the fix here should be for NativeBase to include a dependency on the package that it is using, instead of assuming that a peer dependency brings it in. In this case, my recommendation would be to add a dependency on @react-native/normalize-color within the NativeBase package.json.

In the meantime, for anyone upgrading RNW to 0.19.6 and beyond, you have two options:

1. Add a dependency on normalize-css-color as suggested above
2. Add an alias in your webpack configuration, so that any attempts to require or import normalize-css-color are instead satisfied with @react-native/normalize-color:

// webpack.config.js
module.exports = {
  resolve: {
    alias: {
      "react-native$": "react-native-web",
      "normalize-css-color": "@react-native/normalize-color",
      // ... any other aliases
    }
    // ... any other `resolve` config
  },
  // .. other config
};