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.
Related
I am trying to figure out how Babel gets used.
In one of my current projects, I see that I have a Babel file, but I never set up any configuration as far as I can tell that deals with Babel. So I want to know if it is actually being used or if I just have it installed.
When I deploy my React app to somewhere like AWS Amplify or Heroku, is Babel automatically being used and this is how my browser can understand React? Or would my browser understand React even without Babel?
You can not be sure that all versions of all browsers understand modern JavaScript. That is why, even if you write modern JS in your code, Babel will automatically turn it to plain vanilla JS so that it is compatible with almost every browsers.
This links I attached below, are of highlighted texts. Please give it a read as I believe it will clear up your confusions somewhat.
https://www.freecodecamp.org/news/jsx-in-react-introduction/#:~:text=But%20the%20browser,JavaScript%20compiler/transpiler.
https://create-react-app.dev/docs/getting-started/#:~:text=You%20don%E2%80%99t%20need,good%20to%20go.
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 have an issue when I tried to use the build on the server the component from MUI (material UI) are coming with the classes not complete, example:
image with error, and this is how should be image on dev.
The weird thing is this only happens on the server. It works on my local dev and after I do build, I tried php -S localhost:33333 on that dist/ files and it works. so my theory it's a server side issue? but maybe it can be fix it if I do better config. maybe webpack maybe babel.... I've tried to make sure that #babel/plugin-transform-template-literals plugin is running because could be a template literal issue within the MUI lib right?
I have tried, do a custom webpack config (ignoring the default fron NX), changed the target to es3....
Any help would be much appreciated!
my enviroment:
Monorepo with NX
react 17.0.2
typescript: 4.4.3
#mui/material": ^5.4.3
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).
http://react-toolbox.com/ Looks really good, but they have a sass dependency. Is there a way to use react-toolbox in a isomorphic/universal app and render them from the server, or are the sass dependencies somehow declared within the components?
They recommend using a CSS loader in the webpack development build. This leads me to the conclusion that the CSS dependencies are within the React Components. Am I wrong?
Yes, it can be rendered on the server side.
A preferred way is to utilize Webpack build with css-loader and sass-loader. Take a look on webpack-isomorphic-tools as an example of the plugin which could help with a server-side rendering of the react apps.
In my current project, we are using a forked version of webpack-starter-kit. Both examples allow you to utilize react-toolbox for a universal app. I am sure you could find at least a dozen of similar setups on GitHub.