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.
Related
Wanted to create a new react app, and ran both npx create-react-app and init react-app command in my Mac terminal but it's not working.
Tried a couple of times, but sometimes the folder is created with a package.json file only. Then everything stopped downloading. What could be the issue?
Screenshot of the output in the terminal:
According to your screenshot, there is no problem when you initialize your react project.
I think your local network may not be good enough. To create a react app, you need to install many third-party nodes_modules then cause mistakes.
Therefore, you can try to change the npm source, such as taobao（ https://registry.npm.taobao.org ）
npm config set registry xxx
And then use the craete-react-app to initialize the app.
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
after 'npx sb init'
menu list
I installed all of them and what I got is..
file list
I really don't know how/what they are different..
what's the point of 'react, react_prject,webpack_react' ??
As you can see in the Storybook file:
https://github.com/storybookjs/storybook/blob/next/lib/cli/src/project_types.ts
In REACT_PROJECT the react configured as peer dependency as for REACT it's dependency. WEBPACK_REACT contains react & webpack as dependencies.
The difference between them explained well here:
What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file?
From the installation docs:
The command above will make the following changes to your local environment:
📦 Install the required dependencies.
🛠 Setup the necessary scripts to run and build Storybook.
🛠 Add the default Storybook configuration.
📝 Add some boilerplate stories to get you started.
I have executed this command npm run eject and I got several new files appeared in my React project but I don't see these two files, "webpack.config.dev.js" and "webpack.config.prod.js" .
What is wrong in my project?
Nothing is wrong with your project, Its just the way create-react-app works
You wont see webpack.config.dev.js and webpack.config.prod.js because those are not embedded in react-scripts, instead you will find the webpack configuration in config/webpack.config.js
When you run npm run eject
that script will move all the webpack & webpackDevServer configuration from react-scripts to the App Root giving you all the webpack configuration and related files and scripts
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.