I'm trying to set up Enzyme (written by Airbnb) in order to run some UI tests in React. However, no matter what configuration I have (and I've tried several) I keep getting this error. I added a .babelrc file which has the following inside:
{
"presets": ["airbnb"]
}
but it still gives me the same error. The .babelrc file is on the same level as the package.json file. I've searched everywhere online to see what could be causing this, but I'm at a loss. Any ideas?
make sure to install the preset
npm install --save-dev babel-preset-airbnb
Related
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'm trying to get i18n message extracted (defined by react-intl's defineMessages) to work properly in a CRA using TypeScript.
I've got an existing react app bootstrapped by CRA with a couple of hundrets of lines of code. So rewriting the application w/o TypeScript isn't an option.
Here's what i've tried so far:
First Attempt
Following this guide in order to get it to work.
When closely following the guide (although react-intl-cra is deprecated) the language files will generate properly.
However if you create the app using create-react-app react-intl-example --typescript and change the script to
"extract:messages": "react-intl-cra 'src/**/*.{js,jsx,ts,tsx}' -o 'src/i18n/messages/messages.json'"
it will break with a compiler error.
Second Attempt
Since react-intl-cra was refering to a react-app-rewired solution, I've tried adding it alongside customize-cra and babel-plugin-react-intl to a freshly generated CRA (using TS). However no luck there as well and after some short period of research I found that it's officially not supported.
Third attempt:
Adding extract-react-intl-messages to my project and running:
$ npx extract-messages -l=en,ja -o app/translations -d en --flat false 'src/**/!(*.test).tsx'
failed with an error as well.
I ran out of ideas, hence I came here to ask. From what I've seen TypeScript has been well advertised in the last couple of years and I don't think I have to justify that React is still pretty hyped. Moreover I can't imagine, that i18n is an uncommon concern in application development.
However I wasn't able to find any up-to-date guide or anything useful on npmjs.com.
TL;DR;
What I need:
Extract messages from defineMessages from react-intl into json files
Must work in a CRA using --typescript
Should not utilize npm run eject
What I've tried:
react-intl-cra
react-app-rewired + customize-cra + babel-plugin-react-intl
extract-react-intl-messages
It's explained here: https://github.com/akameco/extract-react-intl-messages#typescript
Basically you need to
npm install --save-dev #babel/core #babel/preset-typescript #babel/preset-react
and add
#babel/preset-typescript
to your .babelrc:
{
"presets": [
"#babel/preset-react",
"#babel/preset-typescript"
],
}
Then you can run
npm run extract-messages 'src/**/*.[jt]sx'
I created an app with react-create-app, I just dev it using npm start, that seems to do react-scripts start according to my package.json
Whenever I add a proxy to my package.json, I get this error message :
Invalid Host header
I get the idea, it's a security issue. What I don't get is how to fix it. I read several issues on github and QA here on the subject, the fix is easy enough, but I still don't get where to put it
in the end, I will add a whitelist of hosts. I think I saw it's possible.
but where do I put this config to start :
devServer: {
disableHostCheck: true
}
Another way to disable the host check would be to set the following environment variable: DANGEROUSLY_DISABLE_HOST_CHECK=true
That can be done by e.g. adding that line to .env file in the root of the project. Note that this is not a secure solution and should not be used in production.
You can manage it without changing stuff inside node_modules or by ejecting your project by using an npm package called react-app-rewired.
It basically has an option to override your default hardcoded settings for webpack that are inside a create-react-app boilerplate setup.
You put a config-overrides.js inside your root folder and change the scripts inside your package.json to match react-app-rewired instead of the react-scripts. This way you can override all the webpack config that's hard coded inside a react project by writing it down inside a config-overrides.js file.
The syntax is inside this link. There's also an article about it which can be found here.
I never found out where to put the webpack.config.js. It didn't work in the app root directory where I suppose it should go, it didn't do anything for me, I just ended up modifying where react-scripts invokes webpack-dev-server and then put the disableHostCheck to true directly before invoking.
Basically I changed the following line :
const serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
to :
var serverConfig = createDevServerConfig(
proxyConfig,
urls.lanUrlForConfig
);
serverConfig.disableHostCheck = true;
that's really not good practice (modify the code and disableHostCheck), but now I know I can actually modify settings, I'll just go for a whitelist, may be one day I'll understand why it doesn't care about my webpack.config.js ^^
Install react-app-rewired:
npm install react-app-rewired --save-dev
change package.json script to
"start": "set PORT=80&&react-app-rewired start",
then add a file named .env.development, add this line:
HOST=buzzbuzzenglish.com
then add config-overrides.js file (you can override some webpack settings there but don't have to - still, file have to be created)
finally you type npm start, then browser will open and navigate to buzzbuzzenglish.com and renders normally without the Invalid Host Header error.
I am using the jsx-control-statements node module for React with webpack.
Normally this works great, but when I copied my project to another folder and ran npm install using the same package.json as before, jsx-control-statements doesnt seem to be getting recognized by webpack.
jsx-control-statements is meant to desugar the tags in the render() and turn it into code react recognizes. Its not doing that in this case.
I see the final code running in the inspector that 'Choose' was never transpiled into valid code.
_react2.default.createElement(Choose, null,
The error I am getting is:
Uncaught ReferenceError: Choose is not defined
webpack.config.js and package.json and my source code for the app are unchanged. from a working app and this new one in another folder.
I have tried:
installing jsx-control-statements manually locally and globally.
copying and pasting the entire node_modules folder from the good project into this new project.
Run eslint with eslint-jsx-control-statements plugin, no errors
Still the problem persists. I believe their is a problem in the building of project, but I am out of ideas what to try next.
The issue was simple as I felt it would be. I was missing a tiny .babelrc file which included a plugin reference to jsx-control-statements
{
// my babel config here
"plugins": ["jsx-control-statements"]
}
Just need to put this file at my root next to webapck.config.js
I use facebook's create-react-app, which intentionally hide all the configuration setup, and leave us with a lovely simple file structure
That's great! but there's one really annoying thing that come up:
SublimeLinter is no longer works
because the .eslintrc configuration file is not longer at the root of the project.
Key points
I know I can put another .eslintrc file at the root,
but I would like to be able to set my rules in one place
I know it is possible to npm eject to get the entire project structure out in front, but I would like to keep things simple. otherwise it becomes just another boilerplate
I noticed that in the package.json
What I already tried?
a direction I thought about is to change:
"eslintConfig": {
"extends": "./node_modules/react-scripts/config/eslint.js"
}
to:
"eslintConfig": {
"extends": "./.eslintrc.js"
}
but it seems to require all the eslint-plugins (which are magically hidden from node_modules) so I'm not sure it's the right way.
Any insights?
SublimeLinter is no longer works because the .eslintrc configuration file is not longer at the root of the project.
This is not correct.
SublimeLinter will work just fine but you currently have to install a few things globally. The generated project’s README includes the instructions to get linter IDE integration working:
Finally, you will need to install some packages globally:
npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype
We recognize that this is suboptimal, but it is currently required due to the way we hide the ESLint dependency. The ESLint team is already working on a solution to this so this may become unnecessary in a couple of months.
This is, of course, assuming that you’re fine with the ESLint configuration we picked for you.