CODEWITHSUNDEEP
reactjsazureazure-web-app-servicegithub-actions
rootcage
rootcage

Reputation: 9

React deploy with Github Actions failure

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.

Upvotes: 0

Views: 421

Answers (1)

Harsh Mishra
Harsh Mishra

Reputation: 901

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'),
);

Upvotes: 0

Related Questions