Adds postcss-import plugin + fixes import for react phone styles

.changeset/cuddly-starfishes-own.md

@@ -0,0 +1,5 @@
+---
+"@turnkey/sdk-react": patch
+---
+
+Fix build issues with React 19+ & NextJs 15+

packages/sdk-react/package.json

@@ -55,21 +55,22 @@
     "@mui/material": "^6.1.5",
     "@noble/hashes": "1.4.0",
     "@react-oauth/google": "^0.12.1",
-    "@turnkey/sdk-browser": "workspace:*",
-    "@turnkey/wallet-stamper": "workspace:*",
     "@turnkey/crypto": "workspace:*",
+    "@turnkey/sdk-browser": "workspace:*",
     "@turnkey/sdk-server": "workspace:*",
-    "usehooks-ts": "^3.1.0",
+    "@turnkey/wallet-stamper": "workspace:*",
     "libphonenumber-js": "^1.11.14",
     "next": "^15.0.2",
     "react-apple-login": "^1.1.6",
-    "react-international-phone": "^4.3.0"
+    "react-international-phone": "^4.3.0",
+    "usehooks-ts": "^3.1.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "@types/react": "^18.2.75"
   },
   "devDependencies": {
-    "@types/react": "^18.2.75",
+    "postcss-import": "^16.1.0",
     "react": "^18.2.0"
   },
   "engines": {

packages/sdk-react/rollup.config.mjs

@@ -1,47 +1,54 @@
-import typescript from "@rollup/plugin-typescript";
-import nodeExternals from "rollup-plugin-node-externals";
-import path from "node:path";
-import postcss from "rollup-plugin-postcss";
-import preserveDirectives from "rollup-preserve-directives";
-import url from "@rollup/plugin-url";
-import alias from "@rollup/plugin-alias";
-import copy from "rollup-plugin-copy";
+import typescript from '@rollup/plugin-typescript';
+import nodeExternals from 'rollup-plugin-node-externals';
+import path from 'node:path';
+import postcss from 'rollup-plugin-postcss';
+import preserveDirectives from 'rollup-preserve-directives';
+import url from '@rollup/plugin-url';
+import alias from '@rollup/plugin-alias';
+import copy from 'rollup-plugin-copy';
+import postcssImport from 'postcss-import';
 
 const getFormatConfig = (format) => {
-  const pkgPath = path.join(process.cwd(), "package.json");
+  const pkgPath = path.join(process.cwd(), 'package.json');
   const __dirname = path.dirname(new URL(import.meta.url).pathname);
 
   return {
     input: 'src/index.ts',
     output: {
       format,
-      dir: "dist",
+      dir: 'dist',
       entryFileNames: `[name].${format === 'esm' ? 'mjs' : 'js'}`,
       preserveModules: true,
       sourcemap: true,
     },
     plugins: [
-      alias({ // required for svg assets
+      alias({
+        // required for svg assets
         entries: [
-          { find: 'assets', replacement: path.resolve(__dirname, 'src/assets') }
-        ]
+          {
+            find: 'assets',
+            replacement: path.resolve(__dirname, 'src/assets'),
+          },
+        ],
       }),
-      postcss({ // required for css module bundling
+      postcss({
+        // required for css module bundling
         modules: true,
         extensions: ['.css', '.scss'],
         use: ['sass'],
         extract: `styles.${format}.css`,
         minimize: true,
         sourceMap: true,
+        plugins: [postcssImport()],
       }),
       typescript({
         outputToFilesystem: true,
         tsconfig: './tsconfig.json',
         compilerOptions: {
-          outDir: "dist",
+          outDir: 'dist',
           composite: false,
           declaration: format === 'esm',
-          declarationMap: format === "esm",
+          declarationMap: format === 'esm',
           sourceMap: true,
         },
       }),
@@ -50,29 +57,31 @@ const getFormatConfig = (format) => {
         packagePath: pkgPath,
         builtinsPrefix: 'ignore',
       }),
-      url({ // required for fonts and assets
+      url({
+        // required for fonts and assets
         include: [
-          '**/*.svg', 
-          '**/*.png', 
-          '**/*.jpg', 
+          '**/*.svg',
+          '**/*.png',
+          '**/*.jpg',
           '**/*.gif',
-          '**/*.woff', 
-          '**/*.woff2', 
-          '**/*.ttf', 
-          '**/*.eot'
+          '**/*.woff',
+          '**/*.woff2',
+          '**/*.ttf',
+          '**/*.eot',
         ],
         limit: 8192,
-        emitFiles: true, 
-        fileName: 'assets/fonts/[name].[hash][extname]', 
+        emitFiles: true,
+        fileName: 'assets/fonts/[name].[hash][extname]',
       }),
-      copy({ // required for fonts
+      copy({
+        // required for fonts
         targets: [
           {
-            src: path.resolve(__dirname, "src/assets/fonts/**/*"),
-            dest: path.resolve(__dirname, "dist/assets/fonts"),
+            src: path.resolve(__dirname, 'src/assets/fonts/**/*'),
+            dest: path.resolve(__dirname, 'dist/assets/fonts'),
           },
         ],
-        verbose: false, 
+        verbose: false,
       }),
     ],
   };

packages/sdk-react/src/components/auth/Auth.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import styles from "./Auth.module.css";
 import React, { useEffect, useState } from "react";
 import { initOtpAuth, getSuborgs, createSuborg, oauth } from "../../actions/";

packages/sdk-react/src/components/auth/PhoneInput.tsx

@@ -1,4 +1,3 @@
-import "./PhoneInput.css";
 import {
   BaseTextFieldProps,
   InputAdornment,
@@ -14,7 +13,7 @@ import {
   usePhoneInput,
 } from "react-international-phone";
 import { FlagImage as OriginalFlagImage } from "react-international-phone";
-
+import "react-international-phone/style.css";
 const FlagImage = OriginalFlagImage as React.ElementType;
 const allowedCountries = ["us", "ca"];
 

packages/sdk-react/src/index.ts

@@ -1,6 +1,5 @@
 import "./components/auth/Auth.module.css";
 import "./components/auth/OtpVerification.module.css";
-import "./components/auth/PhoneInput.css";
 import "./components/export/Export.module.css";
 import "./components/import/Import.module.css";
 import "./components/theme.css";