Simple Example causes component to unmount

[bcleary06]

I copy and pasted the code from the simple example and I am seeing three API requests and the component is unmounting.

I have tried everything I can think of to resolve the issue.

I am trying this library to replace my usual redux setup so I'd really like to understand what I'm missing.

import React from "react";
import ReactDOM from "react-dom";
import { QueryClient, QueryClientProvider, useQuery } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Example />
    </QueryClientProvider>
  );
}

function Example() {
  const { isLoading, error, data, isFetching } = useQuery("repoData", () =>
    fetch(
      "https://api.github.com/repos/tannerlinsley/react-query"
    ).then((res) => res.json())
  );

  if (isLoading) return <p>Loading...</p>

  if (error) return <p>An error has occurred</p>

  return (
    <div>
      <h1>{data.name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{" "}
      <strong>✨ {data.stargazers_count}</strong>{" "}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? "Updating..." : ""}</div>
      <ReactQueryDevtools initialIsOpen />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

my package.json deps
"dependencies": {}, "devDependencies": { "@babel/core": "7.16.5", "@babel/preset-env": "7.16.5", "@types/react": "17.0.38", "@types/react-dom": "17.0.11", "axios": "0.24.0", "babel-loader": "8.2.3", "html-webpack-plugin": "5.5.0", "prettier": "2.5.1", "react": "17.0.2", "react-dom": "17.0.2", "react-query": "3.34.6", "redux": "4.1.2", "styled-components": "5.3.3", "ts-loader": "9.2.6", "typescript": "4.5.4", "webpack": "5.65.0", "webpack-cli": "4.9.1", "webpack-dev-server": "4.7.1" }

[TkDodo]

The simple example works fine in codesandbox, so there is nothing wrong with the shown code. Can you show a repo where this fails? How are you bundling the application?

[bcleary06]

@TkDodo I just spun up a new repo using create react app using the typescript template and I'm not able to reproduce the behavior.

In the project where I'm seeing the issue I'm bundling myself with webpack but I don't see anything that jumps out at me as to what would be causing this issue.

const path = require( 'path')
const HtmlWebpackPlugin = require( 'html-webpack-plugin')

module.exports = {
  mode: 'development',
  entry: './src/index.tsx',
  devtool: 'inline-source-map',
  devServer: {
    hot: false,
    liveReload: false,
    port: 3002,
    static: './dist',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: '/node_modules/',
      },
      {
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    clean: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'index.html',
    }),
  ],
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  }
}

[bcleary06]

@TkDodo I cloned this repo https://github.com/JeDTr/react-redux-boilerplate/tree/react-query and I'm no longer seeing the issue. Obviously the root of my issue is with the webpack configuration.

Has anyone else run into a similar issue?

A couple things standout to me in https://github.com/JeDTr/react-redux-boilerplate/blob/react-query/app/index.jsx
import { hot } from "react-hot-loader/root"; import React from "react"; import ReactDOM from "@hot-loader/react-dom";
Is there a better way to scaffold a new project with react-query without using CRA?

[bcleary06]

@TkDodo I was able to get the code sample working as expected by making the following changes:

• I added import { hot } from 'react-hot-loader' to app.tsx and wrapped App in hot(module)(App)
• Changed webpack.config.js to

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");

module.exports = {
  entry: './src/index.tsx',
  devtool: 'source-map',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      },
      {
        test: /\.(ts|tsx)?$/,
        loader: 'ts-loader',
        exclude: /node_modules/
      },
    ]
  },
  resolve: {
    extensions: ['.ts', '.js', '.json', '.tsx']
  },
  devServer: {
    port: 3000,
    open: true,
    hot: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
      hash: true, // cache busting
      filename: '../dist/index.html'
    })
  ]
}