Merge pull request #48 from uploadcare/feat/dynamic-ssr-false-next

feat(next): added new import for nextjs with ssr disabled

Author: egordidenko

package-lock.json

@@ -27,6 +27,7 @@ React principles.
     * [Styles](#styles)
     * [File Uploader API](#file-uploader-api)
     * [Events](#events)
+* [Next.js](#nextjs)
 * [Security issues](#security-issues)
 * [Feedback](#feedback)
 
@@ -120,8 +121,7 @@ import {
 import "@uploadcare/react-uploader/core.css";
 
 const Example = () => {
-    const uploaderRef = useRef < InstanceType < UploadCtxProvider > | null > (null);
-
+    const uploaderRef = useRef <InstanceType<UploadCtxProvider> | null>(null);
 
     <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
 }
@@ -172,6 +172,21 @@ import "@uploadcare/react-uploader/core.css";
 | change                 | onChange               |
 | group-created          | onGroupCreated         |
 
+## Next.js
+File Uploader does not support Server-side Rendering (SSR), we have a special import for nextjs that already has SSR disabled. 
+You will need to import with import `@uploadcare/react-uploader/next`
+
+```jsx
+'use client'
+import { FileUploaderRegular } from "@uploadcare/react-uploader/next";
+import "@uploadcare/react-uploader/core.css";
+
+function App() {
+    return <FileUploaderRegular pubkey="YOUR_PUBLIC_KEY" />
+};
+```
+
+
 ## Security issues
 
 If you think you ran into something in Uploadcare libraries that might have

packages/react-uploader/README.md

@@ -4,9 +4,7 @@
   "version": "1.0.0",
   "private": false,
   "type": "module",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "main": "./dist/react-uploader.cjs",
   "module": "./dist/react-uploader.js",
   "types": "./dist/react-uploader.d.ts",
@@ -15,7 +13,12 @@
       "import": "./dist/react-uploader.js",
       "require": "./dist/react-uploader.cjs"
     },
-    "./core.css": "./dist/libs.css"
+    "./next": {
+      "import": "./dist/nextjs.js",
+      "require": "./dist/nextjs.cjs",
+      "types": "./dist/nextjs.d.ts"
+    },
+    "./core.css": "./dist/style.css"
   },
   "scripts": {
     "dev": "tsc && vite build --watch",
@@ -24,7 +27,8 @@
     "test": "vitest"
   },
   "peerDependencies": {
-    "@types/react": "17 || 18"
+    "@types/react": "17 || 18",
+    "next": "13 || 14"
   },
   "dependencies": {
     "@uploadcare/file-uploader": "^1.2.0",

packages/react-uploader/package.json

@@ -0,0 +1,6 @@
+import dynamic from "next/dynamic";
+
+export const FileUploaderInline = dynamic(
+  () => import("./FileUploaderInline").then((mod) => mod.FileUploaderInline),
+  { ssr: false },
+);

packages/react-uploader/src/Uploader/Inline/NextFileUploaderInline.ts

@@ -0,0 +1,6 @@
+import dynamic from "next/dynamic";
+
+export const FileUploaderMinimal = dynamic(
+  () => import("./FileUploaderMinimal").then((mod) => mod.FileUploaderMinimal),
+  { ssr: false },
+);

packages/react-uploader/src/Uploader/Minimal/NextFileUploaderMinimal.ts

@@ -0,0 +1,6 @@
+import dynamic from "next/dynamic";
+
+export const FileUploaderRegular = dynamic(
+  () => import("./FileUploaderRegular").then((mod) => mod.FileUploaderRegular),
+  { ssr: false },
+);

packages/react-uploader/src/Uploader/Regular/NextFileUploaderRegular.ts

@@ -0,0 +1,3 @@
+export { FileUploaderMinimal } from "./Uploader/Minimal/NextFileUploaderMinimal";
+export { FileUploaderRegular } from "./Uploader/Regular/NextFileUploaderRegular";
+export { FileUploaderInline } from "./Uploader/Inline/NextFileUploaderInline";

packages/react-uploader/src/nextjs.ts

@@ -5,20 +5,23 @@ import dts from "vite-plugin-dts";
 
 export default defineConfig({
   build: {
-    cssCodeSplit: true,
+    cssCodeSplit: false,
     lib: {
-      entry: [resolve(__dirname, "src/libs.ts")],
+      entry: {
+        nextjs: resolve(__dirname, "src/nextjs.ts"),
+        "react-uploader": resolve(__dirname, "src/libs.ts"),
+      },
+
       name: "@uploadcare/react-uploader",
 
       formats: ["es", "cjs"],
-
-      fileName: "react-uploader",
     },
     rollupOptions: {
-      external: ["react", "@uploadcare/file-uploader"],
+      external: ["react", "next", "next/dynamic", "@uploadcare/file-uploader"],
       output: {
         globals: {
           react: "React",
+          next: "next",
         },
       },
     },