Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useState) is not a function

[Babeev]

I setting up react-native-web app with redux-toolkit and have an error: Uncaught TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.useState) is not a function at rtk-query-react.esm.js

This error appears in the buildMutationHook in the file rtk-query-react.esm.js

useState was imported at the top of that file though

And this import leads to the right place: node_modules/@types/react/index.d.ts

store:

api:

auth endpoint:

user endpoint:

custom hook:

component:

webpack:

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const path = require('path');
const webpackEnv = process.env.NODE_ENV || 'development';
const appDirectory = path.resolve(__dirname, '../');

module.exports = {
  entry: [path.resolve(appDirectory, 'web/index.web.js')],

  output: {
    filename: 'bundle.web.js',
    path: path.resolve(appDirectory, 'web/dist'),
    publicPath: '/',
    clean: true,
  },

  devtool: 'source-map',

  devServer: {
    historyApiFallback: true,
    open: true,
    compress: true,
    hot: true,
  },

  mode: webpackEnv,

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              babelrc: true,
              filename: path.resolve(appDirectory, 'babel.config.js'),
            },
          },
        ],
      },

      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },

      {
        test: /\.(?:ico|svg|gif|png|jpg|jpeg)$/i,
        type: 'asset/inline',
      },
    ],
  },

  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'index.html'),
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(),
  ],

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

    extensions: ['.web.js', '.js', '.jsx', '.ts', '.tsx'],

    modules: ['.', 'node_modules'],
  },
};

babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-web'],
};

package.json:

{
  "name": "teacher",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "web:start": "webpack-dev-server --config ./web/webpack.config.js --hot --mode=development",
    "web:build": "webpack --config ./web/webpack.config.js --mode=production",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "unit": "jest",
    "e2e": "cypress open"
  },
  "dependencies": {
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-navigation/native": "6.0.12",
    "@react-navigation/native-stack": "6.8.0",
    "@reduxjs/toolkit": "1.8.5",
    "jwt-decode": "^3.1.2",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-native": "0.69.5",
    "react-native-encrypted-storage": "^4.0.2",
    "react-native-safe-area-context": "4.3.3",
    "react-native-screens": "3.17.0",
    "react-native-web": "0.18.9",
    "react-redux": "8.0.2",
    "react-scripts": "5.0.1",
    "whatwg-fetch": "^3.6.2"
  },
  "devDependencies": {
    "@babel/core": "7.18.10",
    "@babel/plugin-transform-runtime": "7.18.10",
    "@babel/preset-env": "7.18.10",
    "@babel/preset-react": "7.18.6",
    "@babel/preset-typescript": "7.18.6",
    "@babel/runtime": "7.18.9",
    "@react-native-community/eslint-config": "2.0.0",
    "@testing-library/jest-native": "4.0.11",
    "@testing-library/react-native": "11.0.0",
    "@types/jest": "29.0.0",
    "@types/react": "18.0.17",
    "@types/react-native": "0.69.6",
    "@types/react-redux": "7.1.24",
    "@types/react-test-renderer": "18.0.0",
    "babel-jest": "29.0.1",
    "babel-loader": "8.2.5",
    "babel-plugin-module-resolver": "4.1.0",
    "babel-plugin-react-native": "1.0.1",
    "babel-plugin-react-native-web": "0.18.9",
    "clean-webpack-plugin": "^4.0.0",
    "cypress": "10.7.0",
    "eslint": "7.32.0",
    "html-webpack-plugin": "5.5.0",
    "jest": "29.0.1",
    "jest-transform-stub": "2.0.0",
    "metro-react-native-babel-preset": "0.72.1",
    "react-test-renderer": "18.0.0",
    "typescript": "4.8.2",
    "url-loader": "4.1.1",
    "webpack": "5.74.0",
    "webpack-cli": "4.10.0",
    "webpack-dev-server": "4.10.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[Babeev]

If I comment out this lines no errors appear and the rest works well

[markerikson]

Unfortunately I don't think there's anything we can do here. We know the library itself works right, and works right with React. I have to assume this is an issue with your bundler config / project setup somehow.

Given that, and also that we don't use RN ourselves, I'm afraid I don't have any particular suggestions for what to change to fix this. Sorry!

[andyjessop]

The only thing I can suggest is to use the non-react entry point for creatApi, which won't generate the hooks that are causing issues:

import { createApi } from '@reduxjs/toolkit/query';

[markerikson]

Looks like they are specifically trying to use RTKQ with React here, so I don't think that's going to solve the issue.

I am a bit confused by seeing an RN project set up with Webpack - I thought those were usually bundled with Metro. I guess it's being cross-compiled with react-native-web.

I can only assume that somehow react itself isn't being found by the bundler in this case.

[phryneas]

I am currently using RTKQ with a Expo React Native Web (hence webpack) setup at work and it works fine. This is really very very specific to your setup, I'm sorry!

[Babeev]

Looks like they are specifically trying to use RTKQ with React here, so I don't think that's going to solve the issue.

I am a bit confused by seeing an RN project set up with Webpack - I thought those were usually bundled with Metro. I guess it's being cross-compiled with react-native-web.

I can only assume that somehow react itself isn't being found by the bundler in this case.

Yes, I using react-native-web for setting up cross-platform app without expo. I have example repo for reproducing error: github.com/Babeev/react-native

For reproducing please open src/pages/Auth/controller.ts and uncomment line 12 or line 13. After this you will see the error

[Yogeshthangm]

If this is NEXT js Then converting the component into client component using 'use client'will solve this issue i had solved the similar issue just now

[HarshuHacker]

In The createSlice check the spelling of reducers It should be reducers: {} I had the same error because I used reducer

[yannik2480]

Had the same issue solved it by adding "use client"

[NathanZlion]

If this is NEXT js Then converting the component into client component using 'use client'will solve this issue i had solved the similar issue just now

You are a life saver @Yogeshthangm , thanks

[shimazojaji]

If this is NEXT js Then converting the component into client component using 'use client'will solve this issue i had solved the similar issue just now

Yes, that's right

[SaqlainYounas]

Use "Use Client" if you are using next js. It works!