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
Related
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).
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.
Description
Please, I'm desperate. For the last 3 days, I've been trying without luck to implement react-hot-loader within an electron app and don't know what else to try. I'm following many comments, posts, issues trying to replicate what they did but none gives me enough information about the entire setup so I can find what I'm missing. I've already tried electron-webpack but it didn't work for me. It has HMR from webpack, but no react-hot-loader and that makes applications using react-router a pain to work with. Maybe it's not possible, but people seem to have achieved it so I'm not willing to give up.
Expected behavior
Project setup with electron, webpack, webpack-dev-server, react, react-router, react-hot-loader. I want to be able to change CSS and HTML strings without having to rebuild the entire project with webpack and restart it.
Actual behavior
Looking for the right styles in a component accessed through react-router links takes forever. Can't keep doing this. I've been using the dev tools for that purpose but it's not even close to the speed achievable by trying things in an IDE.
Environment
Deps:
electron 4.2.10
webpack-cli 3.3.7
webpack-dev-server 3.8.0
webpack 4.39.3
react-hot-loader 4.12.12
react-router-dom 5.0.1,
System:
OS Ubuntu 18.04 LTS
node 10.16.2
npm 6.9.0
yarn 1.7.3
Reproducible Demo
This is the project I'm trying to set it up for https://github.com/nahuelarjonadev/kafka-lens/, but I'm ultimately looking for just a super simple working demo so I can mirror the configurations or at least get a hint on how to do it. I couldn't find one yet.
Use the webpack react electron boilerplate and add on it the react-hot-reloader or whatever else you want to add, i am sure that will probably work, is a good starting point for sure.
https://github.com/electron-react-boilerplate/electron-react-boilerplate
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.