diff --git a/.changeset/cuddly-starfishes-own.md b/.changeset/cuddly-starfishes-own.md new file mode 100644 index 000000000..e2cf5d194 --- /dev/null +++ b/.changeset/cuddly-starfishes-own.md @@ -0,0 +1,5 @@ +--- +"@turnkey/sdk-react": patch +--- + +Fix build issues with React 19+ & NextJs 15+ diff --git a/packages/sdk-react/package.json b/packages/sdk-react/package.json index f975c3b8c..9a3861cc4 100644 --- a/packages/sdk-react/package.json +++ b/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": { diff --git a/packages/sdk-react/rollup.config.mjs b/packages/sdk-react/rollup.config.mjs index fef551e5a..8edbd6153 100644 --- a/packages/sdk-react/rollup.config.mjs +++ b/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, }), ], }; diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index aee230c0f..ad3c1ecf8 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/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/"; diff --git a/packages/sdk-react/src/components/auth/PhoneInput.css b/packages/sdk-react/src/components/auth/PhoneInput.css deleted file mode 100644 index cb5c8c99f..000000000 --- a/packages/sdk-react/src/components/auth/PhoneInput.css +++ /dev/null @@ -1 +0,0 @@ -@import "react-international-phone/style.css"; diff --git a/packages/sdk-react/src/components/auth/PhoneInput.tsx b/packages/sdk-react/src/components/auth/PhoneInput.tsx index 1cb84b0c4..7aa1c5c28 100644 --- a/packages/sdk-react/src/components/auth/PhoneInput.tsx +++ b/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"]; diff --git a/packages/sdk-react/src/index.ts b/packages/sdk-react/src/index.ts index a9c1b54c5..524d933ef 100644 --- a/packages/sdk-react/src/index.ts +++ b/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"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5640a20fa..686000940 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1855,6 +1855,9 @@ importers: '@turnkey/wallet-stamper': specifier: workspace:* version: link:../wallet-stamper + '@types/react': + specifier: ^18.2.75 + version: 18.2.75 libphonenumber-js: specifier: ^1.11.14 version: 1.11.14 @@ -1871,9 +1874,9 @@ importers: specifier: ^3.1.0 version: 3.1.0(react@18.2.0) devDependencies: - '@types/react': - specifier: ^18.2.75 - version: 18.2.75 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.38) react: specifier: ^18.2.0 version: 18.2.0 @@ -13020,6 +13023,7 @@ packages: dependencies: '@types/prop-types': 15.7.5 csstype: 3.1.2 + dev: false /@types/react@18.3.3: resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} @@ -21593,6 +21597,18 @@ packages: read-cache: 1.0.0 resolve: 1.22.8 + /postcss-import@16.1.0(postcss@8.4.38): + resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==} + engines: {node: '>=18.0.0'} + peerDependencies: + postcss: ^8.0.0 + dependencies: + postcss: 8.4.38 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.8 + dev: true + /postcss-js@4.0.1(postcss@8.4.38): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16}