fix: React-Native package exports

examples/publish-ci/node-esm/package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "echo Done",
-    "test": "node test-cjs.cjs && node test-esm.mjs"
+    "test": "node --no-experimental-require-module test-cjs.cjs && node test-esm.mjs"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.0.0-rc.3",

examples/publish-ci/node-standard/package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "build": "echo Done",
-    "test": "node test-cjs.js && node test-esm.mjs"
+    "test": "node --no-experimental-require-module test-cjs.js && node test-esm.mjs"
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.0.0-rc.3",

packages/rtk-query-codegen-openapi/package.json

@@ -68,7 +68,7 @@
     "pretty-quick": "^4.0.0",
     "rimraf": "^5.0.5",
     "ts-node": "^10.9.2",
-    "tsup": "^8.2.4",
+    "tsup": "^8.4.0",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.0.5",
     "yalc": "^1.0.0-pre.47"

packages/toolkit/package.json

@@ -25,27 +25,137 @@
   "module": "dist/redux-toolkit.legacy-esm.js",
   "main": "dist/cjs/index.js",
   "types": "dist/index.d.ts",
+  "react-native": "dist/redux-toolkit.legacy-esm.js",
+  "unpkg": "dist/redux-toolkit.browser.mjs",
   "exports": {
     "./package.json": "./package.json",
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/redux-toolkit.modern.mjs",
-      "default": "./dist/cjs/index.js"
+      "module-sync": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/redux-toolkit.modern.mjs"
+      },
+      "module": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/redux-toolkit.modern.mjs"
+      },
+      "react-native": {
+        "import": {
+          "types": "./dist/index.d.mts",
+          "default": "./dist/redux-toolkit.modern.mjs"
+        },
+        "default": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/cjs/index.js"
+        }
+      },
+      "browser": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/redux-toolkit.browser.mjs"
+      },
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/redux-toolkit.modern.mjs"
+      },
+      "default": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
     },
     "./react": {
-      "types": "./dist/react/index.d.ts",
-      "import": "./dist/react/redux-toolkit-react.modern.mjs",
-      "default": "./dist/react/cjs/index.js"
+      "module-sync": {
+        "types": "./dist/react/index.d.mts",
+        "default": "./dist/react/redux-toolkit-react.modern.mjs"
+      },
+      "module": {
+        "types": "./dist/react/index.d.mts",
+        "default": "./dist/react/redux-toolkit-react.modern.mjs"
+      },
+      "react-native": {
+        "import": {
+          "types": "./dist/react/index.d.mts",
+          "default": "./dist/react/redux-toolkit-react.modern.mjs"
+        },
+        "default": {
+          "types": "./dist/react/index.d.ts",
+          "default": "./dist/react/cjs/index.js"
+        }
+      },
+      "browser": {
+        "types": "./dist/react/index.d.mts",
+        "default": "./dist/react/redux-toolkit-react.browser.mjs"
+      },
+      "import": {
+        "types": "./dist/react/index.d.mts",
+        "default": "./dist/react/redux-toolkit-react.modern.mjs"
+      },
+      "default": {
+        "types": "./dist/react/index.d.ts",
+        "default": "./dist/react/cjs/index.js"
+      }
     },
     "./query": {
-      "types": "./dist/query/index.d.ts",
-      "import": "./dist/query/rtk-query.modern.mjs",
-      "default": "./dist/query/cjs/index.js"
+      "module-sync": {
+        "types": "./dist/query/index.d.mts",
+        "default": "./dist/query/rtk-query.modern.mjs"
+      },
+      "module": {
+        "types": "./dist/query/index.d.mts",
+        "default": "./dist/query/rtk-query.modern.mjs"
+      },
+      "react-native": {
+        "import": {
+          "types": "./dist/query/index.d.mts",
+          "default": "./dist/query/rtk-query.modern.mjs"
+        },
+        "default": {
+          "types": "./dist/query/index.d.ts",
+          "default": "./dist/query/cjs/index.js"
+        }
+      },
+      "browser": {
+        "types": "./dist/query/index.d.mts",
+        "default": "./dist/query/rtk-query.browser.mjs"
+      },
+      "import": {
+        "types": "./dist/query/index.d.mts",
+        "default": "./dist/query/rtk-query.modern.mjs"
+      },
+      "default": {
+        "types": "./dist/query/index.d.ts",
+        "default": "./dist/query/cjs/index.js"
+      }
     },
     "./query/react": {
-      "types": "./dist/query/react/index.d.ts",
-      "import": "./dist/query/react/rtk-query-react.modern.mjs",
-      "default": "./dist/query/react/cjs/index.js"
+      "module-sync": {
+        "types": "./dist/query/react/index.d.mts",
+        "default": "./dist/query/react/rtk-query-react.modern.mjs"
+      },
+      "module": {
+        "types": "./dist/query/react/index.d.mts",
+        "default": "./dist/query/react/rtk-query-react.modern.mjs"
+      },
+      "react-native": {
+        "import": {
+          "types": "./dist/query/react/index.d.mts",
+          "default": "./dist/query/react/rtk-query-react.modern.mjs"
+        },
+        "default": {
+          "types": "./dist/query/react/index.d.ts",
+          "default": "./dist/query/react/cjs/index.js"
+        }
+      },
+      "browser": {
+        "types": "./dist/query/react/index.d.mts",
+        "default": "./dist/query/react/rtk-query-react.browser.mjs"
+      },
+      "import": {
+        "types": "./dist/query/react/index.d.mts",
+        "default": "./dist/query/react/rtk-query-react.modern.mjs"
+      },
+      "default": {
+        "types": "./dist/query/react/index.d.ts",
+        "default": "./dist/query/react/cjs/index.js"
+      }
     }
   },
   "devDependencies": {
@@ -96,7 +206,7 @@
     "rimraf": "^3.0.2",
     "size-limit": "^11.0.1",
     "tslib": "^1.10.0",
-    "tsup": "^8.2.3",
+    "tsup": "^8.4.0",
     "tsx": "^4.19.0",
     "typescript": "^5.8.2",
     "valibot": "^1.0.0",
@@ -106,7 +216,7 @@
   },
   "scripts": {
     "clean": "rimraf dist",
-    "run-build": "tsup",
+    "run-build": "tsup --config=$INIT_CWD/tsup.config.mts",
     "build": "yarn clean && yarn run-build && tsx scripts/fixUniqueSymbolExports.mts",
     "build-only": "yarn clean && yarn run-build",
     "format": "prettier --write \"(src|examples)/**/*.{ts,tsx}\" \"**/*.md\"",

packages/toolkit/query/package.json

@@ -4,16 +4,9 @@
   "description": "",
   "type": "module",
   "module": "../dist/query/rtk-query.legacy-esm.js",
-  "main": "../dist/query/cjs/index.js",
+  "main": "./../dist/query/rtk-query.modern.mjs",
   "types": "./../dist/query/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./../dist/query/index.d.ts",
-      "import": "./../dist/query/rtk-query.modern.mjs",
-      "default": "./../dist/query/cjs/index.js"
-    }
-  },
+  "react-native": "./../dist/query/rtk-query.modern.mjs",
   "author": "Mark Erikson <[email protected]>",
   "license": "MIT",
   "sideEffects": false

