I am using Typescript 1.7 and React 0.14 with the new ES6 systax and I’m having the following destructuring assignment, as explained here as well.
let x0, x1, y0, y1;
if(this.props.viewport) {
{x0, x1, y0, y1} = this.props.viewport;
}
However, I’m getting the Declaration or statement expected error. What am I doing wrong?
Thanks
S M
3,0955 gold badges29 silver badges59 bronze badges
asked Feb 23, 2016 at 11:26
4
So, I found the problem. Had to wrap the whole line in parenthesis. So the following is correct.
let x0, x1, y0, y1;
if(this.props.viewport) {
({x0, x1, y0, y1} = this.props.viewport);
}
answered Feb 23, 2016 at 11:32
XeniaSisXeniaSis
2,1625 gold badges22 silver badges39 bronze badges
3
I had this problem because I was trying to use case as a variable name e.g. var case = .... Now I know this error was because case is already used by JavaScript’s Switch Statement.
answered Jul 26, 2018 at 20:34
WormWorm
1,3032 gold badges11 silver badges28 bronze badges
1
If you create the variables and assign to them the values in the same line, you can do it like so:
let person = {name: "Alex", age: 23, favoriteColor: "orange"}
let {name, age} = person
document.write(name + " is " + age + " years old")In case you first declare the variables and then on another line you assign the values, the approach is different, it needs the parenthesis to be parsed correctly. Like so:
let person = {name: "Alex", age: 23, favoriteColor: "orange"}
let name, age;
({name, age} = person)
document.write(name + " is " + age + " years old")In case you want to assign values to a property from an object or a getter inside a class, it is a little bit tricky, it would look like so:
({name: this.name, age: this.age} = this.person)
answered Mar 14 at 8:46
GassGass
6,9492 gold badges34 silver badges38 bronze badges
- HowTo
- TypeScript Howtos
- Declaration or Statement Expected Error …
Muhammad Ibrahim Alvi
Apr 04, 2022
This tutorial explains the Declaration or statement expected error in JavaScript or TypeScript and why the compiler throws this error. All the major reasons for this error will be discussed, and how it can be avoided among the developer’s community.
Declaration or statement expected Error in JavaScript or TypeScript
The Declaration or statement expected error in JavaScript or TypeScript occurs when we have a syntax error in the code.
For instance, consider the destructuring of an object in the file with the wrong syntax, exporting a module in the file with the wrong name, or having a missing or inconsistent bracket.
Consider the following example of a code where a different Declaration or statement expected occurs due to the syntax error inside the code.
let oneData: number;
const obj = {
val: 1,
};
// 1. ⛔️ Parsing error: Declaration or statement expected.
{ oneData } = obj; // 👈️ this must be wrapped in parenthesis
const sumObj = (a: number, b: number) => a + b;
// 2. ⛔️ Error: Parsing error: Declaration or statement expected.eslint
export sumObj // 👈️ should be export {sum}
// 3. Make sure you're not using reserved words
const caseVal = 'hello world' // 👈️ case is reserved word
The above code produces the following errors, which are written below.
//output or errors
Variable 'one' is used before being assigned.
Declaration or statement expected. This '=' follows a block of statements, so if you intend to write a destructuring assignment, you might need to wrap the whole assignment in parentheses.
Declaration or statement expected.
'case' is not allowed as a variable declaration name.
Variable declaration expected.
Variable declaration expected.
Consider the following code, compiled correctly with no Declaration or statement expected errors.
let val: number;
const obj = {
val: 1,
};
// ✅ OK
({ val } = obj); // 👈️ this must be wrapped in parenthesis
console.log(val); // 👉️ 1
The above code produces the following output.
Declaration or statement expected error also arises sometimes when exporting something that has been declared previously. Whenever this needed to be done, wrap the export in curly braces.
const objSum = (a: number, b: number) => a + b;
// ✅ OK
export { objSum };
Ibrahim is a Full Stack developer working as a Software Engineer in a reputable international organization. He has work experience in technologies stack like MERN and Spring Boot. He is an enthusiastic JavaScript lover who loves to provide and share research-based solutions to problems. He loves problem-solving and loves to write solutions of those problems with implemented solutions.
index.tsx(11,1): error TS1128: Declaration or statement expected.
If you write a Typescript app, you can get the following error:
For example, the following code triggers this:
namespace app {
interface IMessage {
id: string
}
class TestApp extends React.Component {
public render() {
}
}
}
}
In this case this is caused by having an extra closing bracket.
An easy way to fix this style of problem is to use a better text editor, like Visual Studio code, and install ESLint, which will warn you if you screw up in this fashion.
If you’re a beginner in programming, you’ve probably encountered the «Expected declaration or statement at end of input» error at some point. This error can be frustrating, especially when you’re not sure what it means or how to fix it.
In this guide, we’ll explain what this error means and provide you with a step-by-step solution on how to fix it. We’ll also include some frequently asked questions about this error to help you better understand it.
The «Expected declaration or statement at end of input» error is a syntax error that occurs when the compiler or interpreter encounters a missing or incorrect statement or declaration at the end of a code block. This error usually occurs when you forget to close a bracket, a parenthesis, or a quotation mark.
Here’s an example of how this error might look like:
function myFunction() {
console.log("Hello, world!");
}
myFunction(
In this example, we forgot to close the parenthesis at the end of the myFunction() call, which results in the «Expected declaration or statement at end of input» error.
How to Fix «Expected Declaration or Statement at End of Input» Error
To fix this error, you need to identify the missing or incorrect statement or declaration and add or correct it. Here are the steps to follow:
Check the line number indicated in the error message. This will give you a clue as to where the error occurred in your code.
Go to the line number indicated in the error message and check for any missing or incorrect statements or declarations.
If you find a missing or incorrect statement or declaration, add or correct it. For example, if you forgot to close a parenthesis, add it at the end of the statement.
- Save your changes and run your code again to see if the error has been fixed.
Here’s an example of how to fix the error in our previous example:
function myFunction() {
console.log("Hello, world!");
}
myFunction();
In this example, we added the missing parenthesis at the end of the myFunction() call, which fixes the error.
FAQ
What other syntax errors can I encounter in programming?
In addition to the «Expected declaration or statement at end of input» error, you can encounter other syntax errors such as «Unexpected token», «Missing semicolon», «Undefined variable», and «Uncaught TypeError», among others.
How can I prevent syntax errors in my code?
You can prevent syntax errors in your code by following best practices such as indenting your code, using meaningful variable names, commenting your code, and testing your code as you write it.
Can I use an online compiler to catch syntax errors?
Yes, you can use an online compiler or interpreter to catch syntax errors in your code. Most online compilers highlight syntax errors and provide error messages that can help you fix the errors.
What is the difference between a compiler and an interpreter?
A compiler is a program that translates source code into machine code that can be executed directly by the computer. An interpreter, on the other hand, reads and executes source code line by line without translating it into machine code.
How can I improve my programming skills?
You can improve your programming skills by practicing regularly, reading programming books and articles, joining online programming communities, and working on programming projects.
- JavaScript Syntax Errors: Expected Declaration or Statement at End of Input
- Common JavaScript Syntax Errors
- 10 Common Syntax Errors in JavaScript
Export from syntax is somehow stale right now (still in stage 1): https://github.com/tc39/proposal-export-default-from. This syntax is not encouraged.
To make it work:
Replace in index.js:
export User, {schema} from './model'
with
import { schema } from './model'
Replace in controller.js
import { User } from '.'
with
import User from './model'
If I may suggest, Babel is a bit unnecessary in this project. You can simple replace it with esm package or just use Node 13 with native ESM support.