Web build inserting incorrect path

Expo Development Tools
1

I’m using expo version 6.0.1

When I use

expo build:web

my /web-build/manifest.json ends up having /web-build/ at the beginning of every line. This also appears in other files. That reference results in a 404 error since it’s already in the web-build folder.

Prior to upgrading from 5.5.1, this was working fine.

The workaround I’m using is to search and replace /web-build/ for / anywhere in the project.

Currently this is building and deploying fine, but it would be nice if it could be fixed in an upcoming release.

3

Hey @watx,

I tried reproducing and running the command works fine on my end. There were no /web-build/ at the beginning of every line in the json file. Can you please share a reproducible example?

4

Greetings @amanhimself,

I tried building a new project to reproduce this, but the new project works fine.

My steps to try and reproduce:
npx ignite-cli new TestApp --expo
cd TestApp
expo build:web
npx serve web-build

This works fine in the TestApp.

In my other app I’m developing, I also started with an Ignite Expo app, but this was months ago when my Expo version was at 5.5.1. I recently upgraded to 6.0.1 using
npm install -g expo-cli

Prior to the upgrade, my web builds worked as expected. Now, they prepend /web-build/ onto each line in asset-manifest.json like so:

{
  "files": {
    "app.js": "/web-build/static/js/app.2d025a5d.chunk.js",
    "app.js.map": "/web-build/static/js/app.2d025a5d.chunk.js.map",
    "runtime~app.js": "/web-build/static/js/runtime~app.0960814e.js",
    "runtime~app.js.map": "/web-build/static/js/runtime~app.0960814e.js.map",
    "static/js/2.24fa30ba.chunk.js": "/web-build/static/js/2.24fa30ba.chunk.js",
    "static/js/2.24fa30ba.chunk.js.map": "/web-build/static/js/2.24fa30ba.chunk.js.map",
    "fonts/AntDesign.ttf": "/web-build/./fonts/AntDesign.ttf",
    "fonts/Entypo.ttf": "/web-build/./fonts/Entypo.ttf",
    "fonts/Feather.ttf": "/web-build/./fonts/Feather.ttf",
    "fonts/FontAwesome.ttf": "/web-build/./fonts/FontAwesome.ttf",
    "fonts/FontAwesome5_Brands.ttf": "/web-build/./fonts/FontAwesome5_Brands.ttf",
    "fonts/FontAwesome5_Solid.ttf": "/web-build/./fonts/FontAwesome5_Solid.ttf",
    "fonts/Fontisto.ttf": "/web-build/./fonts/Fontisto.ttf",
    "fonts/Foundation.ttf": "/web-build/./fonts/Foundation.ttf",
    "fonts/Ionicons.ttf": "/web-build/./fonts/Ionicons.ttf",
    "fonts/MaterialCommunityIcons.ttf": "/web-build/./fonts/MaterialCommunityIcons.ttf",
    "fonts/MaterialIcons.ttf": "/web-build/./fonts/MaterialIcons.ttf",
    "fonts/SimpleLineIcons.ttf": "/web-build/./fonts/SimpleLineIcons.ttf",
    "favicon-16.png": "/web-build/favicon-16.png",
    "favicon-32.png": "/web-build/favicon-32.png",
    "favicon.ico": "/web-build/favicon.ico",
    "index.html": "/web-build/index.html",
    "manifest.json": "/web-build/manifest.json",
    "serve.json": "/web-build/serve.json",
    "static/js/2.24fa30ba.chunk.js.LICENSE.txt": "/web-build/static/js/2.24fa30ba.chunk.js.LICENSE.txt",
    "static/media/bg.png": "/web-build/static/media/bg.2803d498.png",
    "static/media/bowser.png": "/web-build/static/media/bowser.86f4dff7.png",
    "static/media/ladybug.png": "/web-build/static/media/ladybug.1f3a56e2.png",
    "static/media/logo-ignite.png": "/web-build/static/media/logo-ignite.4b94d581.png"
  },
  "entrypoints": [
    "static/js/runtime~app.0960814e.js",
    "static/js/2.24fa30ba.chunk.js",
    "static/js/app.2d025a5d.chunk.js"
  ]
}

My asset-manifest.json for the TestApp looks like this:

{
  "files": {
    "app.js": "/static/js/app.35a28e80.chunk.js",
    "app.js.map": "/static/js/app.35a28e80.chunk.js.map",
    "runtime~app.js": "/static/js/runtime~app.27401809.js",
    "runtime~app.js.map": "/static/js/runtime~app.27401809.js.map",
    "static/js/2.bd2e6a6a.chunk.js": "/static/js/2.bd2e6a6a.chunk.js",
    "static/js/2.bd2e6a6a.chunk.js.map": "/static/js/2.bd2e6a6a.chunk.js.map",
    "favicon-16.png": "/favicon-16.png",
    "favicon-32.png": "/favicon-32.png",
    "favicon.ico": "/favicon.ico",
    "index.html": "/index.html",
    "manifest.json": "/manifest.json",
    "serve.json": "/serve.json",
    "static/js/2.bd2e6a6a.chunk.js.LICENSE.txt": "/static/js/2.bd2e6a6a.chunk.js.LICENSE.txt",
    "static/media/bg.png": "/static/media/bg.7da0a45a.png",
    "static/media/bowser.png": "/static/media/bowser.4ba9aedf.png",
    "static/media/ladybug.png": "/static/media/ladybug.1e6045ac.png",
    "static/media/logo-ignite.png": "/static/media/logo-ignite.5c0bc1b0.png"
  },
  "entrypoints": [
    "static/js/runtime~app.27401809.js",
    "static/js/2.bd2e6a6a.chunk.js",
    "static/js/app.35a28e80.chunk.js"
  ]
}