packages/toolkit/query/react/package.json

@@ -4,16 +4,9 @@
   "description": "",
   "type": "module",
   "module": "../../dist/query/react/rtk-query-react.legacy-esm.js",
-  "main": "../../dist/query/react/cjs/index.js",
+  "main": "./../../dist/query/react/rtk-query-react.modern.mjs",
   "types": "./../../dist/query/react/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./../../dist/query/react/index.d.ts",
-      "import": "./../../dist/query/react/rtk-query-react.modern.mjs",
-      "default": "./../../dist/query/react/cjs/index.js"
-    }
-  },
+  "react-native": "./../../dist/query/react/rtk-query-react.modern.mjs",
   "author": "Mark Erikson <[email protected]>",
   "license": "MIT",
   "sideEffects": false

packages/toolkit/react/package.json

@@ -4,16 +4,9 @@
   "description": "",
   "type": "module",
   "module": "../dist/react/redux-toolkit-react.legacy-esm.js",
-  "main": "../dist/react/cjs/index.js",
+  "main": "./../dist/react/redux-toolkit-react.modern.mjs",
   "types": "./../dist/react/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "types": "./../dist/react/index.d.ts",
-      "import": "./../dist/react/redux-toolkit-react.modern.mjs",
-      "default": "./../dist/react/cjs/index.js"
-    }
-  },
+  "react-native": "./../dist/react/redux-toolkit-react.modern.mjs",
   "author": "Mark Erikson <[email protected]>",
   "license": "MIT",
   "sideEffects": false

packages/toolkit/scripts/fixUniqueSymbolExports.mts

@@ -1,22 +1,23 @@
 #!/usr/bin/env node --import=tsx
 
-import fs from 'node:fs/promises'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-const __dirname = fileURLToPath(new URL('.', import.meta.url))
+import * as fs from 'node:fs/promises'
+import * as path from 'node:path'
 
 const entryPointDirectories = ['', 'react', 'query', 'query/react']
 
