CODEWITHSUNDEEP
reactjstypescriptnpm
scl
scl

Reputation: 93

Typescript import syntax errors & other

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.

Upvotes: 1

Views: 1027

Answers (2)

scl
scl

Reputation: 93

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

Upvotes: 1

Erik
Erik

Reputation: 867

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

Upvotes: 2

Related Questions