Feature/try dep

README.md

@@ -94,6 +94,11 @@ The `@types` directive in comments might help having IntelliSense in VS code, wi
 leading to stale imports
 - NPM and/or Yarn may cache .tgz files in an unexpected way, reinstalling a stale version everytime:https://github.com/yarnpkg/yarn/issues/6811
 
+### Next.js app
+
+- In v12.1, I hit following bug:https://github.com/vercel/next.js/issues/35112 with "type":"module". It seems that the CJS code might in some case try to load the ESM exports of its submodule, instead of sticking to CJS.
+
+
 ## Learning - per build tools
 
 
@@ -124,6 +129,8 @@ Conditional exports are supposed to avoid this issue (you don't need to use `typ
 - Doesn't respect the "outDir" in our demo
 - Based on rollup, at the time of writing there is no official doc for the config, but you can write in TypeScript and read the source directly: https://github.com/unjs/unbuild/blob/main/src/types.ts
 
+
+
 ## Contribute
 
 - If you want to test a new bundler, copy `package-template` and setup `package.json` accordingly.

demo-next-app/package.json

@@ -11,11 +11,12 @@
     "my-package-esbuild": "file:../my-package-esbuild/my-package-esbuild-1.0.0.tgz",
     "my-package-tsup": "file:../my-package-tsup/my-package-tsup-1.0.0.tgz",
     "my-package-webpack": "file:../my-package-webpack/my-package-webpack-1.0.0.tgz",
-    "next": "12.0.7",
+    "next": "^12.1.1-canary.6",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
+    "@types/node": "^17.0.21",
     "@types/react": "^17.0.38",
     "eslint": "8.6.0",
     "eslint-config-next": "12.0.7"

demo-next-app/pages/with-tsup.tsx

@@ -1,8 +1,16 @@
 import { shared, isClient, SharedType } from "my-package-tsup";
-import { serverOnly, ServerOnlyType } from "my-package-tsup/server";
+import {
+  serverOnly,
+  ServerOnlyType,
+  //serverOnlyDependency,
+  sharedDependency,
+} from "my-package-tsup/server";
 import { DynamicClientOnly } from "../components/DynamicClientOnly";
 
-export default function WithTsupPage(props: { serverOnly: ServerOnlyType }) {
+export default function WithTsupPage(props: {
+  serverOnly: ServerOnlyType;
+  serverOnlyDependency;
+}) {
   return (
     <div>
       <div>Server-only: {props.serverOnly}</div>
@@ -15,6 +23,19 @@ export default function WithTsupPage(props: { serverOnly: ServerOnlyType }) {
         that's just for testing`}
       </p>
       <div>Is client: {isClient() ? "true" : "false"} </div>
+      <div>
+        <h2>Same for a dependency of my-package-tsup:</h2>
+        {/*<div>Server-only dep: {props.serverOnlyDependency}</div>*/}
+        <div>
+          Client-only: <DynamicClientOnly />
+        </div>
+        <div>Shared:{sharedDependency}</div>
+        <p>
+          {`Note: this line should provoke an SSR issue, it\'s perfectly normal,
+        that's just for testing`}
+        </p>
+        <div>Is client: {isClient() ? "true" : "false"} </div>
+      </div>
     </div>
   );
 }
@@ -23,6 +44,7 @@ export function getStaticProps() {
   return {
     props: {
       serverOnly,
+      //serverOnlyDependency,
     },
   };
 }

my-package-tsup-dependency/.gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+*.tgz
+yarn-error.log

my-package-tsup-dependency/client/index.ts

@@ -0,0 +1,12 @@
+export * from "../shared";
+
+if (typeof window === "undefined" || !window) {
+  console.log("client window dependency", window);
+  throw new Error(
+    "You tried to import client-only code on the server from dependency."
+  );
+}
+
+export type ClientOnlyDependencyType = "client-only-dependency";
+export const clientOnlyDependency: ClientOnlyDependencyType =
+  "client-only-dependency";

my-package-tsup-dependency/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "my-package-tsup-dependency",
+  "version": "1.0.0",
+  "description": "",
+  "main": "./dist/shared/index.js",
+  "type": "module",
+  "files": [
+    "dist/"
+  ],
+  "exports": {
+    ".": {
+      "node": "./dist/server/index.cjs",
+      "import": "./dist/shared/index.js"
+    },
+    "./server": "./dist/server/index.cjs",
+    "./client": "./dist/client/index.js"
+  },
+  "types": "./dist/shared/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "server": [
+        "./dist/server/index.d.ts"
+      ],
+      "client": [
+        "./dist/client/index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "clean": "rm -Rf ./dist && rm -Rf *.tgz",
+    "prebuild": "yarn run clean",
+    "build:tsup": "tsup",
+    "build": "yarn run build:tsup",
+    "publish": "yarn run build && npm pack"
+  },
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^17.0.8",
+    "tsup": "^5.11.11",
+    "typescript": "4.2.2"
+  },
+  "dependencies": {
+    "react": "^17.0.2"
+  }
+}

my-package-tsup-dependency/server/index.ts

@@ -0,0 +1,14 @@
+import fs from "fs"; // example of a server-only import
+
+export * from "../shared";
+
+/*
+FIXME: currently we set window to "42" so this condition works in client-code
+if (typeof window !== "undefined" && !!window) {
+  throw new Error("You tried to import server-only code on the client.");
+}
+*/
+
+export type ServerOnlyDependencyType = "server-only-dependency";
+export const serverOnlyDependency: ServerOnlyDependencyType =
+  "server-only-dependency";

my-package-tsup-dependency/shared/index.ts

@@ -0,0 +1,9 @@
+// Import a non-trivial shared lib to test "externals" management
+import "react";
+
+export type SharedDependencyType = "shared-dependency";
+export const sharedDependency: SharedDependencyType = "shared-dependency";
+
+export const isClientDependency = (): boolean => {
+  return typeof window !== "undefined";
+};

my-package-tsup-dependency/tsconfig.build.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+  "include": [
+    "./shared/index.ts",
+    "./client/index.ts",
+    "./server/index.ts"
+  ],
+  "compilerOptions": {
+    "emitDeclarationOnly": true,
+    "isolatedModules": false,
+    "declaration": true,
+    // helps local development, could be dropped out of the NPM package though
+    "declarationMap": true
+  },
+}

my-package-tsup-dependency/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./dist"
+  },
+}

my-package-tsup-dependency/tsup.config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "tsup";
+
+const commonConfig = {
+  clean: true,
+  splitting: false,
+  dts: true,
+  sourcemap: true,
+};
+export default defineConfig([
+  {
+    entry: ["shared/index.ts"],
+    ...commonConfig,
+    format: ["cjs", "esm", "iife"],
+    outDir: "dist/shared",
+  },
+  {
+    entry: ["server/index.ts"],
+    ...commonConfig,
+    format: ["cjs"],
+    outDir: "dist/server",
+  },
+  {
+    entry: ["client/index.ts"],
+    ...commonConfig,
+    format: ["esm", "iife"],
+    outDir: "dist/client",
+  },
+]);