search

expo / expo-webpack-integrations

Packages used to integrate Expo in Webpack-based projects.
8 stars 1 forks source link

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

Open JPStrydom opened 1 year ago

JPStrydom commented 1 year ago

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 commented 1 year ago

@JPStrydom

I'm having the same error.

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

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 commented 1 year ago

I'm having the same issue

ghost commented 1 year ago

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 commented 1 year ago

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 commented 12 months ago

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",
}
  5. Now you can run the web version
jeffreylsu commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

Any update?

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

CatalystMonish commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

I tinkered around with expo for a whole month then got fed up it, it’s not at all ready for production and is bad. Now I switched over to using capacitor with react web, it works wonderfully and helps me to achieve my goals easily much better than what expo or react native could have done.

On Wed, 9 Aug 2023 at 9:14 PM, Albi @.***> wrote:

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 ?

— Reply to this email directly, view it on GitHub https://github.com/expo/expo-webpack-integrations/issues/16, or unsubscribe https://github.com/notifications/unsubscribe-auth/AHF6AJIQ6W7NAYXFWND2IGLXUOV4VANCNFSM6AAAAAA2ALYO6E . You are receiving this because you commented.Message ID: @.***>

JPStrydom commented 11 months ago

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 commented 11 months ago

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

x39OME commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 10 months ago

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

JPStrydom commented 9 months ago

Any update on this from the devs?

x39OME commented 9 months ago

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 commented 9 months ago

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 commented 9 months ago

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 commented 7 months ago

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;
JPStrydom commented 2 months ago

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 commented 2 months ago

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,

JPStrydom commented 2 months ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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 EXPOPUBLIC 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 commented 1 month ago

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 EXPOPUBLIC 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 commented 1 month ago

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 EXPOPUBLIC 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 commented 1 month ago

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 EXPOPUBLIC 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 commented 3 weeks ago

@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.