React deploy with Github Actions failure

Question

My react app works locally, when I run npm start it'll compile and run without any errors. But when I deploy to Azure web app using Github Actions it fails in the compile with the following error

Error: Uncaught [Error: useRoutes() may be used only in the context of a <Router> component.]

Is there something specific about Github actions I'm missing here? The node and npm version I'm using are the same locally and on Github.

App.tsx:

function App() {
    return (
        <div className="App bg-gray-100">
            <Routes>
                <Route path='/' element={<MyComponent />} />
            </Routes>
        </div>
    );
}

Index.tsx:

root.render(
    <Provider store={store}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </Provider>
);

React version 18.2.0, react-router-dom on version 6.3.0, react-scripts on 5.0.1. Running npm run build yields a successful compilation.

score 0 · Answer 1 · answered Jun 05 '22 at 10:40

Can you please run this command on your local machine to see the build failure:

npm build

Your application build is failing and you might not be able to get the error because you are running the app in development mode, not the production mode.

Coming to your React error, it is because you need to wrap routes (Routes / useRoutes) inside a Router element.

This is what you can put for your entry-point:

import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';


ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root'),
);

React deploy with Github Actions failure

1 Answers1