Expo Web: Module not found "Can't resolve ../Utilities/Platform"

Expo SDK: 41
react-native-web version: 0.17.1

I’m having a problem building my project for web. Seems to be a problem with React Native, as a relative import in the react-native node module is failing. my .babelrc is:

{
    "plugins": [
        
        [
            "module-resolver",
            {
                "root": [
                    "./"
                ],
                "alias": {
                    "components": "./src/components",
                    "networking": "./src/networking",
                    "style": "./src/style",
                    "types": "./src/types",
                    "app": "./src",
                    "theme": "./src/Theme"
                }
            }
        ]
    ]
}

My webpack config is:

const expoConfig = require('@expo/webpack-config');
const path = require('path');

module.exports = async function(env, argv) {
  const config = await expoConfig(env, argv);
  config.resolve = {
    alias: {
        "components": path.resolve(__dirname, "src/components"),
        "networking": path.resolve(__dirname, "src/networking"),
        "style": path.resolve(__dirname, "src/style"),
        "types": path.resolve(__dirname, "src/types"),
        "app": "./src",
        "theme": path.resolve(__dirname, "src/Theme")
    }
  };
  return config;
}

And the full error is:

Failed to compile.
/Users/x/Desktop/x/node_modules/react-native/Libraries/Image/AssetSourceResolver.js
Module not found: Can't resolve '../Utilities/Platform' in 'project/path/node_modules/react-native/Libraries/Image'

No idea what to do here, other than downgrade my expo SDK and hope it works. The weird thing is, I’m not even using an Image anywhere in my app

Welcome to the long long tail of “Module not found “Can’t resolve …/Utilities/Platform” issue : [Web] Previous Expo 36 app `Can't resolve '../Utilities/Platform'` · Issue #73 · expo/web-examples · GitHub (opened since Feb 6th 2020)

So yes you’re not using Image, but another module does, the question is “how to find which one” :wink:

You can try the last script fix-for-rn-rnw.js - I did not test it yet …

If you find a repeatable solution, feel free to post it here and in the issue #73

1 Like

@lc3t35 The scripts did not solve the issue for me :neutral_face:

@iway1 Did you find a solution yet?

1 Like

Issue 73 is closed, and a lot of the suggestions there are odd and/or don’t work for me.
However I’ve found a reasonable solution, so I’ve posted it here (and SO) to save others the day of hacking to find the right “one line change”…

As you probably know - there is no non-native (i.e. web) version of Utilities/Platform in react-native, so things that depend on it break in a web build.

You can create a webpack.config.js (expo has a helper for this) and add an alias for the relative reference to Utilities/Platform used from within various rn libraries to the one provided by react-native-web:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  // Resolve relative reference ../Utilities/Platform using react-native-web
  config.resolve.alias['../Utilities/Platform'] = 'react-native-web/dist/exports/Platform';
  return config;
};
2 Likes

Thank you @andy.clapham !

This is great improvment, I had to add many alias :slight_smile:

config.resolve.alias["../../Utilities/Platform"] = "react-native-web/dist/exports/Platform";
config.resolve.alias["../Utilities/Platform"] = "react-native-web/dist/exports/Platform"; config.resolve.alias["./Platform"] = "react-native-web/dist/exports/Platform";
config.resolve.alias["./PlatformColorValueTypes"] = "react-native-web/dist/exports/StyleSheet";
config.resolve.alias["./RCTAlertManager"] = "react-native-web/dist/exports/Alert";
config.resolve.alias["./RCTNetworking"] = "react-native-web/dist/exports/Network";

but the last one doesn’t exist in react-native-web :Module not found: Can’t resolve ‘./RCTNetworking’ in ‘/xxxx/node_modules/react-native/Libraries/Network’

I’m not using reactotron … maybe this will give a solution ?
Asked to reopen this issue : Field 'browser' doesn't contain a valid alias configuration · Issue #2095 · necolas/react-native-web · GitHub

(Platform topic is solved → to be continued here for RCTNetworking topic : Expo Web: Module not found "Can't resolve ../Utilities/Platform")

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.