I'm working on a ReactJs project, I am writing code with ES7 in order to write more elegant code inside my React component, specifically static propTypes.
I use Gulp with Babel, ESlint, but I cannot fix a compilation error related to my static propTypes
This is the error message I get
[11:12:34] ESLintError in plugin 'gulp-eslint'
Message:
Parsing error: Unexpected token =
Details:
fileName: [MYFOLDER]/client/components/app/article/asset/index.js
lineNumber: 5
[11:12:36]
[MYFOLDER]/client/components/app/article/asset/index.js
5:19 error Parsing error: Unexpected token =
and it is referred to the line static propTypes = {
import React from 'react';
export default class Asset extends React.Component {
static propTypes = {
articleImageUrl: React.PropTypes.string.isRequired,
};
static defaultProps = {
articleImageUrl: 'https://placeholdit.imgix.net/~text?txtsize=60&txt=640%C3%97480&w=640&h=480'
};
constructor(props) {
super(props);
}
render() {
return (
<div className="article__asset">
<figure>
<img src={this.props.articleImageUrl} />
</figure>
</div>
);
}
}
This is my babel configuration
return browserify({
debug: true,
entries: [`${NPM_DIR}/es5-shim/es5-shim.js`, CLIENT_DIR + '/index.js']
})
.transform(babelify.configure({
sourceMapRelative: CLIENT_DIR,
presets: ['react', 'es2015', 'stage-0'],
plugins: ["transform-object-rest-spread", "transform-decorators-legacy", "transform-class-properties"]
}))
.bundle()
.on('error', function(e){
gutil.log(e);
})
.pipe(source('bundle.js'))
.pipe(rename('bundle.min.js'))
.pipe(gulp.dest(PUBLIC_DIR));
This is my eslint configuration
{
"plugins": [
"react"
],
"extends": ["eslint:recommended", "plugin:react/recommended"],
"ecmaVersion": 7,
"rules": {
// rules
},
"parserOptions": {
"sourceType": "module",
"ecmaFeatures": {
"jsx": true,
"blockBindings": true
}
}
}
What am I doing wrong? Thanks a lot
Use the babel-eslint parser in your ESLint configuration.
npm install babel-eslint --save
{
"parser": "babel-eslint",
"plugins": ["react"],
...
}
Related
in react 17 is not necessarily use
import React from 'react';
but if i don't have it, so eslint gave me error
'React' must be in scope when using JSX react/react-in-jsx-scope
any idea how modify .eslintrc.js
module.exports = {
parser: "babel-eslint",
env: {
browser: true,
node: true,
es6: true,
jest: true,
},
extends: [
"eslint:recommended",
"plugin:react/recommended",
"plugin:jsx-a11y/recommended"
],
plugins: [
"react",
"react-hooks",
"jsx-a11y",
],
rules: {
strict: 0,
"react-hooks/rules-of-hooks": "error",
"react-hooks/exhaustive-deps": "warn"
},
settings: {
react: {
version: "detect"
}
}
}
for react 17?
Thank's a lot
You can read about it in React docs.
If you are using eslint-plugin-react, the react/jsx-uses-react and react/react-in-jsx-scope rules are no longer necessary and can be turned off or removed.
{
// ...
"rules": {
// ...
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off"
}
}
react-in-jsx-scope on github.
To make it work, you should add those rules to your eslint config, see Extending or replacing the default ESLint config for Create-React-App specifics, every framework should have related section in their docs.
You need to add plugin:react/jsx-runtime to extends in the .eslintrc.js file.
like is:
module.exports = {
extends: [
'plugin:react/recommended',
'airbnb',
'plugin:react/jsx-runtime',
]
}
Refer here
I'm having issues with jest on typescript.
//myprovider.tsx
class MyProvider{
constructor(){}
giveMeFive(): int{ return 5; }
}
export { MyProvider }
// myprovider.test.js
import { MyProvider } from './myprovider';
test('give me five!', () => {
const myprovider = new MyProvider();
/// assert
})
I get the following error
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
import { MyProvider } from './myprovider';
^
I'm not sure what I'm missing, I have this on my package
//package.json
"jest": {
"transform": {
".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
},
"testRegex": "(/tests/.*|\\.(test|spec))\\.(ts|tsx|js)$",
"moduleFileExtensions": ["ts", "tsx", "js"]
},
// .babelrc
{
"presets": [
"#babel/preset-typescript"
]
}
//jest.config.js
module.exports = {
preset: 'ts-jest',
transform: {
'^.+\\.tsx?$': 'babel-jest',
},
}
Make sure to install these packages:
babel-jest #babel/core #babel/preset-env
Your babel config should look like this:
presets: [
[
"#babel/preset-env",
{
targets: {
node: "current",
},
},
],
"#babel/preset-typescript",
]
I have really simple exaple in react
export default class App extends Component{
state={
count:0
}
I have a ESLint error under state={....:
Parsing error: Unexpected token = eslint
I don't know why... do I have to install ESLint-react plugin?
this my eslintrc.js:
module.exports = {
env: {
browser: true,
es6: true
},
extends: [
'standard'
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly'
},
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 2018,
sourceType: 'module'
},
plugins: [
'react'
],
rules: {
}
}
Am getting the below error in my main.js file when using ESLint and babel
main.js
const mountNode = document.getElementById('app');
function HelloMessage(props) {
return <div>Hello {props.name}</div>;
}
render(<HelloMessage name="test" />, mountNode);
Error is
Unexpected token (12:10) while parsing file: c:\Dev\...\src\main.js
which points to the line
return <div>Hello {props.name}</div>;
I have enabled ES6 and JSX in ESLint config
"parser": "babel-eslint",
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},
Also, .babelrc has the presets defined
{
"presets": ["es2015"]
}
what am I missing here?
Thanks
The error finally went away by adding the below to my .babelrc
{
"presets": ["react", "es2015"],
"env": {
"development": {
}
},
"plugins": [
"transform-export-extensions"
]
}
Ofcourse this required the following npm packages to be installed
npm i --save-dev babel-preset-react babel-plugin-transform-export-extensions
Thanks
Trying to build a Typescript project using ts-loader for webpack within gulp. Getting the following error:
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ./app/react/helloDirective.tsx
Module parse failed: C:...\app\react\helloDirective.tsx Unexpected token (1:13)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:13)
at Parser.pp.raise (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:923:13)
at Parser.pp.unexpected (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1490:8)
at Parser.pp.expectContextual (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1449:39)
at Parser.pp.parseImport (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:2254:10)
at Parser.pp.parseStatement (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1762:60)
at Parser.pp.parseTopLevel (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1666:21)
at Parser.parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:1632:17)
at Object.parse (C:...\node_modules\webpack\node_modules\acorn\dist\acorn.js:885:44)
at Parser.parse (C:...\node_modules\webpack\lib\Parser.js:902:15)
at DependenciesBlock. (C:...\node_modules\webpack\lib\NormalModule.js:104:16)
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": false,
"removeComments": false,
"jsx": "react",
"target": "ES5",
"moduleResolution": "classic",
"experimentalDecorators": true,
"allowJs": true
},
"exclude": ["node_modules", "typedefinitions"]
}
gulpfile.js
gulp.task('compileReactApp', function(){
return gulp.src(["app/react/helloDirective.tsx"])
.pipe(webpack({
debug: true,
output: {
filename: "reactapp.js"
},
resolve: {
extensions: ['', '.tsx', '.ts', '.js']
},
module: {
loaders: [
{ test: /\.(tsx|ts|js)$/, loaders: ['ts-loader'], include:["app"], exclude: ["node_modules"]}
]
}})
).pipe(gulp.dest("./generated/"));
});
helloDirective.tsx
import React = require('react');
import ReactDOM = require('react-dom');
import Hello = require("./hello.react");
App.Common.commonModule.directive("ReactHello", () => {
return {
link(scope: any, element: any): void {
ReactDOM.render(<Hello/>, element);
element.on('$destroy', () => {
});
}
}
});
hello.react.tsx
"use strict";
import React = require("react");
class Hello extends React.Component<any, any> {
render() {
return <div>
<span>Hello World!</span>
</div>;
}
}
export = Hello;
I think ts-loader only transforms for typescript. To transform es6 and jsx syntax you will need to add babel-loader to your webpack config.
awesome-typescript-loader supports the allowJs option. ts-loader has plans to support it in the future.