Search code examples
typescriptbundlerollup

variable declaration doesn't compile with rollup


I run a project with TS bundled with rollup. Using:

"typescript": "^4.6.3",
"rollup-plugin-typescript2": "^0.31.2",
"rollup-plugin-commonjs": "^10.1.0",

When I compile my code with tsc -d --emitDeclarationOnly --declarationDir build/types everything builds fine, but with rollup -c throws an (plugin rpt2) syntax error TS1134: Variable declaration expected.

For this part of code:

interface MyJson {
    default: () => Record<string, unknown>;
}

// ERROR on following line:
export const myVariable: () => Promise<MyJson> = () =>
new Promise((resolve, _reject) => {
    resolve({
        default: () => {
            return {};
        },
    });
});  

I presume something conflicts rollup to compile with ts. But can't see what's wrong.

I've setup tsconfig with:

{
  "compilerOptions": {
    "lib": [
      "dom",
      "es6"
    ],
    "target": "es6",
    "outDir": "./dist",
    "rootDir": "./src",
    "module": "ESNext",
    "declaration": true,
    "strict": true,
    "moduleResolution": "node",
    "esModuleInterop": true,
  }
}

And rollup.config.js with:

import commonjs from "@rollup/plugin-commonjs";
import resolve from "@rollup/plugin-node-resolve";
import sucrase from "@rollup/plugin-sucrase";
import json from "@rollup/plugin-json";
import typescript from "rollup-plugin-typescript2"; // switched to plugin2 to have better error input


export default [
    {
        input: pathResolve("src/index.ts"),
        output: [
            {
                file: pathResolve("dist/index.es.js"),
                format: "esm",
            },
            {
                file: pathResolve("dist/index.js"),
                format: "cjs",
            },
        ],
        plugins: [
            typescript({
                target: "esnext",
                module: "esnext",
                declaration: true,
            }),
            commonjs({
                include: nodeModules,
                extensions: [".js", ".ts", ".json"],
            }),
            json(),
            resolve(),
            sucrase({
                exclude: [nodeModules],
                transforms: ["typescript"],
            }),
        ],
        context: "window",
    },

I cannot see what goes wrong. Is there a wrong set up of rollup for TS? or it's a rollup inefficiency with ts?


Solution

  • Fixed it by moving the plugins on the rollup configuration Seems like there's a conflict and typescript needs to be first above the other plugins.

        export default [
            {
              ...
                plugins: [
                   resolve(),
                   typescript(),
                   replace({
                      DYNAMIC_IMPORT_MANIFEST: `"${externalManifestFile}"`,
                      preventAssignment: true,
                      dest: "dist",
                   }),
                   commonjs({
                    include: nodeModules,
                    extensions: [".js", ".ts", ".mjs", ".json"],
                  }),
                ],
                context: "window",
            },