@rollup/plugin-typescript: Path of Typescript compiler option 'outDir' must be located inside the same directory as the Rollup 'file' option.

[remarkablemark]

• Rollup Plugin Name: @rollup/plugin-typescript
• Rollup Plugin Version: 12.1.0
• Rollup Version: 4.22.4
• Operating System (or Browser): Linux
• Node Version: 20
• Link to reproduction (⚠️ read below): build(deps-dev): bump @rollup/plugin-typescript from 11.1.6 to 12.1.0 remarkablemark/html-react-parser#1535

Expected Behavior

Rollup build does not error

Actual Behavior

Rollup build throws error:

> html-react-parser@5.1.16 build:umd
> rollup --config --failAfterWarnings


umd/index.ts → dist/html-react-parser.js...
[!] (plugin typescript) RollupError: [plugin typescript] @rollup/plugin-typescript: Path of Typescript compiler option 'outDir' must be located inside the same directory as the Rollup 'file' option.
    at getRollupError (/home/runner/work/html-react-parser/html-react-parser/node_modules/rollup/dist/shared/parseAst.js:282:41)
    at Object.error (/home/runner/work/html-react-parser/html-react-parser/node_modules/rollup/dist/shared/parseAst.js:278:42)
    at Object.error (/home/runner/work/html-react-parser/html-react-parser/node_modules/rollup/dist/shared/rollup.js:815:32)
    at validatePaths (file:///home/runner/work/html-react-parser/html-react-parser/node_modules/@rollup/plugin-typescript/dist/es/index.js:404:29)
    at Object.renderStart (file:///home/runner/work/html-react-parser/html-react-parser/node_modules/@rollup/plugin-typescript/dist/es/index.js:826:13)
    at /home/runner/work/html-react-parser/html-react-parser/node_modules/rollup/dist/shared/rollup.js:1000:40
    at async Promise.all (index 0)
    at PluginDriver.hookParallel (/home/runner/work/html-react-parser/html-react-parser/node_modules/rollup/dist/shared/rollup.js:928:9)
    at Bundle.generate (/home/runner/work/html-react-parser/html-react-parser/node_modules/rollup/dist/shared/rollup.js:19607:13)
    at /home/runner/work/html-react-parser/html-react-parser/node_modules/rollup/dist/shared/rollup.js:21248:27

Additional Information

May be related to #1773

• rollup.config.mjs
• tsconfig.json

[remarkablemark]

@shellscape how come this was moved to discussion? I have provided a link to reproduction: remarkablemark/html-react-parser#1535

[shellscape]

your reproduction was invalid. the issue template is clear.

[remarkablemark]

Let me know if I missed something here, I chose 3 from the issue template:

1. Using the StackBlitz reproduction template at https://stackblitz.com/fork/rollup-repro
2. Using the REPL.it plugin reproduction template at https://repl.it/@rollup/rollup-plugin-repro
3. Provide a minimal repository link (Read https://gist.github.com/Rich-Harris/88c5fc2ac6dc941b22e7996af05d70ff for instructions).
   Please use NPM for installing dependencies!
   These may take more time to triage than the other options.

Or do I also need to do 1 and 2?

[shellscape]

Please forgive me if this comes off as curt. I'm really not sure what isn't clear there. You have three choices. You chose number three but must have completely misunderstood the reference material provided as a guide? The reproduction you provided when you opened the issue was a link to a Pull Request, which is obviously not in the list of options. A link to the entire project is also not valid, as laid out by the linked article explaining what a minimal reproduction repository is.

We've had this in place for quite a few years, so it's not something that's open for discussion at the moment. Recently, we switched from just closing issues missing a valid reproduction, to moving them to Q & A. Maintainers will not examine or triage issues without valid reproductions.

[remarkablemark]

I see, thanks for explaining

[Jason3S]

@shellscape,

Is there a reason for this breakage. It makes having multiple configurations difficult.

[shellscape]

major versions often contain breaking changes. please see the changelog.

[Jason3S]

@shellscape,

I looked at the changelog, it did not mention the change in requirements.

The error check was introduced in #1728, but it doesn't explain why it is an issue.

Why is it a problem if the output file is not in the same directory as outDir? In my case the output file is 100% self contained.

My workaround is below, but what is the "right" way to handle the issue?

[Jason3S]

The workaround is to set the compilerOptions:

import Path from 'node:path';
import rollupPluginTypescript from '@rollup/plugin-typescript';

const target = { file: './dist/cjs/index.cjs', format: 'cjs' };

//...
const configs = [
  {
    input: 'src/index.ts',
    output: target
    plugins: [
      rollupPluginTypescript({
        tsconfig: 'tsconfig.json',
        compilerOptions: { outDir: Path.dirname(target.file) },
      }),
    ]
  }
];
export default configs;

But this seems unnecessary for every rollup config.

[bbollen23]

What is "target" in this case?

[Jason3S]

Sorry about that. target.file is the output file.

[dimaslanjaka]

same here

import commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import path from 'path';
import { fileURLToPath } from 'url';
import pkg from './package.json' assert { type: 'json' };

console.clear();

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const deps = Object.keys(pkg.dependencies).concat(Object.keys(pkg.devDependencies));

export default {
  input: 'src/index.ts', // Replace with the path to your entry TypeScript file
  output: [
    {
      dir: 'dist/cjs',
      format: 'cjs',
      sourcemap: true,
      preserveModules: true
    },
    {
      dir: 'dist/esm',
      format: 'esm',
      sourcemap: true,
      preserveModules: true
    }
  ],
  plugins: [
    json(),
    resolve(),
    commonjs(),
    typescript({
      tsconfig: 'tsconfig.json',
      compilerOptions: {
        /* Basic Options */
        target: 'ES5',
        module: 'ES2020',
        lib: ['ES2019', 'ES2020'],
        allowJs: true,
        checkJs: false,
        /* Strict Type-Checking Options */
        strict: true,
        /* Module Resolution Options */
        moduleResolution: 'node',
        esModuleInterop: true,
        /* Advanced Options */
        forceConsistentCasingInFileNames: true,
        skipDefaultLibCheck: true,
        skipLibCheck: true,
        outDir: path.join(__dirname, 'dist')
      }
    })
  ],
  external: deps // Add any external dependencies you don't want to bundle
};

[Jason3S]

@dimaslanjaka,

That is the exactly the problem I ran into.
You need make one config per output and set the outDir to path.join(__dirname, 'dist/cjs')and path.join(__dirname, 'dist/esm')

[michaelfaith]

This is my problem too! The parent folder dist is set in the tsconfig, but building multiple outputs into nested folders under dist breaks now. It's going to require a lot of hacky workaround config code to properly dual bundle. This can't possibly be a desirable change.

@shellscape thoughts on this use case?

[shellscape]

there's an open issue that I put my thoughts to the same question on.

community needs to step up if your use case doesn't align with the breaking change in this major version. A reminder that you are not obligated to update.

[michaelfaith]

Sorry, i followed another issue here. I didn't see any open ones related to outDir (and not specifically for this case of nested folders within the folder that's defined in outDir); i just saw a couple related to declarationDir. Which would be the best to weigh in on?

[remarkablemark]

Thanks, this is resolved by #1783. See remarkablemark/html-react-parser#1596 where I had to update rollup.config.mjs:

  plugins: [
    typescript({
      compilerOptions: {
        outDir: 'dist',
      },
    )},
  ],