Typescript import syntax errors & other

Question

I developed this project in react & typescript using create-react-app. I had no problems the entire time I was developing. Now I would like to publish one of my components to npm.

I realized I need to build this out of the context of an existing application to publish just the component.

When I try to compile the typescript myself via tsc, it is giving me syntax errors in places where Importing types like this:

src/index.ts:18:1 - error TS1128: Declaration or statement expected.

18 export type {
   ~~~~~~

src/index.ts:18:13 - error TS1005: ';' expected.

18 export type {
               ~

src/index.tsx:22:1 - error TS1128: Declaration or statement expected.

22 export type {
   ~~~~~~

src/index.tsx:22:13 - error TS1005: ';' expected.

22 export type {
               ~

My tsconfig is like this (after taking several shots in the dark):

{
  "compilerOptions": {
    "target": "es6",  //Changed from es5 per Erik's suggestion, problem persists
    "lib": [
      "dom",
      "dom.iterable",
      "ESNext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

I'm also getting errors about other libraries, like Ramda:

e.g.

node_modules/@types/ramda/index.d.ts:1949:120 - error TS1110: Type expected.

1949 export function toPairsIn<O extends object, K extends Extract<keyof O, string | number>>(obj: O): Array<{ [key in K]: [`${key}`, O[key]] }[K]>;
                                                                                                                            ~~~

node_modules/@types/ramda/index.d.ts:1949:136 - error TS1005: ';' expected.

1949 export function toPairsIn<O extends object, K extends Extract<keyof O, string | number>>(obj: O): Array<{ [key in K]: [`${key}`, O[key]] }[K]>;
                                                                                                                                            ~

node_modules/@types/ramda/index.d.ts:1949:138 - error TS1128: Declaration or statement expected.

1949 export function toPairsIn<O extends object, K extends Extract<keyof O, string | number>>(obj: O): Array<{ [key in K]: [`${key}`, O[key]] }[K]>;
                                                                                                                                              ~

I've lost a day to this issue, and my only goal is to publish this component, so any help toward that end would be appreciated. I'd prefer to figure out why I can't get my typescript to compile properly without the react script, but if there's another way to go about publishing it, then that works, too.

Erik · Accepted Answer · 2021-07-12 16:37:04Z

2

The export keyword is ES6 syntax. In your compilerOptions your target is ES5, hence the errors.

answered Jul 12, 2021 at 16:37

Erik

8576 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

scl Over a year ago

I just changed it to es6 and I'm getting the same issue

scl Over a year ago

It's also getting tripped up by the ? operator when it's used as just a null check, so I feel like you're right that it has somethign to do with interpreting something with an outdated syntax

Erik Over a year ago

Also a guess from my side, but what if you turn strict to false, does that help? It's of course better to keep it true, but this might help you sort out the problem at least.

scl Over a year ago

I did try that as well. I think i figured out a way around it. I tried the answer here stackoverflow.com/questions/59331493/…

scl Over a year ago

in the process I realized that create react app webpack is giving me this warning : ``` ============= WARNING: You are currently running a version of TypeScript which is not officially supported by @typescript-eslint/typescript-estree. You may find that it works just fine, or you may not. SUPPORTED TYPESCRIPT VERSIONS: >=3.3.1 <4.2.0 YOUR TYPESCRIPT VERSION: 4.2.4 Please only submit bug reports when using the officially supported version. ============= ```

|

scl · Accepted Answer · 2021-07-13 01:25:54Z

1

I ended up getting around the issue by using this process:

combine react build output into single js file

I'm thinking create react app was using a newer version of typescript than me... assuming that's the case I should have done yarn add typescript@next

edited Jul 13, 2021 at 1:25

answered Jul 12, 2021 at 18:32

scl

9310 bronze badges

Collectives™ on Stack Overflow

Typescript import syntax errors & other

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related