how to use errorElement

[DeveloperCharles]

I'm following offical tutorial building my react app's routes, but failed to get the same result as doc when using errorElement.

I'm using createBrowserRouter.

Here is my index.tsx(btw, I'm using ts in my app):

import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from './App'
import ErrorPage from './error-page'

const rootElement = document.getElementById('root')

const rootInstance = createRoot(rootElement as HTMLElement)

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />,
  },
])

rootInstance.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

And this is my error-page.tsx:

import React from 'react'
import { useRouteError } from 'react-router-dom'

type RouteError = {
  statusText?: string,
  message?: string,
}

export default function ErrorPage() {
  const error = useRouteError() as RouteError | null
  console.log(error)

  return (
    <div>
      <h1>STH went wrong, please check the route...</h1>
      <p>
        <i>{ error?.statusText || error?.message }</i>
      </p>
    </div>
  )
}

But I didn't get my custom error page:

when I navigated to an unexisted route(/test, /about, /u, etc...), nor seeing the default error page as screenshot in the tutorial:

Although the doc maintainer humbly and humorously saying that the default error page is Gross!~~

But I did hope I can see this "Gross!" page than what I actually got..

I did some digging on my own by Goolge, Stackoverflow, Github Issues and Youtube, and even ChatGPT, but still failed to my expected error page..

I tried to add the catch-all route at the end of the route configuration:

import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from './App'
import ErrorPage from './error-page'

const rootElement = document.getElementById('root')

const rootInstance = createRoot(rootElement as HTMLElement)

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />,
  },
  {
    path: '*',
    element: <ErrorPage />
  }
])

rootInstance.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

But the browser still gave me this:

And there was a suggestion that I should add some logs in my error page component then check the Console in the browser devtool. I did put a row of logging the error from useRouteError, but I saw no logs in the Console.. So, my error page never mounted after I navigated to any unexsited routes?

Then I saw a ErrorBoundary advice, so i added that to try:

import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from './App'
import ErrorPage from './error-page'

const rootElement = document.getElementById('root')

const rootInstance = createRoot(rootElement as HTMLElement)

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    errorElement: <ErrorPage />,
  },
  {
    path: '*',
    element: <ErrorPage />
  }
])

// ErrorBoundary component
class ErrorBoundary extends React.Component<{ children: React.ReactNode }, { hasError: boolean }> {
  constructor(props: { children: React.ReactNode }) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error: any) {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      return <ErrorPage />;
    }

    return this.props.children;
  }
}

rootInstance.render(
  <React.StrictMode>
    <ErrorBoundary>
      <RouterProvider router={router} />
    </ErrorBoundary>
  </React.StrictMode>
)

Still got no luck:

(I saw some examples and realized that my custom error component could do this ErrorBoundary job..)

I'm start thinking if this related to any project configs or ts syntax/defines..
Anyway, I put my package.json, webpack.config.js, tsconfig.js here, FYI.
package.json

{
  "devDependencies": {
    "@webpack-cli/generators": "^3.0.7",
    "autoprefixer": "^10.4.18",
    "css-loader": "^6.10.0",
    "html-webpack-plugin": "^5.6.0",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "mini-css-extract-plugin": "^2.8.1",
    "postcss": "^8.4.35",
    "postcss-loader": "^8.1.1",
    "prettier": "^3.2.5",
    "style-loader": "^3.3.4",
    "ts-loader": "^9.5.1",
    "typescript": "^5.4.2",
    "webpack": "^5.90.3",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.0.2"
  },
  "version": "1.0.0",
  "description": "My webpack project",
  "name": "my-webpack-project",
  "scripts": {
    "build": "webpack --mode=production --node-env=production",
    "build:dev": "webpack --mode=development",
    "build:prod": "webpack --mode=production --node-env=production",
    "watch": "webpack --watch",
    "serve": "webpack serve"
  },
  "dependencies": {
    "@types/lodash": "^4.17.0",
    "@types/react": "^18.2.64",
    "@types/react-dom": "^18.2.21",
    "@types/react-router-dom": "^5.3.3",
    "ahooks": "^3.7.10",
    "antd": "^5.15.1",
    "axios": "^1.6.7",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3"
  }
}

