[Web] Previous Expo 36 app `Can't resolve '../Utilities/Platform'`

[jonathanstiansen]

Expo Diagnostics

  Expo CLI 3.11.7 environment info:
    System:
      OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
      Shell: 4.4.20 - /bin/bash
    Binaries:
      Node: 10.16.3 - ~/.nvm/versions/node/v10.16.3/bin/node
      npm: 6.11.1 - ~/.nvm/versions/node/v10.16.3/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    npmPackages:
      @types/react: ^16.9.11 => 16.9.16 
      @types/react-native: ^0.60.22 => 0.60.25 
      @xstate/react: ^0.8.1 => 0.8.1 
      expo: ^36.0.0 => 36.0.0 
      react: 16.9.0 => 16.9.0 
      react-native: https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz => 0.61.4 
      react-navigation: ^3.11.1 => 3.13.0 
    npmGlobalPackages:
      expo-cli: 3.11.7

It's a mixed TS and JS project, using babel for the TS and JS.

Here's my webpack config:

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

// source: https://docs.expo.io/versions/latest/guides/customizing-webpack/
// Expo CLI will await this method so you can optionally return a promise.
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv)
  if (config.mode === 'development') {
    config.devServer.compress = false
  }

  // Or prevent minimizing the bundle when you build.
  if (config.mode === 'production') {
    config.optimization.minimize = false
  }
  config.resolve = {
    extensions: [".ts", ".tsx", ".js", ".json"]
  }
  config.module.rules = [{
    // Include ts, tsx, js, and jsx files.
    test: /\.(ts|jsx|js)x?$/,
    // exclude: /node_modules/,
    loader: 'babel-loader'
  }]
  return config
}

Here's my babel.config.js in the expo project:

module.exports = function (api) {
  api.cache(true)
  return {
    presets: ['babel-preset-expo', 'module:react-native-dotenv', '@babel/preset-typescript'],
    plugins: ['@babel/plugin-transform-react-jsx-source']
  }
}

When I run expo start:web I get this:

/home/mygastank/WebstormProjects/mygastank/customer/node_modules/react-native/Libraries/Image/AssetSourceResolver.js
Module not found: Can't resolve '../Utilities/Platform' in '/home/mygastank/WebstormProjects/mygastank/customer/node_modules/react-native/Libraries/Image'

My understanding from babel is that it would shake our incompatible modules. Do I need to be changing all of my import {View} from 'react-native' to import {View} from 'react-native-web'? Same with image (as the error seems to suggest?)

There doesn't seem to be a migration guide of any sort, so I'm uncertain how to get a previous expo app into web.

Any ideas?

[nathan-remote]

For anyone experiencing this issue when using electron also, this is what worked for me:

Ensure you have an electron directory at the root of your project

Inside this directory, create a webpack.config.js file with the following contents:

const { withExpoWebpack } = require('@expo/electron-adapter');

module.exports = config => {

  let expoConfig = withExpoWebpack(config);

  expoConfig.resolve.alias['react-native$'] = 'react-native-web';

  return expoConfig;
};

If you get a subsequent error saying that babel-loader module can't be found, add it

Adding a resolve alias makes somewhat sense to me, because the non-platform specific files live within the react-native-web node module at ./react-native-web/src/exports/Platform/index.js

I had no luck with the module-resolver plugin either, this was the only approach that enables our app to compile

[francesco-clementi-92]

Any news on how to find out which package is generating the error?

It's impossible to check each one manually.

[RameshkrishnanV]

Is anyone fixed this issue?

[reactnewb]

I followed this instruction by @webjay

I see that there are the following files:

• ./node_modules/react-native/Libraries/Utilities/Platform.android.js
• ./node_modules/react-native/Libraries/Utilities/Platform.ios.js

So I created an empty Platform.web.js file there, and the next error I see is Can't resolve './Button' in './node_modules/react-native-scrollable-tab-view' so I think Expo web is not yet for me :)

And in my case it throws the following error.

/Users/rn/ex-items-app/node_modules/react-native/Libraries/StyleSheet/processColor.js
Module not found: Can't resolve './PlatformColorValueTypes' in '/Users/rn/ex-items-app/node_modules/react-native/Libraries/StyleSheet'

I'm trying to use the following package with the expo. https://github.com/TheRealNate/meteor-react-native

And it doesn't use StyleSheet anywhere!

[Esxiel]

For me it was the viewpager library as well, (https://github.com/callstack/react-native-viewpager) I was on 4.2.0 and I suspect this import to be the cause

const ReactNative = require('react-native');
const {Platform, UIManager} = ReactNative;

I upgraded to 4.2.2 and it fixed itself.

Now I just need to figure out how to fix the other libraries...

[ibrahimansar]

Simply delete node-modules, package-lock.json and reinstall is working for me :)

[kanzitelli]

I have faced the same issue while trying to run the existing Expo app on the Web.

I have noticed that those files had only .ios.js and .android.js extensions, so I have added empty files with the same name but .web.js extension. And I got another error pointing to another file. Not sure if it's the right approach but in order to optimize this process, I have written a small script that runs on postinstall and adding missing files. After that, I have faced another issue from react-native-web but there was already the script for a workaround.

Here is a pre-configured project expo-starter that runs the app on Web out of the box. You can find the script here. And this is the deployed version of the app on Vercel - app.expo.batyr.io.

Hope it helps 🙂

[Gerrist]

@kanzitelli Your 'You can find the script here' link points to a 404. Would you mind re-uploading this file?

[kanzitelli]

@Gerrist there is probably no need for those scripts anymore as some libraries have been updated and that issue was fixed. However, if you'd like to check them out, here is the link - https://github.com/kanzitelli/expo-starter/tree/1.0.0/scripts.

[phamquyhai]

@kanzitelli i have same issue, i try your script, but not working. do u have any idea for this. what this bug ?

/Users/pham.quy.hai/WorkSpace/mini-kiss/miwa-v2/miwa/node_modules/react-native/Libraries/LogBox/UI/LogBoxNotification.js
Module not found: Can't resolve '../../Image/Image' in '/Users/pham.quy.hai/WorkSpace/mini-kiss/miwa-v2/miwa/node_modules/react-native/Libraries/LogBox/UI'

[kanzitelli]

@phamquyhai hi there! So this error comes out when there is no file as Image.web.js, so what the script does is creating missing files with .web.js extension. However, in the last versions of Expo SDK everything should work well out of the box. What Expo SDK version are you using? Also, you have to run the script after each yarn add or npm install, bc we change code in node_modules. You can add something like that to your package.json - "postinstall": "node ./scripts/fix-for-rn-rnw.js". And be sure to use fix-for-rn-rnw.js script.

[anil1712]

Hi, Is there any solution for this? I am also getting the same

[mariomurrent-softwaresolutions]

Seems to be an issue due to the fact that platform is only exported as platform-specific export, aka as iOS and Android only. I have seen this same issue come up in react-native-scrollable-tab-view, with the Button import, as well.

Did you already solve this?