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
Related
I want to install typescript and jest in a create-react-app-based app. I feel that since this is such a common installation choice there must be at least one "everything just works" set of configuration steps to follow.
I initially ran npx create-react-app my-project --template typescript. That was great for a while. I wrote several thousand lines of code with that. And then one day I decided I wanted to add some mocks to a spec file with code like this:
import jest from "jest";
jest.mock('./somemodule');
...but the "jest" instance is undefined. So I followed directions in different articles to install further devDependencies. But these seem to conflict with dependencies inside of create-react-app, suggesting that I need to focus on setting up my project correctly the "Create-react-app Way" according to its expectations.
Rather than burden StackOverflow with the details of my build and package management issues, I figure I'll just ask the simpler question - what is the correct way to set up create-react-app+typescript+jest in a way where it doesn't have a bunch of irritating, random problems?
And then after I've followed this advice, if I still have problems, I might ask a second, separate SO question with specific details.
The command below should create a new React project supporting Typescript and Jest without need of further modification.
npx create-react-app my-app --template typescript
Details about the above command can be found here: https://create-react-app.dev/docs/adding-typescript/
The above command will set up a new project. But if, like me, you have an existing create-react-app project with issues like:
the Jest module is undefined or doesn't seem to have expected functions
your npm run start and npm run build fail due to conflicting dependencies
or you just want to get to a "standard" package.json configuration without all the hassle of copying your source into a new project.
...you can use the process below to fix/upgrade your package.json:
Use the same npx create-react-app my-app --template typescript command above to create a separate working ("Good") project with all the right dependencies. This project will just be used as a reference.
Compare the package.json of the Good project to the non-working ("Bad") project, and make sure the Bad package.json has the same modules and version#s as the Good package.json. You probably don't have to delete any modules in the Bad package.json that aren't in the Good package.json.
rm -rf node-modules in the Bad project.
rm package-lock.json in the Bad project.
npm install in the Bad project.
Self-answering for posterity.
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 installed NextJS using both methods npm install next react react-dom and npx create-next-app appname multiple times, but the directories are supposed to look like:
pages, api(_app.js, index.js), public, styles, .next, node_modules
But in MY project they look like:
components, pages (index.js only), static, .next, node_modules
I saw multiple installation procedures but they all give the same project directories (latter) TO ME, and the former directories in their tutorials. I cannot follow any tutorials on nextjs due to this!
I found the answer on this GitHub issue !
npm i -g create-next-app
If it says files already exist, try adding --force to the command above. It worked for me, I don't know how, but it did!
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.
Is it possible to use TypeScript with create-react-app? If so, how would you do it?
You can do it like this:
create-react-app my-app --scripts-version=react-scripts-ts
See https://github.com/wmonk/create-react-app-typescript
No ejecting required for this.
This is the way to go:
# update create-react-app first
npm update -g create-react-app
create-react-app my-app --typescript
Create React App v2.1.0 now supports TypeScript, so you no longer need to eject or use the react-scripts-ts fork;
Or you can add TypeScript to the existing app:
yarn add typescript #types/node #types/react #types/react-dom #types/jest
# or
npm install --save typescript #types/node #types/react #types/react-dom #types/jest
then rename .js files to .tsx files to start using TypeScript.
Note that a tsconfig.json will be created for you when you run the app. You will be able to edit tsconfig.json except for some options.
Credits:
[1] Vincent answer
[2] migrate create react app typescript post
Typescript is available out of the box now, in create-react-app version 2.1!
You can use it now, like this (as shown here):
npx create-react-app#next app-name --scripts-version=2.0.6-next.c662dfb0 --typescript
Here is update about create-react-app --typescript flag
Previously in order to generate new project in typescript with create-react-app we used typescript flag like below
npx create-react-app my-app --typescript
But this typescript flag will be removed in next major release of create-react-app as mentioned in the create-react-app --help
--typescript (this option will be removed in favor of templates in the next major release of create-react-app)
So the new solution will be to use a template as mentioned here
ex:
npx create-react-app my-app --template typescript
I posted a feature request in the github issues for create-react-app and here was the response:
Hi! We're not quite ready to consider TypeScript yet (see #142 for
updates). We have yet to complete our Flow integration (which we will
suggest as first option for type safety).
Additionally, there's really interesting things going on right now.
See babel/babylon#320 and babel/babylon#444. TypeScript may soon be
parsed by Babylon (and compiled by Babel). Microsoft has interest in
seeing this happen, and are working on a WIP themselves, too.
This consideration is probably still a few months out. Sorry!
Though unendorsed by us, there is a fork of CRA which supports
TypeScript. We cannot provide support if it doesn't work for you, but
it should!
Not sure how to square that with levito's response.
Here is the link to the github issue:
https://github.com/facebookincubator/create-react-app/issues/1998#issuecomment-295311100
You can use Facebook's Official Typescript Template for Create React App.
Do
npx create-react-app my-app --template typescript
or
yarn create react-app my-app --template typescript
Also, you can create your app using this starter (https://github.com/vtereshyn/react-typescript-eslint-starter)
It doesn't use create-react-app, so fully customizable and changeable. Because using create-react-app it will be hard to add something in some cases...