Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

@expo/webpack-config@18.1.1 doesn't support expo@49.0.0 #16

Open
JPStrydom opened this issue Jul 6, 2023 · 44 comments
Open

@expo/webpack-config@18.1.1 doesn't support expo@49.0.0 #16

JPStrydom opened this issue Jul 6, 2023 · 44 comments

Comments

@JPStrydom
Copy link

Summary

When trying to upgrade to expo 49, we receive the following error when running npm i:

npm ERR! Could not resolve dependency:
npm ERR! peer expo@"^48.0.17" from @expo/webpack-config@18.1.1
npm ERR! node_modules/@expo/webpack-config
npm ERR!   @expo/webpack-config@"^18.1.1" from the root project

Having a look at @expo/webpack-config, it still require expo 48:

  "peerDependencies": {
    "expo": "^48.0.17"
  },

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: Windows 10 10.0.22621
    Binaries:
      Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
      npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: AI-222.4459.24.2221.9971841
    Expo Workflow: managed

Please specify your device/emulator/simulator platform, model and version

All

Error output

npm ERR! Could not resolve dependency:
npm ERR! peer expo@"^48.0.17" from @expo/webpack-config@18.1.1
npm ERR! node_modules/@expo/webpack-config
npm ERR!   @expo/webpack-config@"^18.1.1" from the root project

Reproducible demo or steps to reproduce from a blank project

Simply trying to install expo@49.0.0 with @expo/webpack-config@18.1.1 installed will reproduce the error.

@zethzeth
Copy link

zethzeth commented Jul 9, 2023

@JPStrydom

I'm having the same error.

I tried just removing the line: @expo/webpack-config from my package.json-file:

  • It works when running in the iOS simulator
  • I can compile and see my app in Expo Go.
  • I cannot open the app on my iOS-phone (after eas build and eas submit). I'm guessing due to me recently updated to version SDK49-related.

I can read here: https://blog.expo.dev/expo-sdk-49-c6d398cdf740 that it's recommended to use Metro instead:

It says:

Metro is now recommended for web. The @expo/webpack-config package is currently in maintenance mode, and our efforts on web support are focused on Metro. We strongly recommend all new projects use Metro for web. Many existing projects should work well with Metro as long as they don’t require any of the few remaining features only supported by Webpack. Refer to the “Known Regressions” section below for more information on issues you may encounter using Webpack with SDK 49.

@azizsaad
Copy link

I'm having the same issue

@ghost
Copy link

ghost commented Jul 12, 2023

As @zethzeth said, Metro is now the recommended bundler for web.

npx create-expo-app --template blank-typescript@sdk-49
cd my-app/
npx expo install react-native-web@~0.19.6 react-dom@18.2.0
# add `"bundler": "metro"` in app.json > expo > web
npx expo start

@JPStrydom
Copy link
Author

JPStrydom commented Jul 13, 2023

As @zethzeth said, Metro is now the recommended bundler for web.

npx create-expo-app --template blank-typescript@sdk-49
cd my-app/
npx expo install react-native-web@~0.19.6 react-dom@18.2.0
# add `"bundler": "metro"` in app.json > expo > web
npx expo start

Is there documentation to help existing projects using webpack-config migrate to metro? We have quite a lot of custom webpack config code (import aliasing, env and template injection, etc.) and web server code that we'll need to migrate, and it'll help to have some guidance form the developers.

It also looks like switching from webpack to metro requires switching to expo router (else you lose hot reloading on web), which is a massive change for those using other navigation frameworks (such as react navigation). Seems like we'll need some guidance from the developers.

@ebulku
Copy link

ebulku commented Jul 21, 2023

It was pretty easy to move to Metro instead,

  1. Remove @expo/webpack-config from package.json
  2. Run npm update
  3. Do Expo Upgrade if you haven't done already
  4. Add bundler in app.json
"web": {
      "bundler": "metro",
    }
  1. Now you can run the web version

@jeffreylsu
Copy link

