Transitioning from a create-react-app setup to a standard React application

Recently, I've delved into a commercial project developed by another programmer using create-react-app. As the project continues to grow and evolve, working with create-react-app has become increasingly cumbersome. I desire the flexibility to configure webpack, node.js, and other packages entirely on my own.

I'm eager to transition the project from create-react-app to its original form as quickly as possible to simplify the development process.

After running npm run eject, I found the code to be needlessly complicated.

I've been searching for guidance or instructions on this matter but haven't come across any yet.

Below are the package.json dependencies:

{
    "dependencies": {
    ...
  },

  "devDependencies": {
    ...
  }
}

Answer №1

In deciding your next steps, it all comes down to what you're aiming to achieve. I encountered a similar issue where problems arose after ejecting my local copy. To resolve this, I opted to make modifications to the existing CRA project by:

  1. Updating to the latest versions of react and react-dom by running 'yarn react@next react-dom@next'
  2. By doing so, you will have access to the newest react features such as code splitting with React.lazy/React.Suspense, utilizing hooks, and more.
  3. If importing syntax errors are causing trouble, consider using the babel-plugin-syntax-dynamic-import plugin. Add the "babel" field in your package.json file.

I trust that these suggestions prove to be useful. Additionally, there are alternative libraries like https://github.com/timarney/react-app-rewired, although I cannot provide personal feedback on their effectiveness.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I require a Material-UI search icon to be positioned on the right side of the input box

https://i.stack.imgur.com/Tppgr.png Is there a way to ensure the search icon appears on the right side of the input box in material-ui when using React? Are there specific classes that need to be added for this? See below for the relevant code snippet: ...

What is the best method for typing a component prop that is compatible with singular use and can also function within loops without disrupting intellisense?

The Scenario Within a heading component, I have defined various types as shown below: // Heading/index.d.ts import { HTMLAttributes } from 'react'; export const HeadingType: { product: 'product'; marketing: 'marketing'; ...

How can I trigger a revalidation of a server component or page in NextJs v13.2 by utilizing an onClick event handler within the app directory?

Instead of automatically revalidating every 5 seconds with revalidate: 5, I would like to trigger the revalidation using an onClick event handler on the frontend ui react component. ...

Displaying data-table with only the values that are considered true

Right now, I am utilizing the AgReact table to exhibit data fetched from my endpoints. The data-table is functioning properly, however, it seems to be unable to display false values received from the endpoints on the table. Below are the snippets of my cod ...

Establishing the defaultValue for a TextField component within the Material UI library in a React application

Currently, as I work on my React JS application, I am retrieving data asynchronously from the server and displaying the values in a TextField. While this method is functional, I find myself dissatisfied with it. The Existing Approach class TestComponent ...

Updating Parent Component State from Child Function Component in React

Recently, I've been working on a signing page component that consists of a sign-in component and a sign-up component. However, I encountered an issue in passing an onClick function from the parent to the child in order to change the state of the paren ...

I continue to encounter the same error while attempting to deliver data to this form

Encountering an error that says: TypeError: Cannot read properties of null (reading 'persist') useEffect(() => { if (edit) { console.log(item) setValues(item!); } document.body.style.overflow = showModal ? "hidden ...

Exploring the prime attribute of a React element

I iterate over a list of locations I need to retrieve the key of the component through onClick event Here is my console.log method: const addTo = (element) => {console.log(element);}; return ( <> {data.map((item) =&g ...

Using Material UI with React hooks

I'm encountering an error while trying to incorporate code from Material UI. The error message is: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. Mismatc ...

Having trouble with my custom React router (using Router v6) - it's not automatically redirecting to the login

I need help with my private route in React Router v6. I want it to redirect unauthorized users to the login page, but when I try to access a restricted page without logging in, I just get a blank white screen instead of being redirected. Can anyone assis ...

The API endpoint returns a 404 not found error on NextJS 14 in the production environment, while it functions correctly on the local

I am in the process of creating a small website using NEXT JS 14. On my website, there is a contact us page that I have been working on. In the GetInTouch.tsx file, I have the following code: <Formik initialValues={{ ...

The Material UI FilledInput and OutlinedInput components cannot be located within the @material-ui/core library

I recently installed "@material-ui/core": "^1.5.1" and also added material-ui-chip-input@next to my project. When attempting to utilize the material-ui-chip-input component, I encountered an error stating that Module @material-ui/coreFilledInput and @mate ...

Experiencing an issue with mui/material grid causing errors

An error occurred in the file Grid2.js within node_modules/@mui/material/Unstable_Grid2. The export 'createGrid' (imported as 'createGrid2') could not be found in '@mui/system/Unstable_Grid' as the module has no exports. Desp ...

What is the best way to display images one by one from a map using a random fade effect?

I am in the process of creating a logo wall for a website. I successfully managed to display them randomly using a map, but now I want to make them appear one by one in a random order (for example: image 1, image 6, image 3, ...) and keep them visible once ...

Including a personalized User-Agent string in my headers for fetch requests

Currently, I am utilizing the fetch API within my React project to retrieve data from a JSON endpoint. One requirement I have is to include a custom User-Agent string in my requests. Upon inspecting my requests, I noticed that the UA string displays as: ...

Choose from a variety of options using Select and Checkbox components, but limit your choices to a maximum selection

Looking to implement the Select and Checkbox components from MUI with the ability for users to select multiple options. I want to limit their selection to a maximum of 3 choices, but I can't seem to find the props to set this restriction. Is there a w ...

Mastering the art of utilizing the LESS preprocessor with React Create-React-APP

Is it possible to implement the LESS preprocessor in my create-react-app project? In my React code, I have the following: ReactDOM.render( <form> <input type="email" data-info="Enter Email" pattern="/\S+@\S+\.\S+/ ...

State update is being delayed in the process of updating the state

Having trouble sending my form data to an API with this code: const handleSubmit = () => { setData({ ...data, apellidoParterno: inputs.apellidoParterno, apellidoMaterno: inputs.apellidoMaterno, ...

Material-UI now offers extensive support for babel-plugin-react-css-modules, allowing for easier styling in React

material-ui: v4.8.2 react: v16.12.0 When using babel-plugin-react-css-modules with an rtl app, I initially tried to utilize the injectFirst option but encountered a warning message stating: Material-UI: you cannot use the jss and injectFirst props at th ...

Unable to update state in the Nextjs -useState even with the help of useEffect

My goal is to create a dark mode toggle that cycles through 3 states { 0:auto, 1:light, 2:dark } in a loop. I also want to save this value in localStorage so it can be fetched on page reload. However, I'm facing an issue where the themeIndex doesn&apo ...