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

Question

I'm quite new to the front end - trying to implement client side on React. After adding "react-native" dependency and running webpack I'm getting the following error:

ERROR in ./node_modules/react-native/index.js 13:7
Module parse failed: Unexpected token (13:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 'use strict';
| 
> import typeof AccessibilityInfo from './Libraries/Components/AccessibilityInfo/AccessibilityInfo';
| import typeof ActivityIndicator from './Libraries/Components/ActivityIndicator/ActivityIndicator';
| import typeof Button from './Libraries/Components/Button';
 @ ./node_modules/@react-navigation/native/lib/module/useBackButton.js 2:0-43 5:25-36
 @ ./node_modules/@react-navigation/native/lib/module/index.js
 @ ./src/main/js/app.js

I have the following dependencies in package.json:

 "dependencies": {
    "@react-native-community/masked-view": "^0.1.7",
    "@react-navigation/native": "^5.1.4",
    "@react-navigation/stack": "^5.2.9",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "^0.62.1",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-reanimated": "^1.7.1",
    "react-native-safe-area-context": "^0.7.3",
    "react-native-screens": "^2.4.0",
    "rest": "^2.0.0"
  },
  "scripts": {
    "watch": "webpack --watch -d"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "@babel/preset-react": "^7.9.4",
    "babel-loader": "^8.1.0",
    "webpack": "^4.42.1",
    "webpack-cli": "^3.3.11"
  }

I assume that "typeof" operator is not recognized, but why?

Blundering Philosopher · Accepted Answer · 2020-08-13 07:25:48Z

16

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 :)

edited Aug 13, 2020 at 7:25

answered Jun 1, 2020 at 19:18

Blundering Philosopher

6,8512 gold badges46 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dianaqqq Over a year ago

A little late to the party, but THANKS for saving me hours and hours

Tobias Zucali · Accepted Answer · 2020-06-17 09:00:11Z

5

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'
        }
    }
}

answered Jun 17, 2020 at 9:00

Tobias Zucali

1772 silver badges9 bronze badges

1 Comment

Mohammad Reza Over a year ago

what can I do in expo?

ZhiXu · Accepted Answer · 2024-02-20 08:29:53Z

I encountered the same issue before. The solution was to add the following to the webpack.config.js file:

externals: {
    "react-native": true,
},

The externals option is used to specify which modules are external, meaning they will not be bundled into the output bundle. Instead, they will be obtained from the environment at runtime. This is commonly used to treat certain modules (such as React Native) as external dependencies, reducing the size of the bundled output and obtaining these modules at runtime from the global scope or other environments.

Here is my webpack.config.js file

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require('path');
const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
const isProduction = process.env.NODE_ENV == 'production';


const config = {
    entry: './src/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    externals: {
        "react-native": true,
    },
    devServer: {
        open: true,
        host: 'localhost',
    },
    plugins: [

        // Add your plugins here
        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
    ],
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/i,
                loader: 'ts-loader',
                exclude: ['/node_modules/'],
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                type: 'asset',
            },

            // Add your rules for custom modules here
            // Learn more about loaders from https://webpack.js.org/loaders/
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
    },
};

module.exports = () => {
    if (isProduction) {
        config.mode = 'production';
        

        config.plugins.push(new WorkboxWebpackPlugin.GenerateSW());
        
    } else {
        config.mode = 'development';
    }
    return config;
};

That helped me, with webpack-dev-server 5.2.2 and react-native 0.81.1.

Anthony phillips · Accepted Answer · 2023-03-26 07:19:29Z

0

I upgraded my expo app SDK from 43 to 48 and had this issue. this solution is for you if you are using expo react native. Copy this code and paste in your babel.config.js

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: ['react-native-reanimated/plugin'], 
  };
};

answered Mar 26, 2023 at 7:19

Anthony phillips

3324 silver badges16 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related