I'm working on a big React + TypeScript project.

It works well on the local machine of other colleagues, but on mine I get the following error:

Line 1:  Parsing error: Unexpected token, expected ";"

as you can see below:

Here is the source code:

export type LoadOfferType = typeof import("../offers/defaultOffer");

export const loadOffer = async (): Promise<LoadOfferType> => {
  const offerName = process.env.NODE_ENV === "development" ? process.env.REACT_APP_FALLBACK_SITE : "defaultOffer";

  /**
   * We use a switch statement instead of ane xpression for the offer path
   * because Webpack throws a critical dependency error when using paths
   * that are not explicitly defined.
   */
  switch (offerName) {
    case "mysite":
      return await import("../offers/mysite");
    default:
      return await import("../offers/defaultOffer");
  }
};

The mands I ran after cloning the repository were:

$ yarn install
$ yarn start

Here there is some info about my system:

$ node -v
v12.13.0

$ npm -v
6.12.0

$ yarn -v
1.19.1

Any idea on how to fix this?

Thanks!

I'm working on a big React + TypeScript project.

It works well on the local machine of other colleagues, but on mine I get the following error:

Line 1:  Parsing error: Unexpected token, expected ";"

as you can see below:

Here is the source code:

export type LoadOfferType = typeof import("../offers/defaultOffer");

export const loadOffer = async (): Promise<LoadOfferType> => {
  const offerName = process.env.NODE_ENV === "development" ? process.env.REACT_APP_FALLBACK_SITE : "defaultOffer";

  /**
   * We use a switch statement instead of ane xpression for the offer path
   * because Webpack throws a critical dependency error when using paths
   * that are not explicitly defined.
   */
  switch (offerName) {
    case "mysite.":
      return await import("../offers/mysite.");
    default:
      return await import("../offers/defaultOffer");
  }
};

The mands I ran after cloning the repository were:

$ yarn install
$ yarn start

Here there is some info about my system:

$ node -v
v12.13.0

$ npm -v
6.12.0

$ yarn -v
1.19.1

Any idea on how to fix this?

Thanks!

• javascript
• reactjs
• typescript
• tslint

Share Improve this question Follow asked Oct 21, 2019 at 16:39 ViewsonicViewsonic 94733 gold badges1818 silver badges3939 bronze badges 4

• Can you paste the content of "../offer/defaultOffer"? – Vandesh Commented Oct 21, 2019 at 16:47
• Why are you using a dynamic import when it's at the top of the file and seems like it will always get loaded? Why not do export type LoadOfferType = typeof require("../offers/defaultOffer");? – jered Commented Oct 21, 2019 at 18:01
• It's also possible that you aren't on the right version of TypeScript. Dynamic imports were added in v2.4 – jered Commented Oct 21, 2019 at 18:01
• And you need to have "module": "esnext" in your configuration – ThomasThiebaud Commented Oct 21, 2019 at 19:05

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

A couple of things could be happening. Have you created a ts.config.js with ts configuration and parser config, something like:

 export const typescriptConfig = {
 extends: ['plugin:@typescript-eslint/eslint- 
 remended'],
 overrides: [
   {
     parser: '@typescript-eslint/parser',
     extends: [
       'plugin:@typescript-eslint/remended',
       'prettier/@typescript-eslint',
       'plugin:import/typescript',
     ],
     plugins: ['@typescript-eslint'],

     files: ['*.ts', '*.tsx'],

     rules: {},
   },
 ],

}

Create React App uses ESLint by default. However, ESLint can't parse TypeScript by default. If you want, you may consider using @typescript-eslint/parser.

This could be that the base babel-eslint parser not working correctly without any config. ESLint is not applying different parsers to different files, hence babel-eslint might be throwing an error.

Make sure your config file is created in the root of the project. I would start with that.

You are definitely on an old version of TypeScript. Your syntax is perfectly valid.

Tested

Example test done locally.

Ended up here because I accidentally was doing

{
  items ?? [],
}

when I should have been doing

{
  items: items ?? [],
}