react / react/metro

Help debugging: Expected MIME-Type to be 'application/javascript'... but got '(null)'

Open
#686 8 comments 5 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
5.6k
Forks
696
Avg merge
8m
Merged PRs (30d)
7

Description

Do you want to request a feature or report a bug?

Report a bug and request help debugging.

What is the current behavior?

When running a React Native 0.64 app with Hermes on a physical iOS device, I eventually hit an error while trying to load the app JS, which says Expected MIME-Type to be 'application/javascript' or 'text/javascript', but got '(null)'.

Clearing out node_modules and running with --reset-cache does fix the issue (edit: just --reset-cache is sufficient, no need to delete node_modules), but it doesn't take long to occur again. It's inconsistent, but I've even seen it fail on the first refresh after a reset-cache launch.

I haven't seen this on an Android device, or on an iOS simulator. Android continues to be able to load JS from metro after this happens.

If the current behavior is a bug, please provide the steps to reproduce and a minimal repository on GitHub that we can yarn install and yarn test.

I unfortunately have no idea how to reproduce this. If anyone could provide debugging suggestions, I'm happy to run them.

What is the expected behavior?

The javascript is served so that the app can load it 😄

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

Metro version: 0.64.0
Node version: v14.16.0
yarn version: 1.22.10

metro.config.js:

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

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the supplied metro.config.js, Metro 0.64.0 environment details, and the physical iOS device setup using Hermes. Reproduce the intermittent '(null)' MIME-type response around refreshes and compare behavior after --reset-cache with Android and the iOS simulator. Done means identifying the cause and confirming that Metro consistently serves the JavaScript so the app loads.

Written by the indexing model from the issue text.

Assessment

Tech stack
ios, javascript, react-native
Domain
build-system, mobile, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.