webpack.config.js

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

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const isProduction = process.env.NODE_ENV == 'production';


const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';



const config = {
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
    },
    devServer: {
        open: true,
        host: 'localhost',
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'index.html',
        }),

        // 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: /\.less$/i,
                use: [stylesHandler, 'css-loader', 'postcss-loader', 'less-loader'],
            },
            {
                test: /\.css$/i,
                use: [stylesHandler, 'css-loader', 'postcss-loader'],
            },
            {
                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 MiniCssExtractPlugin());
        
        
    } else {
        config.mode = 'development';
    }
    return config;
};

tsconfig.js

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "nodenext",
    "moduleResolution": "nodenext",
    "target": "es5",
    "lib": [
      "DOM",
      "ESNext"
    ],
    "jsx": "react",
    "strict": true,
    "allowJs": true
  },
  "include": [
    "src"
  ]
}

Maybe someone can tell what's wrong in any of those files..

And I did get my custom error page when I did this in my index.tsx:

import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from './App'
import ErrorPage from './error-page'

const rootElement = document.getElementById('root')

const rootInstance = createRoot(rootElement as HTMLElement)

const router = createBrowserRouter([
  {
    element: <ErrorPage />,
    children: [
      {
        path: '/',
        element: <App />
      }
    ]
  }
])

rootInstance.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

But I were seeing this at /, not any unexisted route, if I navigated to /test, I got the Cannot GET /test again..

I know that I render the error page directly on route /, but this could approve that there are no errors in my custom error component, right?

And I found that if I just put the errorElement in the router, nothing else, I finally got the "Gross!" default error page..

import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import App from './App'
import ErrorPage from './error-page'

const rootElement = document.getElementById('root')

const rootInstance = createRoot(rootElement as HTMLElement)

const router = createBrowserRouter([
  {
    element: <ErrorPage />,
  }
])

rootInstance.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
)

I did exactly the same thing as the offical tutorial(I think so..), but I were seeing totally different result and have no clue.. It really drove me crazy, I'm stucking here.. Somebody has the knowledge and time, help, please..

[lili21]

can you provide a codesandbox link or stackblitz link? and it's the react router stuff, I suggest you create discuss on react router repo instead remixl

[DeveloperCharles]

Ah.. Didn't notice that..
I clicked github icon on offical site

it brought me here

then I clicked issues link on this page

it got me here

then clicked new issue button at the top right above the issue list

i landed on this page

i read title and brief intro in each row, i believe usage question is the right option, so i clicked the open button in this row

i found the page to raise my question

it appears that the usage question open btn route to remix instead react router..


Not sure if this is a github issue or configuration mistake in the repo.
What if i go through all this in remix repo.. what would happen.. will i request questions in remix discussion or react router..

[DeveloperCharles]

i'll try to reproduce my issue in code sandbox, i'll provide the link soon. thx for you suggestion!

[DeveloperCharles]

codesandbox link
please check the project here. please share comments or thoughts that how can i use errorElement like the offical tutorial. appreciate in advance!

[lili21]

And I would suggest you follow along with the tutorial. Just create a new project using vite like the tutorial said.

Cannot GET /test looks like a webpack dev server issue.

[DeveloperCharles]

appreciate! i'll try vite today. i'll update here if it works.

[DeveloperCharles]

i tried vite create app, it worked! and i also tried create-react-app, it worked as well! so, it seems you are right. it's due to webpack dev serve somehow..
but, if so, i create my app with webpack and add react-router later, then i cant use offical api like errorElement? maybe there are other apis i may encounter such not-working issue..
i can choose vite or react-scripts for new projects, but what if i have an existed react app scaffolded by webpack..
ok, so now my question changed to: how to use errorElement in a webpack scaffolding app?
welcome anyone's ideas and thoughts!

[lili21]

you need to config webpack right. it should be a SPA application if you want to use react-router.

devServer: {
      historyApiFallback: true,
}

[DeveloperCharles]

Thank You! The root cause turns out to be my knowledge lackness of Webpack configs..
Really saved tons of my time! Appreciate again!
I shall read Webpack docs more often and carefully. I will.