For what it’s worth, when I web-build the TestApp, it looks like this:
Screen Shot 2022-08-06 at 9.43.06 AM

Both apps are using webpack 4.

The webpack-config for my main app is:

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

// 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 you want to add a new alias to the config.
  // config.resolve.alias["moduleA"] = "moduleB"

  // Maybe you want to turn off compression in dev mode.
  if (config.mode === "development") {
    config.devServer.compress = false
  }

  // Or prevent minimizing the bundle when you build.
  // if (config.mode === "production") {
  //   config.optimization.minimize = false
  // }

  // Finally return the new config for the CLI to use.
  return config
}
5

When I web-build my main app on the same machine, it looks like this:
Screen Shot 2022-08-06 at 9.48.34 AM

(Forum would only let me post one image in my previous reply)

6

The version you are referring to here is Expo CLI version (https://docs.expo.dev/workflow/expo-cli/). What’s the Expo SDK version on your project that you are facing the issue on? You can find the SDK version in package.json file → "dependencies".

7

There wasn’t an entry in package.json, but in yarn.lock I have:
@expo/sdk-runtime-versions@^1.0.0

8

Actually, going through expo upgrade I found the version:

You are currently using SDK 45.0.0. Would you like to update to the
latest version, 46.0.0?

I’ll upgrade to 46 and see if it works better.

9

I’m not familiar with Ignite, so maybe somehow it does something weird with the dependencies :slight_smile: but @expo/sdk-runtime-version is not what Aman was asking about.

A normal Expo app has a dependency called "expo". e.g.:

  "dependencies": {
    "expo": "^45.0.0",
    "expo-status-bar": "~1.3.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-native": "0.68.2",
    "react-native-web": "0.17.7"
  },

The above app is using Expo SDK 45.

10

My expo line from package.json is

"expo": "^46.0.0",

I’m still having this problem, but I may have to live with it for now. Perhaps this is something that happened during some upgrades or due to another dependency.

I spun up a different Ignite Expo app and it works fine, so I assume this one would have worked fine prior to me adding things in.

My full list of dependencies is here:

"dependencies": {
"@expo/config-plugins": "^5.0.0",
"@expo/webpack-config": "^0.17.0",
"@freakycoder/react-native-bounceable": "^0.2.5",
"@react-native-async-storage/async-storage": "~1.17.3",
"@react-native-picker/picker": "2.4.2",
"@react-navigation/bottom-tabs": "^6.3.1",
"@react-navigation/drawer": "^6.4.1",
"@react-navigation/material-bottom-tabs": "^6.2.1",
"@react-navigation/native": "~6.0.1",
"@react-navigation/native-stack": "^6.0.2",
"@react-navigation/stack": "~6.0.1",
"apisauce": "2.0.0",
"axios": "^0.27.2",
"eslint-plugin-react-hooks": "^4.6.0",
"expo": "^46.0.0",
"expo-checkbox": "~2.2.0",
"expo-dev-client": "~1.1.1",
"expo-file-system": "~14.1.0",
"expo-linear-gradient": "~11.4.0",
"expo-localization": "~13.1.0",
"expo-modules-core": "~0.11.3",
"expo-status-bar": "~1.4.0",
"google-libphonenumber": "^3.2.29",
"html-react-parser": "^3.0.1",
"i18n-js": "3.8.0",
"lodash": "^4.17.21",
"mobx": "6.1.8",
"mobx-react-lite": "3.2.0",
"mobx-state-tree": "5.0.1",
"react": "18.0.0",
"react-hook-form": "^7.33.1",
"react-native": "0.69.4",
"react-native-chart-kit": "^6.12.0",
"react-native-circular-progress": "^1.3.7",
"react-native-circular-progress-indicator": "^4.1.1",
"react-native-date-picker": "^4.2.3",
"react-native-dropdown-picker": "^5.4.2",
"react-native-dynamic-vector-icons": "^1.2.0",
"react-native-gesture-handler": "~2.5.0",
"react-native-gorgeous-header": "^1.0.0",
"react-native-keychain": "6.2.0",
"react-native-modern-header": "^1.0.2",
"react-native-paper": "^4.12.1",
"react-native-pell-rich-editor": "^1.8.8",
"react-native-phone-input": "^1.3.4",
"react-native-profile-header": "^0.1.1",
"react-native-reanimated": "~2.9.1",
"react-native-safe-area-context": "4.3.1",
"react-native-screens": "~3.15.0",
"react-native-svg": "12.3.0",
"react-native-svg-charts": "^5.4.0",
"react-native-uuid": "^2.0.1",
"react-native-vector-icons": "^9.1.0",
"react-native-webview": "11.23.0",
"react-simple-wysiwyg": "^2.0.2",
"reactotron-mst": "3.1.4",
"reactotron-react-js": "^3.3.7",
"reactotron-react-native": "5.0.2",
"sanitize-html": "^2.7.1",
"sharp-cli": "^2.1.1",
"shorthash": "^0.0.2",
"validate.js": "0.13.1"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/plugin-proposal-decorators": "7.12.1",
"@babel/plugin-proposal-optional-catch-binding": "7.12.1",
"@babel/preset-env": "^7.16.11",
"@babel/runtime": "^7.12.5",
"@react-native-community/cli-platform-ios": "^6.2.0",
"@rnx-kit/metro-config": "^1.2.31",
"@rnx-kit/metro-resolver-symlinks": "^0.1.15",
"@storybook/addons": "5.3.21",
"@storybook/react-native": "5.3.25",
"@storybook/react-native-server": "5.3.23",
"@types/i18n-js": "3.0.3",
"@types/jest": "26.0.19",
"@types/react": "~17.0.21",
"@types/react-dom": "~17.0.11",
"@types/react-native": "~0.67.6",
"@types/react-test-renderer": "17.0.1",
"@typescript-eslint/eslint-plugin": "4.10.0",
"@typescript-eslint/parser": "4.10.0",
"babel-jest": "26.6.3",
"babel-loader": "8.2.2",
"detox": "19.3.0",
"detox-expo-helpers": "0.6.0",
"eslint": "7.15.0",
"eslint-config-prettier": "7.0.0",
"eslint-config-standard": "16.0.2",
"eslint-plugin-import": "2.22.1",
"eslint-plugin-node": "11.1.0",
"eslint-plugin-promise": "4.2.1",
"eslint-plugin-react": "7.21.5",
"eslint-plugin-react-native": "3.10.0",
"expo-detox-hook": "1.0.10",
"expo-modules-autolinking": "~0.10.1",
"fbjs-scripts": "3.0.0",
"jest": "^26.6.3",
"jest-circus": "26",
"jest-environment-node": "26",
"jest-expo": "^45.0.0",
"jetifier": "1.6.6",
"metro-config": "0.66.2",
"metro-react-native-babel-preset": "0.66.2",
"mocha": "6",
"patch-package": "6.2.2",
"postinstall-prepare": "1.0.1",
"prettier": "2.2.1",
"prompt": "^1.3.0",
"query-string": "^7.0.1",
"react-devtools-core": "4.10.1",
"react-dom": "17.0.2",
"react-native-clean-project": "^3.6.3",
"react-native-web": "0.17.7",
"reactotron-core-client": "^2.8.10",
"regenerator-runtime": "^0.13.4",
"solidarity": "2.3.1",
"ts-jest": "26",
"typescript": "~4.3.5",
"webpack": "4"
},
11

You probably want to get rid of those dependencies.

There are also some devDependencies that should probably be dependencies and vice versa, although I don’t know if it really makes a difference.

Since you’re on Expo SDK 46, you should be using the local Expo CLI instead of the globally installed one.

Try:

npx expo build:web
12

Running npx expo build:web, I get the following:
expo build:web is not supported in the local CLI, please use npx expo export:web instead

I ran that and got the same result.

It’s also worth noting that in my testing project I can have the web version running and do development live (see changes on the browser). With this app I can’t do that anymore.

For the recommendation to remove dependencies, any reason why those two need to be removed?

13

Sorry, you’re right. It should be npx expo export:web. There was something weird in my test app that caused it to execute the global version of expo-cli when I tested this last night.

Strange.

They are used internally by Expo and generally not something that you should have installed in your project directly because the version you have installed might get out of sync with the version needed by one of your Expo (or other) dependencies.

To figure out your issue, I’d maybe try this:

Run expo-cli doctor --fix-dependencies (i.e. a globally installed expo-cli. There’s also npx expo install --fix, but that doesn’t seem to do as much checking.)

That might not help. If not, try running npx expo install <depname> for each of your dependencies. This should make sure that your package.json has versions of those dependencies that are compatible with the version of the Expo SDK that you’re using. (For dependencies that Expo doesn’t know about it will just run npm install <depname> or yarn add <depname>, so of course you might want to skip this for things you know you don’t want to upgrade.)

If that still doesn’t help. Try removing your package-lock.json / yarn.lock and node_modules and re-installing your dependencies.

If all else fails, create a new project and copy your code into it from the old app. But you might want to do this a piece at a time. e.g. start with just the dependencies to see if it breaks. If so, add only half of the dependencies. etc. If it still works after installing all of the dependencies, then start moving the code across and see if it breaks at some point.

Hopefully that will get you a working setup at the end, and may help you track down where the problem is coming from.