-const typeDefinitionEntryFiles = entryPointDirectories.map((filePath) =>
-  path.resolve(__dirname, '..', 'dist', filePath, 'index.d.ts'),
+const typeDefinitionEntryFiles = entryPointDirectories.flatMap(
+  (filePath) =>
+    [
+      path.join(import.meta.dirname, '..', 'dist', filePath, 'index.d.ts'),
+      path.join(import.meta.dirname, '..', 'dist', filePath, 'index.d.mts'),
+    ] as const,
 )
 
 const filePathsToContentMap = new Map<string, string>(
   await Promise.all(
     typeDefinitionEntryFiles.map(
       async (filePath) =>
-        [filePath, await fs.readFile(filePath, 'utf-8')] as const,
+        [filePath, await fs.readFile(filePath, { encoding: 'utf-8' })] as const,
     ),
   ),
 )
@@ -30,8 +31,8 @@ const main = async () => {
     const lines = content.split('\n')
 
     const allUniqueSymbols = lines
-      .filter((line) => /declare const (\w+)\: unique symbol;/.test(line))
-      .map((line) => line.match(/declare const (\w+)\: unique symbol;/)?.[1])
+      .filter((line) => /declare const (\w+): unique symbol;/.test(line))
+      .map((line) => line.match(/declare const (\w+): unique symbol;/)?.[1])
 
     if (allUniqueSymbols.length === 0) {
       console.log(`${filePath} does not have any unique symbols.`)
@@ -69,8 +70,8 @@ const main = async () => {
       )
     })
 
-    await fs.writeFile(filePath, newContent)
+    await fs.writeFile(filePath, newContent, { encoding: 'utf-8' })
   })
 }
 
-main()
+void main()

packages/toolkit/tsup.config.mts

