expo: Constants.manifest.extra is undefined in web

As far as I know, this is still an issue…

I’m on 49 and I still getting the same error

Still an issue. The only solution I have found is to customize the webpack configuration, using dotenv to set your variables there.

Expo v48, having the same issue on web. However i’m using metro instead of webpack

Just ran into the same issue. Anybody found a fix or workaround for this yet? iOS and Android works as intended, on web Constants.manifest is empty.

Constants manifest does not work in the following web-cases:

• Custom Webpack configurations, e.g. configurations that do not use @expo/webpack-config.
• The Next.js Adapter.
• Metro web projects that aren’t using Expo Router (specifically the Babel plugin).

I don’t use it anymore, but it seems like this is still open

Managed to resolve the issue on web using the following babel plugin:

module.exports = function (api) {
  api.assertVersion(7);

  return {
    visitor: {
      Identifier(path, { file }) {
        const filePath = file.opts.filename;

        if (filePath.endsWith('ExponentConstants.web.js')) {
          if (path.node.name === 'APP_MANIFEST') {
            const isEnvVar =
              path.parentPath.isMemberExpression() &&
              path.parentPath.node.object.object.name === 'process' &&
              path.parentPath.node.object.property.name === 'env';
            if (isEnvVar) {
              console.log(
                'Found process.env.APP_MANIFEST:',
                path.parentPath.parentPath.node,
              );
              const manifestString = JSON.stringify(getAppManifest());
              path.parentPath.replaceWith(
                api.types.callExpression(api.types.identifier('JSON.parse'), [
                  api.types.stringLiteral(manifestString),
                ]),
              );
            }
          }
        }
      },
    },
  };
};

getAppManifest() is a function that reads my app.json, third party files and assembles the final merged manifest (like in app.config.ts). I won’t paste it here

@EvanBacon I’m finding that Constants.manifest, Constants.manifest2 and Constants.expoConfig are all empty ({}) using the default Webpack configuration (@expo/webpack-config) in Expo 47.

I am using the transform-inline-environment-variables approach to using environment variables in Expo. If I don’t use this and use the method of getting environment variables inside of my dynamic app config, then the problem goes away.

This strongly suggests there is an issue with the transform-inline-environment-variables approach on web.

Update: thanks to this obscure comment I was able to get it to work by explicitly including the variables we want like this (in babel.config.js):

"plugins": [
    [
      "transform-inline-environment-variables",
      {
        "include": ["NODE_ENV", "API_URL", "...your custome keys" ]
      }
    ]
  ]

If I don’t explicitly include the variables I am using, my entire Constants.[manifest|manifest2|expoConfig] is empty.

Got my answer here https://github.com/expo/eas-cli/issues/1265#issuecomment-1301525320 I do wish expo simplified/cleaned their documentation a bit and made like one simple example which just works out of the box instead of providing tons of information where it’s so easy to miss Constants.expoConfig vs Constants.manifest

Thanks, @robertoyoc 👍

I used your approach combined with dotenv to load env vars from .env the way they do in the tsconfig version of this Expo guide.

Got it working by using a combination of: app.config.ts and webpack.config.js

in app config I do:

export default ({ config }: { config: any }) => {
  const { API_URL } = process.env;
  
  return {
    ...config,
    extra: {API_URL}
  }
}

Then you need to pass them by running API_URL="myapi" expo start --web

My webpack config file is the one you generate with expo customize:web

@benlutz I wrote up what I did last year here. Basically I avoided using Constants & just used env https://finnternet.com/dev/blog/expo-starter-initial-setup I was wrong about the webpack config. The babel inline dotenv setup will work with web as long as you don’t customize your webpack config.

Then, for my staging & production builds, I use EAS and configure the env through the project console, adding them all as secrets for the build.