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?
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.
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.
The JavaScript exceptions "unexpected token" occur when a specific language construct was expected, but something else was provided. This might be a simple typo.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With