I am currently developing a component in reactjs and I ran into a parsing error in which the keyword const, let and var are not being recognizes. Any insight to fixing this problem ?
I've tried installing es6 package to the react project.
Failed to compile.
./src/components/Calendar.js
Line 12: Parsing error: Unexpected keyword 'const'
10 |
11 | state={
> 12 | const localizer = BigCalendar.momentLocalizer(moment)
| ^
13 | }
14 |
15 |
I expect to use the variable with no parsing error.
localizer is a key not a value. you can make it's value a const outside of the component's state and use that inside the state, but you can't declare a variable inside an object like that. You could do this...
const localizer = BigCalendar.momentLocalizer(moment);
state = {
localizer: localizer
};
Related
IMAGE OF THE ERROR
Android Bundling failed 5334ms
Unable to resolve module ../model/weights.bin from
D:\Repos\BANANAFILE\helpers\tensor-helper.js:
None of these files exist:
model\weights.bin(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
model\weights.bin\index(.native|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json)
10 |
11 | const modelJson = require('../model/model.json');
12 | const modelWeights = require('../model/weights.bin');
React-native uses es6 imports so do this instead
import modelJson from "../model/model.json"
import modelWeights from "../model/weights.bin"
I am using Jest and react-native-testing-library to test my components.
In one of my components I have the following code:
const handleToggleFilters = () => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
setPostFiltersActive(!postFiltersActive);
};
However, when testing my component, I get the following error
TypeError: require(...).configureNextLayoutAnimation is not a function
82 |
83 | const handleToggleFilters = () => {
> 84 | LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
| ^
85 | setPostFiltersActive(!postFiltersActive);
86 | };
87 |
I added jest.mock('react-native') to my setup.js file but it then started complaining about other missing entities through the rest of my test suite ... do I have to mock the entire react-native library for this to work?
What is the best way around this?
After looking at certain tests from react-native on github, it looked like they simple mocked the file themselves.
// Libraries/Components/Keyboard/__tests__/Keyboard-test.js
jest.mock('../../../LayoutAnimation/LayoutAnimation');
So in my setup.js file I simply did
jest.mock(
'../node_modules/react-native/Libraries/LayoutAnimation/LayoutAnimation.js',
);
And my tests passed.
I've recently updated my Javascript project from Webpack to react-scripts.
My code structure is fairly simple. I have a src folder with an index.js that just renders the DOM like this:
import ReactDOM from 'react-dom';
import Index from './pages/index';
ReactDOM.render(<Index />, document.querySelector('#root'));
and my Index which is just a single page that renders some stuff like this:
/**
* Injected styles for this component
*/
const styles = theme => ({
...
})
class Index extends Component {
...
}
export default withRoot(withStyles(styles)(Index));
in my package.json I use react-scripts to start the app.
When running npm run start the dev-webserver starts.
I can change a single letter, save the file, the dev-webserver restarts, and then I get random syntax errors throughout the code. They look like this:
./src/pages/index.js
Syntax error: Unexpected keyword 'return' (144:7)
142 |
143 | if(!this.state.data){
> 144 | return null;
| ^
145 | }
146 |
147 | return <Grid>
or this
./src/pages/index.js
Syntax error: Unexpected token (76:11)
74 | */
75 | render() {
> 76 | const { classes } = this.props;
| ^
77 |
78 | return (
79 | <div className={classes.root}>
or on any other part of the project. They keep happening until I restart npm.
I've tried to delete code until it doesn't happen anymore. Then I end up with a single React.Component that only renders a div with text.
I've tried to work on another project; the same issue happens there.
The project works fine on other devices.
Things I've tried:
delete node_modules folder
downgrade dependencies
delete project and clone again
use different browser
restart pc
change back to webpack
try to search online for the error
My node version is:
v6.9.1
My npm version is:
v6.8.0
Turns out my node version is very old (2016).
I updated node to the newest version and it stopped happening.
I'm trying to run my first testcafe test but it's proving arduous.
testcafe -e chrome client/routes/Lookup/components/testcafe/lookup-test.js
SyntaxError: client/routes/Lookup/components/Lookup.js: Unexpected token (60:8)
58 | if (error.status && error.status !== 404) {
59 | return (
> 60 | <NetworkIssues code={error.status} />
| ^
61 | );
62 | }
63 |
at Object.<anonymous> (client/routes/Lookup/components/testcafe/lookup-test.js:1:1)
lookup-test.js
import Lookup from '../Lookup';
import React from 'react';
import { waitForReact } from 'testcafe-react-selectors';
fixture('Lookup Component').page('http://localhost:3000/web/lookup').beforeEach(async () => {
await waitForReact();
});
test('foo', async (x) => {
await x
.typeText('customerName', '07450118811')
.expect('customerName.value').contains('07450118811');
});
My code doesn't have any errors. It compiles and works fine and passes all my jest and enzyme unit testing. But I can't find any guidance online for this. As you can see the ignore errors flag is used to no avail.
Cheers.
When you start TestCafe, all your test code is transpiled as a first step before execution. What is executed is the result of this transpilation process and not your original source code, even if your code is pure JavaScript.
The imported file client/routes/Lookup/components/Lookup.js is a JSX file, and since it is imported in the TestCafe code, il will be first transpiled to javascript before starting test execution.
The TestCafe transpilation process (at the time of writing - it may change in the future) is not configured to handle JSX files.
Therefore, you cannot import files that cannot be transpiled into pure JS by TestCafe.
try commenting this out
//import Lookup from '../Lookup'
TestCafe can't handle JSX outside of class components. If you are using react, and create a function that returns JSX, testCafe will throw up on it. You can resolve it by just creating a new class component instead. see TestCafé + React JSX error (unexpected Token) for more details.
React program works fine on jscomplete.com/repl but the same code gives me the following error when I run in my browser, writing my code in my editor and using babel.
babel-browser.min.js:41 Uncaught SyntaxError: http://localhost/react1/app.jsx: Unexpected token (2:14)
1 | class Button extends React.Component{
> 2 | handleClick = () => {
| ^
3 | this.props.onClickFunction(this.props.incrementValue);
4 | }
5 | render() {
The handleClick function in that code is defined as a class instance field which is not yet part of JS (currently at stage 2)
To make it work, you have to configure Babel with one plugin that includes it (for example, babel-preset-stage-2, or directly babel-plugin-transform-class-properties).
Alternatively, use a normal function definition in the class and bind it to this inside the constructor of the component.