Rollup + TypeScript AST Compilation Error

Question

Trying to build a module with rollup + TypeScript and seeing some issues I cannot understand.

My general rollup config looks like:

export default {
  input: ['src/index.ts'],
  output: [
    {
      preserveModules: true,
      dir: 'dist',
      format: 'esm'
    }
  ],
  plugins: [
    cleandir(),
    peerDepsExternal({ includeDependencies: true }),
    resolve(),
    typescript({
      tsconfig: './tsconfig.json',
      noEmitOnError: true,
      declaration: true,
      declarationDir: 'dist',
      include: [ '**/*.ts', '**/*.tsx' ],
      outDir: 'dist',
      exclude: [
        '**/*.test.tsx',
        '**/*.test.ts',
        '**/*.stories.ts',
        '**/*.stories.tsx'
      ]
    }),
    json()
  ]
};

And the error I'm seeing looks like:

[!] RollupError: src/CoreReduxTypes.ts (2:7): Expected ',', got 'Action' (Note that you need plugins to import files that are not JavaScript)
src/CoreReduxTypes.ts (2:7)
1: import {
2:   type Action,
          ^
3:   type Dispatch,
4:   type Middleware,
    at Object.getRollupError (/project/client-utilities/node_modules/rollup/dist/shared/parseAst.js:285:41)
    at ParseError.initialise (/project/client-utilities/node_modules/rollup/dist/shared/rollup.js:15580:40)

I've seen an error like this before where a *.ts is included in the imported tsconfig.json but not matched in the include passed to the @rollup/plugin-typescript plugin.

Has anyone seen anything like this before?

If so, what steps did you take to resolve? Any help greatly appreciated!

Please edit the title of your question to be descriptive, unambiguous, and specific to what you are asking. For more guidance, see How do I write a good title?. — DarkBee
– DarkBee, Commented Feb 5 at 6:39

Glisten STAR · Accepted Answer · 2025-02-05 06:36:33Z

Try again like below

Set "moduleResolution": "Bundler" in tsconfig.json tsconfig.json

   "compilerOptions": {
       "moduleResolution": "Bundler",
       "allowSyntheticDefaultImports": true,
       "isolatedModules": true
   }
}

Ensure tsconfig.json includes your files

Make sure tsconfig.json includes CoreReduxTypes.ts under include:
```
{
   "include": ["src/**/*.ts", "src/**/*.tsx"]
}
```

Update @rollup/plugin-typescript options

typescript({
  tsconfig: './tsconfig.json',
  noEmitOnError: true,
  declaration: true,
  declarationDir: 'dist',
  include: ['src/**/*.ts', 'src/**/*.tsx'], // Explicitly include src files
  exclude: ['**/*.test.tsx', '**/*.test.ts', '**/*.stories.ts', '**/*.stories.tsx'],
  compilerOptions: {
    moduleResolution: "Bundler", // Ensures correct module resolution
    isolatedModules: true, // Fixes issues with type imports
  }
})

Use @rollup/plugin-sucrase if needed

npm install @rollup/plugin-sucrase --save-dev

import sucrase from '@rollup/plugin-sucrase';

sucrase({
   transforms: ['typescript'],
}),

Try replacing import type with import as a last resort

Collectives™ on Stack Overflow

Rollup + TypeScript AST Compilation Error

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related