CODEWITHSUNDEEP
rolluprollupjs
chrisweb
chrisweb

Reputation: 1510

rollup esm and umd builds, with typescript plugin and declarations, not possible?

I want to use rollup to make two builds of my library, an UMD version as well as a never ESM version

Earlier my configuration when using the non official plugin rollup-plugin-typescript2 looked like this:

import typescript from 'rollup-plugin-typescript2'
import pkg from '../package.json'
export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'umd',
      name: pkg.name,
      sourcemap: true
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true
    },
  ],
plugins: [
    typescript({
        tsconfig: "src/tsconfig.json",
        useTsconfigDeclarationDir: true
    }),
  ],
}

And in my package json I have:

  (...)
  "scripts": {
    "build": "rollup -c ./scripts/dist.js",
  },
  "main": "dist/index.js",
  "module": "dist/index.esm.js",
  "files": [
    "dist"
  ],
  (...)

And in my tsconfig.json I have:

  (...)
  "compilerOptions": {
    "rootDir": "./src",
    "outDir": "./dist",
    "declaration": true,
    "declarationDir": "./dist/@types/chrisweb-utilities",
    (...)

The resulat was "created dist/index.js, dist/index.esm.js in 2.6s" ... all good

The files that got created where the following:

/dist
|-@types
 |-index.d.ts
|-index.js
|-index.esm.js
|-index.esm.js.map
|-index.js.map

Today I tried to use the official plugin @rollup/plugin-typescript instead (because I use that one in other projects where I only do a single ESM build and it works without a problem and I wanted to use the same plugins through out all of my projects)

I had a first error because of the configuration propery only rollup-plugin-typescript2 understands: "(!) Plugin typescript: @rollup/plugin-typescript TS5023: Unknown compiler option 'useTsconfigDeclarationDir'."

So I removed it, which fixed that problem ...

But I got another error: "[!] (plugin typescript) Error: @rollup/plugin-typescript: 'dir' must be used when 'outDir' is specified."

So I added dir to my configuration, which then looked like this:

import typescript from '@rollup/plugin-typescript';
import pkg from '../package.json'
export default {
  input: 'src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'umd',
      name: pkg.name,
      sourcemap: true,
      dir: "dist",
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true,
      dir: "dist",
    },
  ],
plugins: [
    typescript({
        tsconfig: "tsconfig.json",
    }),
  ],
}

Nope, next error shows up: "[!] Error: You must set either "output.file" for a single-file build or "output.dir" when generating multiple chunks."

Actually I don't even want to generate chunks, I'm fine with a single file, but I remove dir I'm back to the previous error. So next thing I tried was to keep "dir" and instead remove "file"

This worked, or at least I got a success message: "created dist, dist in 2.6s" but the problem now is that instead of having two builds I just have a single one "dist/index.js", the first build for UMD gets owerwritten by the second one for ESM.

I thought ok one last try, lets output the UMD version in a subfolder of /dist and the ESM version in another one, so I changed my config to this:

  (...)
  output: [
    {
      format: 'umd',
      name: pkg.name,
      sourcemap: true,
      dir: "dist/umd",
    },
    {
      format: 'esm',
      sourcemap: true,
      dir: "dist/esm",
    },
  ],
  (...)

This failed too :( this time with this error: "[!] (plugin typescript) Error: @rollup/plugin-typescript: 'outDir' must be located inside 'dir'." So my outDir is "./dist" which yes is not in dir: "dist/umd" anymore, I only have one outDir in tsconfig, so it can't be in each rollup output.dir, or do I miss something here?

Oh and I actually also tried something else, remember that earlier error where rollup told me that "'dir' must be used when 'outDir' is specified", so I removed outDir from tsconfig.json and hey another rollup error (at this point I think I got all possible rollup errors ;) ) which was the following: "[!] (plugin typescript) Error: @rollup/plugin-typescript: 'dir' must be used when 'declarationDir' is specified."

So I also commented out "declarationDir" in the tsconfig ... no more error, but this is not really the solution as now I don't have typescript type definition files getting generated.

I went back and forth and tried all combinations for hours, but no luck so far...

So I'm stuck and was wondering if someone can help me out? Maybe you had this or a similar problem? Either I'm missing something or this a bug in which case I will open a ticket in a few days.

Upvotes: 3

Views: 10796

Answers (1)

YuesIt17
YuesIt17

Reputation: 1

I had the same problem, but I changed build for es, than the build of es generates js file to root folder.

structure of build's folder

My example rollup.config.ts:

export default defineConfig({
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      name: packageJson.name,
    },
    {
      format: 'es',
      dir: 'dist',
      manualChunks: id => {
        const matchLibPath = id.match(nodeModulesRegex);
        if (matchLibPath) {
          const libName = matchLibPath[1];
          return libName;
        }
      },
    },
  ],
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      tsconfig: './tsconfig.json',
      declaration: true,
      declarationDir: 'dist/types',
      emitDeclarationOnly: true,
    }),
    terser(),
    url({
      fileName: '[name][extname]',
      include: includePaths,
      limit: 0,
    }),
  ],
  external: [...Object.keys(packageJson.peerDependencies || {})],
});

Upvotes: 0

Related Questions