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).
Related
I am trying to setup react that is bundled with vitejs and storybook
after running the setup command as per vitejs docs storybook vite builder storybook runs but keeps showing it's loader and and nothing happens, if someone can point me on how to setup storybook with react and vite I'd be so thankful.
The issue is that jest (used by addon-interactions) assumes it is running in node, so it relies on a global on the global scope, which doesn't exist in the browser. One way to deal with this in storybook is to add a .storybook/preview-head.html file with the contents of:
<script>
window.global = window;
</script>
This will alias window to the global that jest is expecting, which works fine for the kinds of things needed by the interactions addon. Jest 28 will fix this problem, which will likely be used in the next major version of storybook (7.0).
I removed the interactions addon and it works fine, I don't use this addon so it's not a problem for me though, if someone can fix it and share how it'd be great
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?
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 am a beginner with reactjs so I start to create a site, I do all installations, I installed Webpack to generate automatically the bundle.js all it works well and the file bundle.js is well generated but nothing that posster on the index page (page index is empty) and there are also no errors on the console. Somewhat help me please
It can be a bit messy to get up & running if you're not experienced with these technologies and how module bundling in Webpack works.
This is exactly why Facebook created the "create-react-app" solution so that you can get running without any build config and focus on creating the app that you're after instead. You can use it and "eject" to a custom setup anytime and see how they've done it:
create-react-app by Facebook
Here is a guide that you can follow along to create a simple config build:
Setup a React Environment Using webpack and Babel
You can also check out some of the other solutions that the community offers, here is a list of 143 React starter projects:
Find your perfect React starter project
I'm using Material-UI components (e.g. DropDownMenu, RadioButtonGroup) in my React app. When I run it under webpack-dev-server the components render, but I can't interact with them.
I'm running injectTapEventPlugin() as recommended.
However, if I build the app using webpack and then load it in the browser (tried Chrome and Edge), all is fine. I can interact with the Material-UI components as expected.
Am I missing something? Is there some kind of fix? webpack-dev-server's hot reload makes my life easier.
I got this working. Must have been something in my webpack configuration that was causing it.
I merged some settings from the Material UI example configuration file into my existing file and it starting working.
Not entirely sure what was causing it, but happy to have it fixed.