@@ -0,0 +1,252 @@
+import * as babel from '@babel/core'
+import type { Plugin } from 'esbuild'
+import { getBuildExtensions } from 'esbuild-extra'
+import fs from 'node:fs/promises'
+import path from 'node:path'
+import type { Options as TsupOptions } from 'tsup'
+import { defineConfig } from 'tsup'
+import type { MangleErrorsPluginOptions } from './scripts/mangleErrors.mjs'
+import { mangleErrorsPlugin } from './scripts/mangleErrors.mjs'
+
+const outputDir = path.join(import.meta.dirname, 'dist')
+
+async function writeCommonJSEntry(folder: string, prefix: string) {
+  await fs.writeFile(
+    path.join(folder, 'index.js'),
+    `'use strict'
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./${prefix}.production.min.cjs')
+} else {
+  module.exports = require('./${prefix}.development.cjs')
+}`,
+    { encoding: 'utf-8' },
+  )
+}
+
+// Extract error strings, replace them with error codes, and write messages to a file
+const mangleErrorsTransform: Plugin = {
+  name: mangleErrorsPlugin.name,
+  setup(build) {
+    const { onTransform } = getBuildExtensions(build, mangleErrorsPlugin.name)
+
+    onTransform({ loaders: ['ts', 'tsx'] }, async (args) => {
+      try {
+        const res = await babel.transformAsync(args.code, {
+          parserOpts: {
+            plugins: ['typescript', 'jsx'],
+          },
+          plugins: [
+            [
+              mangleErrorsPlugin,
+              { minify: false } satisfies MangleErrorsPluginOptions,
+            ],
+          ],
+        })
+
+        if (res == null) {
+          throw new Error('Babel transformAsync returned null')
+        }
+
+        return {
+          code: res.code!,
+          map: res.map!,
+        }
+      } catch (err) {
+        console.error('Babel mangleErrors error: ', err)
+        return null
+      }
+    })
+  },
+}
+
+export default defineConfig((overrideOptions): TsupOptions[] => {
+  const commonOptions = {
+    splitting: false,
+    sourcemap: true,
+    tsconfig: path.join(import.meta.dirname, 'tsconfig.build.json'),
+    external: [
+      'redux',
+      'react',
+      'react-redux',
+      'immer',
+      'redux-thunk',
+      'reselect',
+      '@reduxjs/toolkit',
+    ],
+    esbuildPlugins: [mangleErrorsTransform],
+    format: ['cjs', 'esm'],
+    target: ['esnext'],
+    ...overrideOptions,
+  } satisfies TsupOptions
+
+  return [
+    {
+      ...commonOptions,
+      name: 'Redux-Toolkit-ESM',
+      entry: {
+        'redux-toolkit.modern': 'src/index.ts',
+        'react/redux-toolkit-react.modern': 'src/react/index.ts',
+        'query/rtk-query.modern': 'src/query/index.ts',
+        'query/react/rtk-query-react.modern': 'src/query/react/index.ts',
+      },
+      outExtension: () => ({ js: '.mjs' }),
+      format: ['esm'],
+    },
+
+    {
+      ...commonOptions,
+      name: 'Redux-Toolkit-CJS-Development',
+      entry: {
+        'cjs/redux-toolkit.development': 'src/index.ts',
+        'react/cjs/redux-toolkit-react.development': 'src/react/index.ts',
+        'query/cjs/rtk-query.development': 'src/query/index.ts',
+        'query/react/cjs/rtk-query-react.development':
+          'src/query/react/index.ts',
+      },
+      outExtension: () => ({ js: '.cjs' }),
+      env: {
+        NODE_ENV: 'development',
+      },
+      format: ['cjs'],
+    },
+
+    {
+      ...commonOptions,
+      name: 'Redux-Toolkit-CJS-Production',
+      entry: {
+        'cjs/redux-toolkit.production.min': 'src/index.ts',
+        'react/cjs/redux-toolkit-react.production.min': 'src/react/index.ts',
+        'query/cjs/rtk-query.production.min': 'src/query/index.ts',
+        'query/react/cjs/rtk-query-react.production.min':
+          'src/query/react/index.ts',
+      },
+      outExtension: () => ({ js: '.cjs' }),
+      env: {
+        NODE_ENV: 'production',
+      },
+      minify: true,
+      replaceNodeEnv: true,
+      format: ['cjs'],
+      onSuccess: async () => {
+        await writeCommonJSEntry(
+          path.join(import.meta.dirname, 'dist', 'cjs'),
+          'redux-toolkit',
+        )
+
+        await writeCommonJSEntry(
+          path.join(import.meta.dirname, 'dist', 'react', 'cjs'),
+          'redux-toolkit-react',
+        )
+
+        await writeCommonJSEntry(
+          path.join(import.meta.dirname, 'dist', 'query', 'cjs'),
+          'rtk-query',
+        )
+
+        await writeCommonJSEntry(
+          path.join(import.meta.dirname, 'dist', 'query', 'react', 'cjs'),
+          'rtk-query-react',
+        )
+      },
+    },
+
+    {
+      ...commonOptions,
+      name: 'Redux-Toolkit-Browser',
+      entry: {
+        'redux-toolkit.browser': 'src/index.ts',
+        'react/redux-toolkit-react.browser': 'src/react/index.ts',
+        'query/rtk-query.browser': 'src/query/index.ts',
+        'query/react/rtk-query-react.browser': 'src/query/react/index.ts',
+      },
+      outExtension: () => ({ js: '.mjs' }),
+      platform: 'browser',
+      env: {
+        NODE_ENV: 'production',
+      },
+      minify: true,
+      define: {
+        process: 'undefined',
+      },
+      replaceNodeEnv: true,
+      format: ['esm'],
+    },
+
+    {
+      ...commonOptions,
+      name: 'Redux-Toolkit-Legacy-ESM',
+      entry: {
+        'redux-toolkit.legacy-esm': 'src/index.ts',
+        'react/redux-toolkit-react.legacy-esm': 'src/react/index.ts',
+        'query/rtk-query.legacy-esm': 'src/query/index.ts',
+        'query/react/rtk-query-react.legacy-esm': 'src/query/react/index.ts',
+      },
+      outExtension: () => ({ js: '.js' }),
+      format: ['esm'],
+      target: ['es2017'],
+      onSuccess: async () => {
+        await fs.copyFile(
+          path.join(import.meta.dirname, 'src', 'uncheckedindexed.ts'),
+          path.join(outputDir, 'uncheckedindexed.ts'),
+        )
+      },
+    },
+
+    {
+      ...commonOptions,
+      name: 'Redux-Toolkit-Type-Definitions',
+      entry: {
+        index: 'src/index.ts',
+      },
+      dts: {
+        only: true,
+      },
+      external: [/uncheckedindexed/],
+    },
+
+    {
+      ...commonOptions,
+      name: 'RTK-React-Type-Definitions',
+      entry: {
+        'react/index': 'src/react/index.ts',
+      },
+      dts: {
+        only: true,
+      },
+      external: ['@reduxjs/toolkit', /uncheckedindexed/],
+    },
+
+    {
+      ...commonOptions,
+      name: 'RTK-Query-Type-Definitions',
+      entry: {
+        'query/index': 'src/query/index.ts',
+      },
+      dts: {
+        only: true,
+      },
+      external: [
+        '@reduxjs/toolkit',
+        '@reduxjs/toolkit/react',
+        /uncheckedindexed/,
+      ],
+    },
+
+    {
+      ...commonOptions,
+      name: 'RTK-Query-React-Type-Definitions',
+      entry: {
+        'query/react/index': 'src/query/react/index.ts',
+      },
+      dts: {
+        only: true,
+      },
+      external: [
+        '@reduxjs/toolkit',
+        '@reduxjs/toolkit/react',
+        '@reduxjs/toolkit/query',
+        /uncheckedindexed/,
+      ],
+    },
+  ]
+})