Expo Web Showing All my files in inspection

[vrinch]

I am using expo web to develop a web app, after hosting my files on firebase hosting, I decided to inspect the page to check how the files would display to users who try to view it. While doing this I noticed it was showing all my files including the node module folder to users. I have tried this with three different laptops and its the same thing, below is an image of the file structure in inspection and my firebase.json file

Can someone please point me in the right direction

[EvanBacon]

I think this is a problem with how the source maps are generated.

[vrinch]

I think this is a problem with how the source maps are generated.

thank you evan, I checked your expogram app to be sure I wasn't making any mistakes, it was the same thing. A temporary fix was to delete the .map files in the web-build/static/js I am not sure if this would have any effects on the app though

[EvanBacon]

Could you please provide a minimal repro. I can't seem to repro locally. Perhaps it's related to building a windows machine?

[vrinch]

I don't think its related to just a windows machine below is an image of the same issue from your instagram clone project at https://expogram.netlify.app/#/

[byCedric]

I can reproduce this as well, looks like the path transformation when building a production build doesn't work as expected. Whenever I manually replace the config.output.devtoolModuleFilenameTemplate with the method below. After this, the production sourcemaps are relative to my project path again.

// webpack.config.js
module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(...);

  config.output.devtoolModuleFilenameTemplate = info => (
    path.relative(env.projectRoot, info.absoluteResourcePath)
  );

  return config;
}

@EvanBacon I successfully reproduced this using this project.

• Run expo start:web - dev mode, so absolute URLs as expected
• Run expo build:web - prod mode, shouldn't contain absolute URLs

[nzinovyev19]

Same problem(

[c302750253]

remove the file "web-build/static/js/app.xxxxxxx.chunk.js.map" ,it works!

[github-actions[bot]]

This issue is stale because it has been open for 60 days with no activity. If there is no activity in the next 7 days, the issue will be closed.

[kirtikapadiya]

@byCedric , @EvanBacon same issue with npx expo export:web

[giaset]

This seems like a pretty big issue (just noticed it after a few years of using Expo and react-native-web)

Fixed it by making my build script something like this: expo export:web && rm ./web-build/static/js/*.js.map, but really wish I'd caught this sooner...

[byCedric]

Hi all! Since there are two versions of "web export" current in Expo, I'll reply to the same question twice.

Using npx expo export:web (Webpack)

⚠️ Note, Expo's webpack support has been sunset and is not actively maintained anymore. (docs)

When using Webpack, you could disable source map exports through a webpack.config.js file. E.g. run npx expo customize, select the webpack.config.js, and disable config.devtool whenever you don't want source maps.

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

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  // Disable source map exports when building for production
  // You can customize when the source maps are turned off, or always keep it off
  if (process.env.NODE_ENV === 'production') {
    // See: https://webpack.js.org/configuration/devtool/#root
    config.devtool = false;
  }

  return config;
};

Using npx expo export --platform web (Metro)

If you are using Metro to export your app to web, you don't need to do anything. The source maps are disabled by default, and can be exported when using npx expo export --platform web --source-maps.

Hope this helps!