Different symptoms, same root cause:
This causes the "Create Your First App" guide (https://docs.expo.dev/tutorial/create-your-first-app/, permalink https://github.com/expo/expo/blob/8a3fadc5b0483afe35e34fed92d3277fc01952f9/docs/pages/tutorial/create-your-first-app.mdx#L63) not to work out-of-the-box. It errors out on Step 3.

Seems like either webpack-config should support latest version of expo, or the doc should be updated in some form (perhaps the best being to be changed to have metro web bundling instructions since that's what SDK 49 recommends)

@scottmcook
Copy link

scottmcook commented Jul 26, 2023

Oof rough first day working with Expo. The starter docs lead you right to a failed build.

For new projects modifying this in app.json does the trick.

"expo": {
  "web": {
      "bundler": "metro",
    }
}

@sebnun
Copy link

sebnun commented Jul 27, 2023

Also first day with Expo.
So if someone else lands here from the tutorial:

On step 3:
instead of npx expo install react-dom react-native-web @expo/webpack-config
it should be npx expo install react-dom react-native-web
and add the changes to app.json mentioned above

@biller-aivy
Copy link

Any update?

We have some special webpack configs which are not supported with metro.

@CatalystMonish
Copy link

I shifted the my project to metro bundler it's on SDK 49 I am facing issues with AWS Amplify now, the error says
Web Bundling failed 1797ms Unable to resolve "graphql" from "node_modules\@aws-amplify\pubsub\lib-esm\Providers\AWSAppSyncRealTimeProvider\index.js"
The project runs on android and ios but not on web.

@biller-aivy
Copy link

I shifted the my project to metro bundler it's on SDK 49 I am facing issues with AWS Amplify now, the error says

`Web Bundling failed 1797ms

Unable to resolve "graphql" from "node_modules@aws-amplify\pubsub\lib-esm\Providers\AWSAppSyncRealTimeProvider\index.js"`

The project runs on android and ios but not on web.

Just try this:

const { getDefaultConfig } = require('expo/metro-config')

const config = getDefaultConfig(__dirname)

module.exports = {
...config,
resolver: {
...config.resolver,
blockList: [config.resolver.blockList, /(/amplify/.*)$/],
sourceExts: [...config.resolver.sourceExts, 'mjs']
}
}

@CatalystMonish
Copy link

CatalystMonish commented Aug 7, 2023

I shifted the my project to metro bundler it's on SDK 49 I am facing issues with AWS Amplify now, the error says
Web Bundling failed 1797ms Unable to resolve "graphql" from "node_modules@aws-amplify\pubsub\lib-esm\Providers\AWSAppSyncRealTimeProvider\index.js"
The project runs on android and ios but not on web.

Just try this:

const { getDefaultConfig } = require('expo/metro-config')

const config = getDefaultConfig(__dirname)

module.exports = { ...config, resolver: { ...config.resolver, blockList: [config.resolver.blockList, /(/amplify/.*)$/], sourceExts: [...config.resolver.sourceExts, 'mjs'] } }

Can you please tell where exactly to add this?

@biller-aivy
Copy link

I shifted the my project to metro bundler it's on SDK 49 I am facing issues with AWS Amplify now, the error says

`Web Bundling failed 1797ms

Unable to resolve "graphql" from "node_modules@aws-amplify\pubsub\lib-esm\Providers\AWSAppSyncRealTimeProvider\index.js"`

The project runs on android and ios but not on web.

Just try this:

const { getDefaultConfig } = require('expo/metro-config')

const config = getDefaultConfig(__dirname)

module.exports = { ...config, resolver: { ...config.resolver, blockList: [config.resolver.blockList, /(/amplify/.*)$/], sourceExts: [...config.resolver.sourceExts, 'mjs'] } }

Can you please tell where exactly to add this?

My app.json

`{

"expo": {

"name": "source-catalyst-plus",

"slug": "source-catalyst-plus",

"version": "1.0.0",

"orientation": "portrait",

"icon": "./assets/icon.png",

"userInterfaceStyle": "light",

"splash": {

  "image": "./assets/splash.png",

  "resizeMode": "contain",

  "backgroundColor": "#ffffff"

},

"assetBundlePatterns": [

  "**/*"

],

"ios": {

  "supportsTablet": true

},

"android": {

  "adaptiveIcon": {

    "foregroundImage": "./assets/adaptive-icon.png",

    "backgroundColor": "#ffffff"

  }

},

"web": {

  "bundler": "metro",

  "favicon": "./assets/favicon.png"

}

}

}

`

My package.json

`{

"name": "source-catalyst-plus",

"version": "1.0.0",

"main": "node_modules/expo/AppEntry.js",

"scripts": {

"start": "expo start",

"android": "expo start --android",

"ios": "expo start --ios",

"web": "expo start --web"

},

"dependencies": {

"@aws-amplify/ui-react-native": "^1.2.23",

"@react-native-async-storage/async-storage": "^1.19.1",

"@react-native-community/masked-view": "^0.1.11",

"@react-native-community/netinfo": "^9.4.1",

"@react-navigation/native": "^6.1.7",

"@react-navigation/stack": "^6.3.17",

"@types/react": "~18.2.14",

"amazon-cognito-identity-js": "^6.3.1",

"aws-amplify": "^5.3.6",

"expo": "~49.0.5",

"expo-status-bar": "~1.6.0",

"graphql": "^15.8.0",

"react": "18.2.0",

"react-dom": "18.2.0",

"react-native": "0.72.3",

"react-native-gesture-handler": "~2.12.0",

"react-native-get-random-values": "^1.9.0",

"react-native-reanimated": "~3.3.0",

"react-native-safe-area-context": "4.6.3",

"react-native-screens": "~3.22.0",

"react-native-url-polyfill": "^2.0.0",

"react-native-web": "~0.19.6",

"typescript": "^5.1.3"

},

"devDependencies": {

"@babel/core": "^7.20.0",

"@types/react-native": "^0.72.2"

},

"private": true

}

`

You have to create a metro-config.js

@CatalystMonish
Copy link

I shifted the my project to metro bundler it's on SDK 49 I am facing issues with AWS Amplify now, the error says

`Web Bundling failed 1797ms

Unable to resolve "graphql" from "node_modules@aws-amplify\pubsub\lib-esm\Providers\AWSAppSyncRealTimeProvider\index.js"`

The project runs on android and ios but not on web.

Just try this:

const { getDefaultConfig } = require('expo/metro-config')

const config = getDefaultConfig(__dirname)

module.exports = { ...config, resolver: { ...config.resolver, blockList: [config.resolver.blockList, /(/amplify/.*)$/], sourceExts: [...config.resolver.sourceExts, 'mjs'] } }

Can you please tell where exactly to add this?
My app.json
`{
"expo": {

"name": "source-catalyst-plus",

"slug": "source-catalyst-plus",

"version": "1.0.0",

"orientation": "portrait",

"icon": "./assets/icon.png",

"userInterfaceStyle": "light",

"splash": {

  "image": "./assets/splash.png",

  "resizeMode": "contain",

  "backgroundColor": "#ffffff"

},

"assetBundlePatterns": [

  "**/*"

],

"ios": {

  "supportsTablet": true

},

"android": {

  "adaptiveIcon": {

    "foregroundImage": "./assets/adaptive-icon.png",

    "backgroundColor": "#ffffff"

  }

},

"web": {

  "bundler": "metro",

  "favicon": "./assets/favicon.png"

}

}
}
My package.json{
"name": "source-catalyst-plus",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {

"start": "expo start",

"android": "expo start --android",

"ios": "expo start --ios",

"web": "expo start --web"

},
"dependencies": {

"@aws-amplify/ui-react-native": "^1.2.23",

"@react-native-async-storage/async-storage": "^1.19.1",

"@react-native-community/masked-view": "^0.1.11",

"@react-native-community/netinfo": "^9.4.1",

"@react-navigation/native": "^6.1.7",

"@react-navigation/stack": "^6.3.17",

"@types/react": "~18.2.14",

"amazon-cognito-identity-js": "^6.3.1",

"aws-amplify": "^5.3.6",

"expo": "~49.0.5",

"expo-status-bar": "~1.6.0",

"graphql": "^15.8.0",

"react": "18.2.0",

"react-dom": "18.2.0",

"react-native": "0.72.3",

"react-native-gesture-handler": "~2.12.0",

"react-native-get-random-values": "^1.9.0",

"react-native-reanimated": "~3.3.0",

"react-native-safe-area-context": "4.6.3",

"react-native-screens": "~3.22.0",

"react-native-url-polyfill": "^2.0.0",

"react-native-web": "~0.19.6",

"typescript": "^5.1.3"

},
"devDependencies": {

"@babel/core": "^7.20.0",

"@types/react-native": "^0.72.2"

},
"private": true
}
`

You have to create a metro-config.js

thankyou sir, it is working as expected now 🙏

@yosepyohanes
Copy link

module.exports = {
...config,
resolver: {
...config.resolver,
blockList: [config.resolver.blockList, /(/amplify/.*)$/],
sourceExts: [...config.resolver.sourceExts, 'mjs']
}
}

i got error for /(/amplify/.*)$/ its say Expression expected. and Identifier expected.

@CatalystMonish
Copy link

CatalystMonish commented Aug 8, 2023

module.exports = {
...config,
resolver: {
...config.resolver,
blockList: [config.resolver.blockList, /(/amplify/.*)$/],
sourceExts: [...config.resolver.sourceExts, 'mjs']
}
}

i got error for /(/amplify/.*)$/ its say Expression expected. and Identifier expected.

/\/amplify\/.*$/ use this

@yosepyohanes
Copy link

module.exports = {
...config,
resolver: {
...config.resolver,
blockList: [config.resolver.blockList, /(/amplify/.*)$/],
sourceExts: [...config.resolver.sourceExts, 'mjs']
}
}

i got error for /(/amplify/.*)$/ its say Expression expected. and Identifier expected.

/\/amplify\/.*$/ use this

ok it work now, thanks sir

@yosepyohanes
Copy link

module.exports = {
...config,
resolver: {
...config.resolver,
blockList: [config.resolver.blockList, /(/amplify/.*)$/],
sourceExts: [...config.resolver.sourceExts, 'mjs']
}
}

i got error for /(/amplify/.*)$/ its say Expression expected. and Identifier expected.

/\/amplify\/.*$/ use this

ok it work now, thanks sir

but even it work i still got error Unable to resolve "graphql" from "node_modules@aws-amplify\pubsub\lib-esm\Providers\AWSAppSyncRealTimeProvider\index.js"

@yosepyohanes
Copy link

module.exports = {
...config,
resolver: {
...config.resolver,
blockList: [config.resolver.blockList, /(/amplify/.*)$/],
sourceExts: [...config.resolver.sourceExts, 'mjs']
}
}

i got error for /(/amplify/.*)$/ its say Expression expected. and Identifier expected.

/\/amplify\/.*$/ use this

ok it work now, thanks sir

but even it work i still got error Unable to resolve "graphql" from "node_modules@aws-amplify\pubsub\lib-esm\Providers\AWSAppSyncRealTimeProvider\index.js"

my dependencies:
"dependencies": {
"@aws-amplify/auth": "^5.6.0",
"@aws-amplify/cli": "^12.2.3",
"@aws-amplify/ui-react": "^5.0.7",
"@expo/image-utils": "^0.3.23",
"@expo/vector-icons": "^13.0.0",
"@react-native-async-storage/async-storage": "1.19.1",
"@react-navigation/drawer": "^6.6.3",
"@react-navigation/native": "^6.1.7",
"@react-navigation/native-stack": "^6.9.13",
"@reduxjs/toolkit": "^1.9.5",
"amazon-cognito-identity-js": "^6.3.1",
"aws-amplify": "^5.3.6",
"axios": "^1.4.0",
"expo": "49.0.6",
"expo-constants": "~14.4.2",
"expo-image-picker": "~14.3.2",
"expo-linking": "~5.0.2",
"expo-router": "2.0.1",
"expo-status-bar": "~1.6.0",
"graphql": "^16.7.1",
"ra-data-graphql": "^4.12.2",
"raf": "^3.4.1",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-native": "0.72.3",
"react-native-gesture-handler": "~2.12.0",
"react-native-reanimated": "~3.3.0",
"react-native-safe-area-context": "^4.7.1",
"react-native-screens": "~3.23.0",
"react-native-vector-icons": "^10.0.0",
"react-native-vector-image": "^0.4.3",
"react-native-web": "~0.19.7",
"react-redux": "^8.1.2",
"redux-persist": "^6.0.0"
},

@yosepyohanes
Copy link

module.exports = {
...config,
resolver: {
...config.resolver,
blockList: [config.resolver.blockList, /(/amplify/.*)$/],
sourceExts: [...config.resolver.sourceExts, 'mjs']
}
}

i got error for /(/amplify/.*)$/ its say Expression expected. and Identifier expected.

/\/amplify\/.*$/ use this

ok it work now, thanks sir

but even it work i still got error Unable to resolve "graphql" from "node_modules@aws-amplify\pubsub\lib-esm\Providers\AWSAppSyncRealTimeProvider\index.js"

please anyone help me with this error. thanks

@apatozi
Copy link

apatozi commented Aug 9, 2023

Metro doesn't have support for workbox-webpack-plugin which we rely on for building PWA with offline support. Any workaround for this ? Any planed date for supporting Webpack again ?

@CatalystMonish
Copy link

CatalystMonish commented Aug 9, 2023 via email

@JPStrydom
Copy link
Author

Has anyone else been able to get hot reloading working on web while using metro without the expo navigation library? We're using react-navigation and hot reloading stopped working for us after switching to metro. The example expo app also doesn't hot reload on web. Hot reloading is quite an important piece of functionality to lose in my opinion.

We also have a lot of custom webpack server and HTML code that we haven't been able to migrate to metro as there doesn't seems to be any documentation on how to do this (at least not any that I've found).

I feel that the Metro builder for web it's production ready yet, and I'd really like to hear from the developers what their plans around it is.

@x39OME
Copy link

x39OME commented Aug 13, 2023

npx expo install react-dom react-native-web @expo/webpack-config -- --legacy-peer-deps

@x39OME
Copy link

x39OME commented Aug 13, 2023

Summary

When trying to upgrade to expo 49, we receive the following error when running npm i:

npm ERR! Could not resolve dependency:
npm ERR! peer expo@"^48.0.17" from @expo/webpack-config@18.1.1
npm ERR! node_modules/@expo/webpack-config
npm ERR!   @expo/webpack-config@"^18.1.1" from the root project

Having a look at @expo/webpack-config, it still require expo 48:

  "peerDependencies": {
    "expo": "^48.0.17"
  },

Environment

  expo-env-info 1.0.5 environment info:
    System:
      OS: Windows 10 10.0.22621
    Binaries:
      Node: 18.16.0 - C:\Program Files\nodejs\node.EXE
      npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
    IDEs:
      Android Studio: AI-222.4459.24.2221.9971841
    Expo Workflow: managed

Please specify your device/emulator/simulator platform, model and version

All

Error output

npm ERR! Could not resolve dependency:
npm ERR! peer expo@"^48.0.17" from @expo/webpack-config@18.1.1
npm ERR! node_modules/@expo/webpack-config
npm ERR!   @expo/webpack-config@"^18.1.1" from the root project

Reproducible demo or steps to reproduce from a blank project

Simply trying to install expo@49.0.0 with @expo/webpack-config@18.1.1 installed will reproduce the error.

try this

npx expo install react-dom react-native-web @expo/webpack-config -- --legacy-peer-deps

@JPStrydom
Copy link
Author

npx expo install react-dom react-native-web @expo/webpack-config -- --legacy-peer-deps

I'll see if this does the trick, but installing legacy dependencies on a new enterprise system feels wrong.
How long will Expo Webpack config still be supported?
When will we have to upgrade due to deprecations?

@x39OME
Copy link

x39OME commented Aug 14, 2023

npx expo install react-dom react-native-web @expo/webpack-config -- --legacy-peer-deps

I'll see if this does the trick, but installing legacy dependencies on a new enterprise system feels wrong. How long will Expo Webpack config still be supported? When will we have to upgrade due to deprecations?

I don't know. i just had the same problem .. after many attempts, this command work for me

@matheusbaumgart
Copy link

How do I get the config in babel to determine when to use react-native and when to use react-native-web? By adding the alias there I make it work on the web but break native.

@nicolae536
Copy link

I also get the error Unable to find "zod" is there any work around for this problem ?

@JPStrydom
Copy link
Author

Any update on this from the devs?

@x39OME
Copy link

x39OME commented Oct 6, 2023

try this guys

npx create-expo-app AwesomeProject
npx expo install react-native-web@~0.19.6 react-dom@18.2.0
npx expo install @expo/webpack-config@^19.0.0
npm start
w

This is will work with you

@guustavomv
Copy link

I also get the error Unable to find "zod" is there any work around for this problem ?

did you find out how to fix it?

@JPStrydom
Copy link
Author

try this guys

npx create-expo-app AwesomeProject npx expo install react-native-web@~0.19.6 react-dom@18.2.0 npx expo install @expo/webpack-config@^19.0.0 npm start w

This is will work with you

Thanks for this! Is @expo/webpack-config@^19.0.0 available yet? It looks like they're still on 18.1.3.

@michi88
Copy link

michi88 commented Nov 24, 2023

I also had the error: Web Bundling failed Unable to resolve "zod" error. Adding 'mjs' to the resolvers fixed it in

metro.config.js

/* eslint-env node */
// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require("expo/metro-config");

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
config.resolver.sourceExts.push("cjs");
config.resolver.sourceExts.push("mjs");  // <-- added this

module.exports = config;

@byCedric byCedric transferred this issue from expo/expo-cli Dec 30, 2023
@JPStrydom
Copy link
Author

By upgrading @expo/webpack-config to 19.0.1 (currently latest) it does support up to Expo 50, but Expo 51 is not supported.

See the following npm i output:
image

Running npm i --force does work, but is not a sustainable solution.

@JPStrydom
Copy link
Author

JPStrydom commented May 9, 2024

I understand that @expo/webpack-config is in maintenance mode, but can the developers please just add documentation around how we can migrate our projects to the web metro builder without forcing the migration to expo-router 🙏

For example,

  • How do we migrate web/index.html and web/serve.json templates to the metro bundler?
  • How do we migrate webpack.config.js files to the metro bundler?
  • Can one still use @react-navigation with the metro bundler, or do we need to migrate to expo-router
    • If not, can we use @react-navigation as the navigation framework and expo-router as the bundler?

@JPStrydom
Copy link
Author

In addition to my comment above, it does look like @expo/webpack-config works on Expo 51. My system builds and performs as expected. So perhaps an interim solution is to add Expo 51 as a valid peer dependency to @expo/webpack-config? This will get rid of the errors when running npm i, and appears to still work correctly.

@ChamaraWP
Copy link

ChamaraWP commented May 29, 2024

Has anyone else been able to get hot reloading working on web while using metro without the expo navigation library? We're using react-navigation and hot reloading stopped working for us after switching to metro. The example expo app also doesn't hot reload on web. Hot reloading is quite an important piece of functionality to lose in my opinion.

We also have a lot of custom webpack server and HTML code that we haven't been able to migrate to metro as there doesn't seems to be any documentation on how to do this (at least not any that I've found).

I feel that the Metro builder for web it's production ready yet, and I'd really like to hear from the developers what their plans around it is.

After adding Metro as a bundler in app.json, make sure to include the line import '@expo/metro-runtime'; in your index.js. I used to use webpack, but I switched to Metro because it has better support from Expo. Currently, I'm running SDK 50 with react-navigation.

@JPStrydom
Copy link
Author

Has anyone else been able to get hot reloading working on web while using metro without the expo navigation library? We're using react-navigation and hot reloading stopped working for us after switching to metro. The example expo app also doesn't hot reload on web. Hot reloading is quite an important piece of functionality to lose in my opinion.

We also have a lot of custom webpack server and HTML code that we haven't been able to migrate to metro as there doesn't seems to be any documentation on how to do this (at least not any that I've found).

I feel that the Metro builder for web it's production ready yet, and I'd really like to hear from the developers what their plans around it is.

After adding Metro as a bundler in app.json, make sure to include the line import '@expo/metro-runtime'; in your index.js. I used to use webpack, but I switched to Metro because it has better support from Expo. Currently, I'm running SDK 50 with react-navigation.

This will be super useful! Will definitely give it a try.

@ChamaraWP do you know how to access environment variables in the public/index.html file with metro as the bundler? That's the other big thing we've been struggling with.

@ChamaraWP
Copy link

ChamaraWP commented May 29, 2024

Has anyone else been able to get hot reloading working on web while using metro without the expo navigation library? We're using react-navigation and hot reloading stopped working for us after switching to metro. The example expo app also doesn't hot reload on web. Hot reloading is quite an important piece of functionality to lose in my opinion.
We also have a lot of custom webpack server and HTML code that we haven't been able to migrate to metro as there doesn't seems to be any documentation on how to do this (at least not any that I've found).
I feel that the Metro builder for web it's production ready yet, and I'd really like to hear from the developers what their plans around it is.

After adding Metro as a bundler in app.json, make sure to include the line import '@expo/metro-runtime'; in your index.js. I used to use webpack, but I switched to Metro because it has better support from Expo. Currently, I'm running SDK 50 with react-navigation.

This will be super useful! Will definitely give it a try.

@ChamaraWP do you know how to access environment variables in the public/index.html file with metro as the bundler? That's the other big thing we've been struggling with.

Unfortunately, no. but have you tried this , it says "Environment variables prefixed with EXPO_PUBLIC_ will be exposed to the app at build-time."

We don't have a folder structure called 'public', but I've seen it in many places. What purpose does it serve? What kind of files do you have there? For example, when you build, does it take 'public/index.html' as the entry point or something else?

@JPStrydom
Copy link
Author

Has anyone else been able to get hot reloading working on web while using metro without the expo navigation library? We're using react-navigation and hot reloading stopped working for us after switching to metro. The example expo app also doesn't hot reload on web. Hot reloading is quite an important piece of functionality to lose in my opinion.
We also have a lot of custom webpack server and HTML code that we haven't been able to migrate to metro as there doesn't seems to be any documentation on how to do this (at least not any that I've found).
I feel that the Metro builder for web it's production ready yet, and I'd really like to hear from the developers what their plans around it is.

After adding Metro as a bundler in app.json, make sure to include the line import '@expo/metro-runtime'; in your index.js. I used to use webpack, but I switched to Metro because it has better support from Expo. Currently, I'm running SDK 50 with react-navigation.

This will be super useful! Will definitely give it a try.

@ChamaraWP do you know how to access environment variables in the public/index.html file with metro as the bundler? That's the other big thing we've been struggling with.

Unfortunately, no. but have you tried this , it says "Environment variables prefixed with EXPO_PUBLIC_ will be exposed to the app at build-time."

We don't have a folder structure called 'public', but I've seen it in many places. What purpose does it serve? What kind of files do you have there? For example, when you build, does it take 'public/index.html' as the entry point or something else?

We have moved over to the new env variable structure (prefixing vars with EXPO_PUBLIC_XXX) and it seems to work within the app itself.

The purpose of the public/index.html file is to allow developers to edit the root web HTML template before the web app is built. This let's one add things like web scripts (like google scripts maps, custom styles, tracking and monitoring tools). We were using it to load our Google maps script for web maps, which worked via expo webpack, but we haven't found a way to access env vars in that file (like our google maps API key, which is different per env).

You can generate this public/index.html file, and other metro build files, with npx expo customize (might be a different script, but not 100% sure).

@ChamaraWP
Copy link

ChamaraWP commented May 29, 2024

Has anyone else been able to get hot reloading working on web while using metro without the expo navigation library? We're using react-navigation and hot reloading stopped working for us after switching to metro. The example expo app also doesn't hot reload on web. Hot reloading is quite an important piece of functionality to lose in my opinion.
We also have a lot of custom webpack server and HTML code that we haven't been able to migrate to metro as there doesn't seems to be any documentation on how to do this (at least not any that I've found).
I feel that the Metro builder for web it's production ready yet, and I'd really like to hear from the developers what their plans around it is.

After adding Metro as a bundler in app.json, make sure to include the line import '@expo/metro-runtime'; in your index.js. I used to use webpack, but I switched to Metro because it has better support from Expo. Currently, I'm running SDK 50 with react-navigation.

This will be super useful! Will definitely give it a try.
@ChamaraWP do you know how to access environment variables in the public/index.html file with metro as the bundler? That's the other big thing we've been struggling with.

Unfortunately, no. but have you tried this , it says "Environment variables prefixed with EXPO_PUBLIC_ will be exposed to the app at build-time."
We don't have a folder structure called 'public', but I've seen it in many places. What purpose does it serve? What kind of files do you have there? For example, when you build, does it take 'public/index.html' as the entry point or something else?

We have moved over to the new env variable structure (prefixing vars with EXPO_PUBLIC_XXX) and it seems to work within the app itself.

The purpose of the public/index.html file is to allow developers to edit the root web HTML template before the web app is built. This let's one add things like web scripts (like google scripts maps, custom styles, tracking and monitoring tools). We were using it to load our Google maps script for web maps, which worked via expo webpack, but we haven't found a way to access env vars in that file (like our google maps API key, which is different per env).

You can generate this public/index.html file, and other metro build files, with npx expo customize (might be a different script, but not 100% sure).

have you tried to use env(variable-name-you-wanto-access) like this in the HTML? But I don't know if prefixing vars supports this. the problem is when you use the env like in the HTML anyone can access the HTML and see all the keys on the client end.

P.S: This how we access env from HTML
inside your script tag
if ('%STAGE%' === '"production"')
this STAGE is one of our env variables

@JPStrydom
Copy link
Author

Has anyone else been able to get hot reloading working on web while using metro without the expo navigation library? We're using react-navigation and hot reloading stopped working for us after switching to metro. The example expo app also doesn't hot reload on web. Hot reloading is quite an important piece of functionality to lose in my opinion.
We also have a lot of custom webpack server and HTML code that we haven't been able to migrate to metro as there doesn't seems to be any documentation on how to do this (at least not any that I've found).
I feel that the Metro builder for web it's production ready yet, and I'd really like to hear from the developers what their plans around it is.

After adding Metro as a bundler in app.json, make sure to include the line import '@expo/metro-runtime'; in your index.js. I used to use webpack, but I switched to Metro because it has better support from Expo. Currently, I'm running SDK 50 with react-navigation.

This will be super useful! Will definitely give it a try.
@ChamaraWP do you know how to access environment variables in the public/index.html file with metro as the bundler? That's the other big thing we've been struggling with.

Unfortunately, no. but have you tried this , it says "Environment variables prefixed with EXPO_PUBLIC_ will be exposed to the app at build-time."
We don't have a folder structure called 'public', but I've seen it in many places. What purpose does it serve? What kind of files do you have there? For example, when you build, does it take 'public/index.html' as the entry point or something else?

We have moved over to the new env variable structure (prefixing vars with EXPO_PUBLIC_XXX) and it seems to work within the app itself.

The purpose of the public/index.html file is to allow developers to edit the root web HTML template before the web app is built. This let's one add things like web scripts (like google scripts maps, custom styles, tracking and monitoring tools). We were using it to load our Google maps script for web maps, which worked via expo webpack, but we haven't found a way to access env vars in that file (like our google maps API key, which is different per env).

You can generate this public/index.html file, and other metro build files, with npx expo customize (might be a different script, but not 100% sure).

have you tried to use env(variable-name-you-wanto-access) like this in the HTML? But I don't know if prefixing vars supports this. the problem is when you use the env like in the HTML anyone can access the HTML and see all the keys on the client end.

P.S: This how we access env from HTML
inside your script tag
if ('%STAGE%' === '"production"')
this STAGE is one of our env variables

I'll definitely give this a try. Has this worked for you with expo env vars (i.e. EXPO_PUBLIC_XXX)? And is there anything different we'd need to do to get this working within a scripts src tag, to inject en env var into a script URL for example?

@JPStrydom
Copy link
Author

@ChamaraWP I've tried all possible combinations I can think of by we haven't been able to access env variables in the public/index.html file. We've tried the following:

<script type="text/javascript">
  console.log('%EXPO_PUBLIC_TEST_ENV%'); // This just logs %EXPO_PUBLIC_TEST_ENV%
  console.log('%TEST_ENV%'); // This just logs %TEST_ENV%
  console.log('<%= EXPO_PUBLIC_TEST_ENV %>'); // This just logs <%= EXPO_PUBLIC_TEST_ENV %>
  console.log('<%= TEST_ENV %>'); // This just logs <%= TEST_ENV %>
  console.log(process); // This just logs undefined
</script>

But none of it worked.

Any other ideas?

I made an issue on the Metro repo here if you'd like to keep an eye on it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests