Module parse failed: Unexpected token. react-native/index.js "typeof" operator

I just spent a few hours dealing with this exact issue.

First, you can try adding "@babel/preset-flow" to your .babelrc file (after installing). That was recommended here, but didn't actually work for me.

What worked for me was just adding externals: { "react-native": true }, to my webpack.config.js file. My config file ended up looking like this:

const path = require("path")

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "main.js",
        path: path.resolve(__dirname, "dist"),
    },
    externals: {
        "react-native": true,
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: ["babel-loader"],
            },
            // ...
        ],
    },
}

My understanding is that react-native is a dependency, so @babel/preset-flow didn't actually get triggered to help interpret the flow formatting in those files - it may only handle files in the main "entry" location of your webpack.config.js file.

Hopefully this helps someone out there. Feel free to comment on this answer if I'm a bit off-base and I'll update this :)

Do you try to run React Native in the browser? If yes, I recommend using React Native for Web.

react-native can not run in the browser. You need to add an alias from react-native to react-native-web in webpack.config.js, so this package is used instead.

Following the React Native for Web documentation you need to make this modification to your webpack config:

// webpack.config.js
module.exports = {
    // ...the rest of your config

    resolve: {
        alias: {
            'react-native$': 'react-native-web'
        }
    }
}