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
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 created a React component and uploaded it to a private git repo. It's a fairly simple component that renders a data table that can be sorted etc. I used nwb to for the setup / build process (https://github.com/insin/nwb).
It's not published on npm, so when I want to use it on a project I install via something like npm install --save git+ssh://git#github.com/Me/myRepo.git. This all works fine in normal React projects.
Unfortunately on a NextJS site I'm working on, NextJS won't compile, and is giving the error CSS Modules cannot be imported from within node_modules and linking me to https://nextjs.org/docs/messages/css-modules-npm
That page suggests that I might be accidentally using the package's source files - but I'm not. When I look in my /node_modules/myComponent/ folder, there's a /lib/ folder that has the compiled source. However, the styles are still in separate files and are included into the compiled source just like you might normally do (var _defaultModule = _interopRequireDefault(require("./styles/default.module.scss"));).
I did some searching online and it seems like the "quick and easy" solution is to use https://github.com/martpie/next-transpile-modules.
I'd prefer to solve this by fixing my repo though, so that when I install it on a project (whether NextJS or whatever) I get whatever it is that NextJS wants.
So my various questions are:
Is there a way to set up my repo so NextJS is happy with it?
Is nwb not the preferred way to make a React component? Should I have used some other process? I'm not having this problem with any other component, so it seems like this is something I did wrong with my repo.
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'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.