Zustand module bundling problems

Hey, I am building private modules for an application, which are shared through workspaces. When using the build library in my ejected react-app i run into difficulties. Something with the default export of zustand’s create method is not working with my rollup/create-react-app configurations. I have no clue if this error is produced by zustand or rollup or CRA/webpack. Any help is appreciated.

The error:

The typescript source file which must be bundled (lib/src/stores.ts):

import { KitaModel } from "../utils/apiModels";
import create from "zustand";

export class Kita {...}
export interface KitaStore {...}
export const useKitaStore = create<KitaStore>((set) => ({...}));

The resulting type declarations (lib/dist/stores.d.ts):

import { KitaModel } from "../utils/apiModels";

export declare class Kita {...}
export interface KitaStore {...}
export declare const useKitaStore: import("zustand").UseStore<KitaStore>;

The rollup config (lib/rollup.config.js):

import pkg from './package.json';
import resolve from '@rollup/plugin-node-resolve';
import { terser } from 'rollup-plugin-terser';
import typescript from 'rollup-plugin-typescript2';

export default {
	preserveSymlinks: true,
	input: 'src/index.ts',
	output: [{
		format: 'esm',
		file: pkg.module,
		sourcemap: false,
	}, {
		format: 'cjs',
		file: pkg.main,
		sourcemap: false,
	},
	{
		name: pkg['umd:name'] || pkg.name,
		format: 'umd',
		file: pkg.unpkg,
		sourcemap: false,
		plugins: [
			terser()
		],
	}],
	external: [
		...require('module').builtinModules,
		...Object.keys(pkg.dependencies || {}),
		...Object.keys(pkg.peerDependencies || {}),
	],
	plugins: [
		resolve(),
		typescript()
	]
}

The ts config (lib/tsconfig.json)

{
  "compilerOptions": {
    /* Basic Options */
    "target": "es6",                                /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', 'ES2021', or 'ESNEXT'. */
    "module": "es6",                           /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */                          /* Report errors in .js files. */
    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', 'react', 'react-jsx' or 'react-jsxdev'. */
    "declaration": true,                         /* Generates corresponding '.d.ts' file. */
    "sourceMap": true,                           /* Generates corresponding '.map' file. */
    "outDir": "./dist",                              /* Redirect output structure to the directory. */
    "rootDir": "./",                             /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
    /* Strict Type-Checking Options */
    "strict": true,                                 /* Enable all strict type-checking options. */
    "noImplicitAny": true,                       /* Raise error on expressions and declarations with an implied 'any' type. */
    "alwaysStrict": true,                        /* Parse in strict mode and emit "use strict" for each source file. */
    /* Module Resolution Options */
    "moduleResolution": "node",                  /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
    "baseUrl": "./",                             /* Base directory to resolve non-absolute module names. */
    "esModuleInterop": true,                        /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
    /* Advanced Options */
    "skipLibCheck": true,                           /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true        /* Disallow inconsistently-cased references to the same file. */
  },
  "include": ["src/*", "@types/*"],
  "exclude": ["node_modules"]
}

The package.json (lib/package.json)

{
  "version": "1.0.0",
  "description": "private shared utility library",
  "module": "dist/index.mjs",
  "unpkg": "dist/index.min.js",
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx rollup -c"
  },
  "exports": {
    ".": {
      "import": "./dist/index.mjs",
      "require": "./dist/index.js"
    },
    "./package.json": "./package.json"
  },
  "keywords": [],
  "license": "ISC",
  "dependencies": {
    "@types/node": "^15.12.4",
    "axios": "^0.21.1",
    "typescript": "^4.3.4",
    "zustand": "^3.5.4"
  },
  "devDependencies": {
    "@rollup/plugin-node-resolve": "8.1.0",
    "rollup": "2.21.0",
    "rollup-plugin-terser": "6.1.0",
    "rollup-plugin-typescript2": "0.27.1"
  }
}

The imports/exports in my dist bundle (lib/dist/index.m.js):

...
import create from 'zustand';
...
export { ..., useKitaStore };
```

[barelyhuman]

As for why this works and while you can force esm by changing the above to javascript/esm it’ll fail since React doesn’t support esm and so you get issues like below

../lib/dist/index.mjs
Can't import the named export 'useEffect' from non EcmaScript module (only default export is available)

You can use esm react replacements like https://www.npmjs.com/package/@pika/react and https://www.npmjs.com/package/@pika/react-dom but this is the simplest way out right now.

Hope that helps

[barelyhuman]

@jorekai yeah that was helpful, when you said ejected app I though you had something like a custom setup like rewired, I failed to take the basic approach of the default ejected cra…

the solution to your problem isn’t with zustand but we ended up fixing zustand anyway so the next line will help you.

add the bottom object to your webpack.config.js under the rules array:

{
  type: "javascript/auto",
  test: /\.mjs$/,
  use: [],
},