Commonly Mistaken Export Statements

ES6 Modules are the official JavaScript module solution. With the popularity of Babel, TypeScript, and SPAs, this technology is very familiar, but sometimes we still make mistakes. Reflecting on the errors, I think the understanding is not thorough enough, so I’m marking it down here.

The image shows the syntax error that sometimes occurs.

• First, this error is reported by the TS compiler and is a compilation error, different from a Lint error. A Lint error will tell the specific rule violated, while a compilation error will be ts(code), which needs to be distinguished.

• The code-1128 in the error is unrelated to the program file we wrote; it’s internal to the compiler. Looking at the TypeScript source code, I indeed found the relevant statement. Therefore, if you encounter a TS compilation error that you don’t understand, you can use this code to assist in searching for related problems.

Declaration_or_statement_expected: diag(1128, ts.DiagnosticCategory.Error, "Declaration_or_statement_expected_1128", "Declaration or statement expected."),


    function diag(code, category, key, message, reportsUnnecessary, elidedInCompatabilityPyramid, reportsDeprecated) {
          return { code: code, category: category, key: key, message: message, reportsUnnecessary: reportsUnnecessary, elidedInCompatabilityPyramid: elidedInCompatabilityPyramid, reportsDeprecated: reportsDeprecated };
      }

Back to the specific error, why is writing it like the above wrong? Because the rules are as follows; let’s check MDN again.

The official export syntax is:

// Export single feature
export let name1, name2, …, nameN; // also var, const
export let name1 = …, name2 = …, …, nameN; // also var, const
export function FunctionName(){...}
export class ClassName {...}

// Export list
export { name1, name2, …, nameN };

// Export previously defined feature as default
export { myFunction as default };

// Export single feature as default
export default function () { ... }
export default class { .. }

Notes:

• When exporting a single object, you need a declaration statement such as let, var, const, function, class, etc., while exporting multiple uses curly braces.

• Default exports cannot directly export let, var, or const declarations; the following will cause an error:

export default let m= {}

Final Thoughts

Familiarize yourself with basic specifications to program efficiently.