My React project (made with create-react-app) was ejected before I started the project. I included an SCSS loader in the webpack file.
Now, when I try to run 'npm run build', the following error gets shown:
Invalid CSS after "i": expected 1 selector or at-rule, was "import React from '"
I don't know where exactly I had gone wrong, but it might have been something with css-loader.
I created a fresh project (didn't eject the project this time), installed node-sass-chokidar [guide for using sass/scss in your React project], copied my src folder into the new project, installed all the other dependencies, and finally changed the import statements from '.scss' to '.css'.
This worked.
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
When I run
react-scripts build
I get the following message :
The following changes are being made to your tsconfig.json file:
- compilerOptions.jsx must be react-jsx (to support the new JSX transform in React 17)
However I do not have React 17. It is not installed, or in my package.json file.
The only thing I did was upgrade to React 17 a few days ago to play around with it, but then I reverted. Everything is back to 16.
Why does react-scripts think it should update my JSX?
I just realised what the problem was.
I had a package.json file one level up from my actual project. It was there by accident. Inside the "parent" package.json I had React 17 defined.
package.json
|
|----- package.json
It seems like npm or CRA is behaving like Maven and trying to recursivley process build scripts up the folder tree.
I have sample installation of react-app and I got the following
Error: Failed to load parser '#typescript-eslint/parser' declared in '.eslintrc » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
after running
npm run lint -> eslint .
I don't use typescript in this project.
I tried to install it from scratch and got it again.
also tried to remove tslint from vscode plugin
You can add this to your .eslintignore file in the root of your project.
node_modules
create-react-app team will release a new version with that fix also
https://github.com/facebook/create-react-app/pull/8376
I had the same issue when trying to create a new react app today.
You can try the following steps:
Make sure you update your nodejs to the latest version
Make sure your folder path is short and does not contain spaces
Run: npm install -g create-react-app
Run: npm i --save-dev typescript #typescript-eslint/parser
Run: create-react-app my-app
Create React App adds eslint config to package.json, so you just have to add eslintIgnore with node_modules in package.json. A cleaner alternative to creating a separate file .eslintignore
// package.json
// ...
"eslintConfig": {
"extends": "react-app"
},
"eslintIgnore": [
"node_modules",
"build/*"
],
Most likely, you have this in your .eslintrc:
extends: react-app
It means the following rule is applied:
files: ['**/*.ts?(x)'],
parser: '#typescript-eslint/parser',
Which probably means you have *.ts/*.tsx files in your root folder. But maybe it's the vscode-eslint. Did you try to run yarn lint from the terminal?
Your error message says eslint is looking for typescript because of a setting in the file .eslintrc so try looking in that file for #typescript-eslint/parser and remove it.
I was removing typescript from a project and I got the same error because I had forgotten a typescript definition somewhere under the src folder... deleting the file fixed the issue.
In my case, I wanted typescript, but didn't get it installed.
This question still helped me figure out my problem which is described below.
I was watching a YouTube video, React Typescript Tutorial that explained how to get started with typescript and react, and the video said to run:
npx create-react-app cra-ts --typescript
This didn't work (but I didn't know it). As soon as I created a hello.ts file, I got the error the OP describes.
Error: Failed to load parser '#typescript-eslint/parser' declared in 'package.json » eslint-config-react-app#overrides[0]': Cannot find module 'typescript'
The fix was to use the command:
npx create-react-app myappts --template typescript
This used create-react-app#4.0.0 and react-scripts#4.0.0.
ProTip: If your newly created React App doesn't have a file named App.tsx, then you haven't actually created it correctly.
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
I'm coding an app with Electron, React (jsx) with Babel. I switched to TypeScript this evening and I can't figure out how to make everything work. Npm packets set up either React or TypeScript, but not both, and not with Electron. (I also have to implement webpack.)
My question is: what is the minimal structure of folders, files and packets to make everything work? I just want to display a hello world on the main window using a React component written in TypeScript.
Currently, my packets are Electron, React, ReactDOM, TypeScript.
First of all i followed this tutorial on the official Website of Typescript: https://www.typescriptlang.org/docs/handbook/react-&-webpack.html
If you follow every step you will end up with a dist folder that contains a bundle.js (with the bundled code that Webpack receives from Typescript) and a src folder that containes the .tsx files. Typescript supports React out of the box, just add "jsx": "react" to the tsconfig.json and renane your file .tsx instead of .ts. After that add index.js to the root folder(copied from here: https://github.com/electron/electron-quick-start/blob/master/main.js).
Install electron locally npm install electron --save-dev or globally npm install -g electron
Run webpack with webpack while in the app folder (to generate the ./dist/bundle.js file)
Run electron with electron . while in the app folder
The important thing to notice is the entry point of webpack: its ./src/index.tsx while electron entry point is ./index.js. Electron load index.js that loads index.html that loads ./dist/bundle.js. We can transtale index.js to index.ts but then we would have to change the entry point of webpack.
I made a boiler plate starter pack which contains many bug fixes that are found when using react with electron and typescript and has auto monitoring of typescript changes to reload the electron app for faster development.
https://github.com/nateshmbhat/electron-react-ts-starter/
It works with create-react-app without need for ejecting anything.