Module not found: Error: Default condition should be last one

Question

I have write a public lib(react+typescript) called rd-component, the newest version is 0.1.6, then using the component like this:

import './App.css';
import React from 'react';
import { CommonPage} from "rd-component";

const Chat: React.FC = () => {

  return (<CommonPage></CommonPage>);
}

export default Chat;

the index.tsx like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import Chat from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <Chat />
  </React.StrictMode>
);

reportWebVitals();

this is the package.json:

{
  "name": "react-demo",
  "version": "0.1.0",
  "private": true,
  "config-overrides-path": "src/config/config-overrides.js",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@textea/json-viewer": "^2.16.2",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.21",
    "@types/react": "^18.0.30",
    "@types/react-dom": "^18.0.11",
    "antd": "^5.4.0",
    "prismjs": "^1.29.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "react-syntax-highlighter": "^15.5.0",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4",
    "rd-component": "0.1.6"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@types/react-syntax-highlighter": "^15.5.6",
    "customize-cra": "^1.0.0",
    "react-app-rewired": "^2.2.1"
  }
}

then I build this app, shows error like this:

> npm run build

> [email protected] build
> react-scripts build

Creating an optimized production build...
Failed to compile.

Module not found: Error: Default condition should be last one

am I missing something? what should I do to fixed this issue?

Answer 1

Finally I found that when I using microbundle to build a lib, we should put the "default": "./dist/rdc.modern.js" to the last. this is the legacy config of exports:

"exports": {
        "require": "./dist/rdc.cjs",
        "default": "./dist/rdc.modern.js",
        "types": "./dist/rdc.d.ts"
        
    },

when change the default to the last like this:

"exports": {
        "require": "./dist/rdc.cjs",
        "types": "./dist/rdc.d.ts",
        "default": "./dist/rdc.modern.js"
    },

issue solved.