my app works in android phone, but not in web

Expo SDK
1

i built a simple app using expo, fetching and displaying data from my simple backend
the app works as intended in my android phone
login to my backend server works
navigation works
all native base button and cards work
api data fetching works
mapping and displaying the data works
linking a URL and open it with the phone web browser also works

i’ve been trying to run the app on the web without any success
login to my backend server works
navigation works
all native base buttons and cards work
api data fetching ??? not sure
mapping and displaying the data: does not work, no data is displayed
linking a URL and open it with the pc web browser does not work

i use sdk38 so as per the expo doc, i don’t need to install react-native-web and react-dom as they are already included

my package.json:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "@expo/webpack-config": "^0.12.22",
    "@react-native-community/masked-view": "^0.1.10",
    "expo": "~38.0.8",
    "expo-font": "~8.2.1",
    "expo-status-bar": "^1.0.2",
    "native-base": "^2.13.13",
    "react": "~16.11.0",
    "react-dom": "~16.11.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-38.0.2.tar.gz",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-keyboard-aware-scroll-view": "^0.9.2",
    "react-native-screens": "^2.10.1",
    "react-native-web": "~0.11.7",
    "react-navigation": "^4.4.0",
    "react-navigation-stack": "^2.8.2"
  },
  "devDependencies": {
    "@babel/core": "^7.8.6",
    "babel-preset-expo": "~8.1.0"
  },
  "private": true
}

my webpack.config.js:

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  // Customize the config before returning it.
  return config;
};

could some please tell me if i need to install another package to make this work? or perhaps i need to tweak the webpack.config.js? or perhaps i need to combine expo with gatsby.js or next.js?

i am a newbie here, just doing some programming as an after-office-hour hobby
any guidance will be highly appreciated

thank you

2

i’ve found the solution to my problem by following a wonderful tip from Evan @expo: check the networking tab

  1. i ran the project again: expo start

  2. i ran the app on my android phone: everything worked as intended

  3. i ran the app on web: again, no data is displayed

  4. i checked the api using httpie cli: it gave the expected result

  5. i copied the api address from my expo js file and pasted it onto fiddler composer

  6. fiddler reported an error: address permanently moved (super weird)

but, i immediately realized what was wrong
in httpie: i always end the api address with a slash: /
the api address in my expo js file does not have the slash at the end although it works on android phone without it (strange)
by simply adding the slash, my app now works as intended on web

conclusion: the fetch URL works in android even without the slash at the end. however, never ever forget to add that slash. it’s the standard anyway.

1 Like
3

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