Build impossible with rollup and typescript

[elturpin]

Hi !

On a TS project using picocolors and rollup as builder, since the update of some packages (@rollup/plugin-typescript, and rollup) the project just cannot build when picocolors is imported. I found a fix where I add an include option to the ts plugin of rollup but the solution is not really satisfying.

Here is a reproduction repository where I just kept the bare minimum : https://github.com/elturpin/test-rollup-ts-picocolors

I think that the problem come from some interaction with TS rollup plugin and picocolors because if I try with other packages (chalk, express ...) their is no problem. However i have completely no idea on why their is a problem ...

Maybe someone can solve this ?

[prantlf]

Your repo can be compiled with picocolors with #60 applied. I switched it to my branch named-exports of picocolors:

--- a/package.json
+++ b/package.json
@@ -12,6 +12,6 @@
     "typescript": "5.3.2"
   },
   "dependencies": {
-    "picocolors": "^1.0.0"
+    "picocolors": "file:../picocolors"
   }
 }

And built it and run it:

❯ npm run build

> node-starter@0.0.0 build
> rollup -c rollup.config.js --bundleConfigAsCjs

src/index.ts → dist...
created dist in 449ms

❯ node dist

Hello !

It works when using named exports as well:

--- a/src/index.ts
+++ b/src/index.ts
@@ -1,9 +1,9 @@
-import pc from "picocolors";
+import { red } from "picocolors";

 type Foo = {
   a: string;
 };

-const str: string = pc.red('Hello !');
+const str: string = red('Hello !');

 console.log(str);

And it still works when switching the project to ESM:

--- a/package.json
+++ b/package.json
@@ -1,9 +1,10 @@
 {
   "name": "node-starter",
   "version": "0.0.0",
+  "type": "module",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "rollup -c rollup.config.js --bundleConfigAsCjs"
+    "build": "rollup -c rollup.config.js"
   },
   "devDependencies": {
     "@rollup/plugin-typescript": "11.1.5",
@@ -12,6 +13,6 @@
     "typescript": "5.3.2"
   },
   "dependencies": {
-    "picocolors": "^1.0.0"
+    "picocolors": "file:.."
   }
 }

--- a/rollup.config.js
+++ b/rollup.config.js
@@ -3,8 +3,7 @@ import typescript from '@rollup/plugin-typescript';
 export default {
   input: 'src/index.ts',
   output: {
-    dir: 'dist',
-    format: 'cjs',
+    dir: 'dist'
   },
   external: ["picocolors"],
   // switch the plugins option to make the build work

[elturpin]

Thanks a lot, that's very good !

[alexeyraspopov]

@elturpin have you tried adding @rollup/plugin-commonjs?

[elturpin]

@alexeyraspopov
I tired to add the package @rollup/plugin-commonjs and it still did not work. I got the same issue.

[crutchcorn]

@alexeyraspopov do you have any thoughts/opinions on using something like Vite (maybe via TanStack Config) to do ESM/CJS dual-publishing?

I maintain many ESM/CJS dual published packages and could help here if you'd be up for using Config 😊