I have been working on a react app for two months.
Suddenly today when I ran 'npm start' it runs basic react app. By basic react app I mean the basic template you get when you create app using 'npx create-react-app', the one with react logo spinning etc.
My index.js file is returned to basic, App.js file as well.
Most dependencies in package.json file are gone, and I had plenty of them, axios, react-redux, redux-thunk, to name a few. Everything is gone.
Most other components are there. The ones that I created during the process.
Related
I'm building a MERN stack application and am currently having an issue with getting the the front end content to display while running npm run develop.
The index.html file I'm using is the standard template of create-react-app and my index.js file uses ReactDom.render with and document.getElementById('root').
react and react-dom are both version 17.0.1.
I can't see why this wouldn't work but when I enter npm run develop in the terminal, I receive a blank screen and the devtools show that <div id='root> is completely empty but the only error I have in my console log is a GraphQL syntax error. It can see the index file, along with my css files, pages and components but the app isn't displaying on the page.
I've tried importing different versions of react and react-dom, deleted and remade my index.html and index.js, substituting different content into the JSX app element, redoing my npm installs to see if something had gone wrong there and just about everything else I can think of but the result is always the same. On top of that I have run other apps with the same setup on my laptop and they work fine.
If anyone has encountered a similar problem, advice would be welcome.
I'm working on my pet project on React and deploy it on gh-pages.
All worked well before I started using the name of the component like MyComponent.name. Locally it works well but on deploy crashed. On React Dev Tools I see that all the components become Anonymous.
Why it is happened? And how to avoid it?
Our business is currently exploring Vercel to deploy our new landing pages written in React & NextJS. When running them locally (yarn dev) everything works correctly (both css imports and React hooks). When deployed on Vercel, both CSS & React are not working.
Project is organized as follows (conceptually):
./src/pages/_app.tsx: Imports css (uses tailwind as well) and wraps app into IconContext.Provider (for icons)
./src/pages/index.tsx: Exports (default) component, which uses inside react components to render / hooks to handle logic
We've spent the last few hours debugging this issue, but still no clue on where's the error (since we can perfectly launch them locally).
You can have a look at the website here: https://fudeo-flutter-advanced-git-master.aleamakers.vercel.app/
Can you understand where's the error? Thanks
Resolved and found the "error": I'm a complete idiot and React was working in reality. I though the opposite because of the missing css, which made everything messy.
The error I had was in purgecss: It had incorrect rules for purging css, and It was eliminating, at build time, all the custom css.
Thanks #Ramakay for your help. Actually using yarn build && yarn start made everything simpler to replicate locally (didn't notice them in the package.json).
Already tried suggestions here and here with no luck
I have a project with a directory structure like this:
.
- /app
- /web
app is a react native app (created manually, not with create-react-native-app).
web is a react app created using create-react-app.
Both use TypeScript.
I'm trying to render a component from app in the web application using react-native-web, but TypeScript doesn't seem to be parsing the file as I get this error:
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
> export type Props = {
Given that TypeScript is working fine within app and web independently, I'm not sure what I'm missing. One slight quirk of the project is that, because create-react-app doesn't allow relative imports from outside its own src folder, I've had to symlink app using npm link app in the web directory in order to import the app components.
Not sure if that's causing the problem, but I'm pretty stumped so any suggestions would be greatly appreciated.
Solution ended up being to add ts-loader to the webpack config of my React for web app. This was made slightly harder by the fact that create-react-app doesn't allow modifying its config files, but I was able to do so using react app rewired
I also had to change TypeScript's noEmit to false to ensure tsc is used for compilation as well as type checking (had to do this in react-app-rewired too, because CRA overwrites that setting in tsconfig.json if you try to change it).
Still slightly confusing to me why this was needed, given TypeScript was being parsed perfectly fine in the web and mobile apps individually.
I have a React project created with npx create-react-app where I implemented a handful React Components. I don't really see this project as an "React application", as it's just a personal library of Components I consume in another project, an HTML web application rendered using server-side technologies. My goal is to gradually replace parts of this application with React components. I don't really envision it becoming a single React application, my plan is just to replace the parts I think make sense to be developed with React.
I have no issue implementing these components - I'm using Storybook to organize the independent modules. But I'm struggling with the build process.
If I run npm run build I create a single application, based on the original React application code bootstrapped by create-react-app, which I essentially abandoned in favor of the Storybook setup. If I add the files generated by npm run build my project, I can't get React to render my components properly.
I managed to get a manual build process to work:
In my HTML project I add https://unpkg.com/react#16/umd/react.production.min.js and https://unpkg.com/react-dom#16/umd/react-dom.production.min.js
For each of my React components source files, I run npx babel --presets react-app/prod src/MyComponent.js -o build/mycomponent.js
Then I combine all the npx babel outputs in a single components.js file, adjusting some repeated functions that appear on the top of all files, and suppressing the import and export statements.
I load the component.js file in my HTML project, and I can create my components using plain JS:
ReactDOM.render(
React.createElement(MyComponent, {param: value}, null),
document.getElementById('myComponent')
);
Is there a better process to build my components to a single JS file I could consume in my HTML application?
As you expected, the project should be a reusable module/ UI library (say the name is my-ui) for other projects. I did the similar thing before and just introduce my approach here. First, export the components as normal. Second, create an index.js. Third, import and export those components you exported. Fourth, if you are familiar with webpack, use index.js as the entry in webpack.config.js to bundle the entire project as one file. You can publish this package, or just use it locally.
Then in other projects, import my-ui, you can use any component exported from that module.