Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

unexpected token import/export - typescript

I'm trying out typescript for the first time and am confused about the import/export procedures that I am used to using with es6.

this is an interface I am trying to export in a file called transformedRowInterface.ts:

export interface TransformedRow  {
  id: number;
  title: string;
  summary: string;
  body: string;
  synopsis: string;
  author: object;
  impressions: number;
  created: number;
  updated: number;
}

and this is my attempt to import, in a file called newsArticleModel.ts:

const appRoot = require("app-root-path");

import { TransformedRow } from "./transformedRowInterface";
//throws the error below:
// [Node] /newsArticleModel.ts:2
// [Node] import { TransformedRow } from "./transformedRowInterface";
//SyntaxError: Unexpected token import
// also tried a require below, which also throws an error:
// const transformedRow = require(appRoot + "/src/controllers/transformedRowInterface.ts");
// throws this error: 
// [Node] (function (exports, require, module, __filename, __dirname) { export interface TransformedRow  {
//   [Node]                                                               ^^^^^^
//   [Node]
//   [Node] SyntaxError: Unexpected token export

this is my tsconfig:

    {
  "compilerOptions": {
    "module": "commonjs",
    "target": "es2017",
    "noImplicitAny": false,
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist",
    "baseUrl": ".",
    "paths": {
      // "*": ["node_modules/*", "src/types/*"]
    }
  },
  "include": ["src/**/*"]
}

What am I doing wrong?

like image 970
devdropper87 Avatar asked Oct 06 '17 18:10

devdropper87


People also ask

How do I fix unexpected token export?

To solve the "Uncaught SyntaxError Unexpected token 'export'" error, set the type of your <script /> tags to module , e.g. <script type="module" src="index. js"></script> . The type="module" attribute is supported in all modern browsers and allows us to use the ES6 modules syntax.

How do you fix an unexpected identifier?

To solve the "Uncaught SyntaxError: Unexpected identifier" error, make sure you don't have any misspelled keywords, e.g. Let or Function instead of let and function , and correct any typos related to a missing or an extra comma, colon, parenthesis, quote or bracket.

What is unexpected token?

The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.


1 Answers

I'm pretty sure this is because you are targeting ES2017, which supports the syntax for imports "out of the box", i.e. your output would literally contain

import { thing } from './wotsit';

If your runtime doesn't support this kind of import, you will need to use down-level compilation (i.e. target ES5) so the import gets converted into the CommonJS require call.

You can test my theory by looking at the JavaScript output to see what the import looks like.

like image 55
Fenton Avatar answered Oct 07 '22 14:10

Fenton