My react app was created with create-react-app and I added And Design following:
https://ant.design/docs/react/use-with-create-react-app
I even customized some less vars using:
https://ant.design/docs/react/use-with-create-react-app#Customize-Theme
Now, I ejected my app but everything stopped working.
EDIT1:
The first error is that after ejecting, the scripts configured in package.json no longer works, as described here:
https://github.com/ant-design/create-react-app-antd/issues/10
What are the steps to configure antd after ejecting create-react-app?
Thanks
You just need to run npm i react-scripts.
This will install the missing dependency you need to make this work.
Related
I installed tailwindcss inside of my Next.js application. This was the error message that I received
error - ./node_modules/next/dist/client/dev/amp-dev.js
Error: Cannot find module 'xwind/babel'
This is how I installed the Next.js application:
npx create-next-app -e with-tailwindcss ./
These are the dependencies I installed:
npm install graphql graphql-request html-react-parser moment react-multi-carousel sass
Happened to me as well just few minutes ago. Not sure if that is the same case for you. It created for me components folder, .babelrc file and js files in pages folder. Not sure if that is your case, but that's what happened to me. In case just follow with solution below.
Solution
Remove .bablerc file and components folder along with js files in pages folder.
More details
This is strange because if you look at the repository of Next.js example with-tailwindcss. It doesn't have those. Not sure how that happened. We can elaborate more in the comments.
Also plugin for babel xwind/babel does have dependency check to allow only tailwindcss version <2. There is an issue for that. In my opinion this repo is unmaintained and will either get forked and replaced as a main for npm package or something similar.
The create-next-app is installing with-tailwind-emotion template instead of with-tailwind for some reason.
For now, a good way is to create a normal typescript template with create-next-app and add tailwind manually.
So your steps would be:
Step 1:
without typescript:
npx create-next-app ./
or with typescript:
npx create-next-app --ts ./
Step 2:
Docs to install tailwind with next.js:
https://tailwindcss.com/docs/guides/nextjs
I created my app with create-react-app.
Then installed styled-components. After that I wanted my classnames to be readable, and for that I had to do npm run eject and add babel configuration according to this instruction..
After that I did npm start and everything works, but in each component file on the first line I see following error: image here. But my app still works. No errors in the console.
How and where should I specify these env variables?
Thanks.
I installed eslint in my react project to fix all the eslint errors. I fixed all the errors, however, I can't npm start the project. When I do that, I get this error, and some steps to uninstall all the eslint dependencies. I want to run the project with eslint dependencies.
Please let me know how to do this?
Error Message:
There might be a problem with the project dependency tree. It is
likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"eslint": "^7.11.0"
Don't try to install it manually: your package manager does it
automatically. However, a different version of eslint was detected
higher up in the tree:
My guess would be that you installed eslint#v8 and since create-react-app doesn't support it yet (reference) it causes this error.
Downgrading to eslint v7 should fix it.
Create react app already comes bundled with eslint and by installing it in the project dependencies, you are in effect try to load in conflicting versions, you shouldn't need eslint inside of your own package.json.
HOWEVER
If you want to override eslint and start customising your react install you are more than welcome to eject (npm run eject), but bear in mind that ejecting your application will mean you will need to maintain dependencies going forwards.
You can read more about ejecting here - https://create-react-app.dev/docs/available-scripts/
I'm building a UI lib for my organization, I'm using react with material-ui as a peer dependency in the package.json of the lib. I wanted to add storybook to have a playground for the components I'm building but the problem is: My lib is built upon Material-ui, which as I said above, is a peer dependecy and Storybook doesn't find material-ui because it's a peer dependency of the projetct.
How should I deal with that?
It makes sense Storybook is not finding material-ui because it is supposed to be installed in the host project that is going to use my ui-lib. Installing material as a dependency is not the case since it would break whoever implements the lib. I tried to see something about the Lerna project, but I'm not very familiar with that.
I'm open to hear any ideas :)
I managed to find a workaround to this issue and wanted to share with the community. It's pretty silly but it works perfectly for my case.
I added #material-ui both as dev dependency and peer dependency to my package.json and removed it from dev dependecies on my Docker file when I added it to the aws pipeline. So on while coding we have #material-ui but on prod environment it is not there.
That solved it for me :)
I could also just do "npm uninstall #material-ui" before "npm publish"
I recently migrated a create-react-app to typescript. After migration my scss files are being ignored in the .tsx components. I'm importing the files like so:
import './styles/scss/style.scss';
this was working fine in js. I've already installed node-sass and even tried installing #types/node-sass. I'd like to do this without ejecting. Would appreciate any help.
According with this documentation https://facebook.github.io/create-react-app/docs/adding-a-sass-stylesheet#docsNav
If you use react-scripts#2.0.0 or higher just
npm install node-sass
restart and enjoy.