vite build --mode=production react 'xx is not a function' error

[johnzhu123]

development mode

production mode

I got a react+ antd component lib, which used vite to build, in develop build mode, all works fine.

but in production mode, the above error will occur when I use the lib in my project.

it seems like jsx or react.createElement hasn't been bundled into the final index.js

the vite.config.ts for my common lib looks like this

import { defineConfig } from 'vite'
import path from 'path'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'
import dts from 'vite-plugin-dts'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  return {
    esbuild: {
      pure: ['console.log'],
    },
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src'),
      },
    },
    plugins: [
      react(),
      svgr(),
      dts({
        include: ['src/**/*'],
      }),
    ],
    build: {
      lib: {
        entry: 'src/index.ts', // entry
        name: 'common-rc-lib', // bundle name
        fileName: (format) => `common-rc-lib.${format}.js`, // built file name
      },
      sourcemap: true,
      rollupOptions: {
        // those were packages not built into bundle
        external: ['react', 'react/jsx-runtime', 'antd'],
        output: {
          // In UMD mode, need to create global virables for these
          globals: {
            react: 'react',
            antd: 'antd',
          },
        },
      },
    },
  }
})

I make the react external cause in my project, it has react, antd and other modules

any things I did wrong?

my project's package.json

{
  "name": "xxxx",
  "private": true,
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite --force",
    "build": "tsc && vite build",
    "preview": "vite preview",
    "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore",
    "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
    "lint": "npm run lint:format && npm run lint:fix "
  },
  "dependencies": {
    "@ant-design/icons": "^5.1.4",
    "@azure/msal-browser": "^2.34.0",
    "@azure/msal-react": "^1.5.4",
    "@maersk-global/telemetry-web-sdk": "^2.0.6",
    "@maersk-global/air-lcl-logistics-common-rc-func": "^0.0.2",            // !this is my library
    "@textea/json-viewer": "^2.13.1",
    "antd": "^5.3.0",
    "axios": "^1.2.1",
    "bizcharts": "^4.1.22",
    "dayjs": "^1.11.7",
    "lodash-es": "^4.17.21",
    "react": "^18.2.0",
    "react-data-grid": "^7.0.0-beta.28",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.4.4",
    "uuid": "^9.0.0"
  },
  "devDependencies": {
    "@types/lodash-es": "^4.17.8",
    "@types/node": "^18.11.10",
    "@types/react": "^18.2.14",
    "@types/react-dom": "^18.0.8",
    "@types/uuid": "^9.0.3",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "@vitejs/plugin-react": "^2.2.0",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.11",
    "husky": "^8.0.3",
    "pre-commit": "^1.2.2",
    "prettier": "^2.8.0",
    "sass": "^1.56.1",
    "typescript": "^4.6.4",
    "vite": "^3.2.3",
    "vite-plugin-svgr": "^2.4.0"
  },
  "pre-commit": "lint"
}

my project's vite.config.ts

import { defineConfig } from 'vite'
import path from 'path'
import react from '@vitejs/plugin-react'
import svgr from 'vite-plugin-svgr'

// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {
  return {
    esbuild: {
      pure: ['console.log'],
    },
    resolve: {
      alias: {
        '@': path.join(__dirname, 'src'),
      },
    },
    plugins: [react(), svgr()],
    build: {
      sourcemap: true,
    },
    define: {
      'process.env.RUM_API_KEY': JSON.stringify(process.env.RUM_API_KEY),
    },
  }
})

[Shyam-Chen]

    lib: {
+     formats: ['es'],
    },

[johnzhu123]

this will only compile and output the .es.js as I know.
by default, it will output .es.js and .umd.js, but I only include the .es.js file in my project.

the package.json for my react components library

{
  "name": "@maersk-global/air-lcl-logistics-common-rc-func",
  "version": "0.0.4",
  "type": "module",
  "description": "common react components",
  "main": "./dist/common-rc-lib.umd.js",
  "module": "./dist/common-rc-lib.es.js",
  "types": "./dist/index.d.ts",
  "files": [
    "dist"
  ],
  "exports": {
    ".": {
      "import": "./dist/common-rc-lib.es.js",
      "require": "./dist/common-rc-lib.umd.js"
    },
    "./dist/style.css": "./dist/style.css"
  },
  "scripts": {
    "dev": "vite",
    "build-dev": "export NODE_OPTIONS=--max-old-space-size=32768 && tsc && vite build --mode development",
    "build-staging": "export NODE_OPTIONS=--max-old-space-size=32768 && tsc && vite build --mode staging",
    "build": "export NODE_OPTIONS=--max-old-space-size=32768 && tsc && vite build",
    "preview": "vite preview",
    "lint:fix": "eslint ./src --ext .jsx,.js,.ts,.tsx --quiet --fix --ignore-path ./.gitignore",
    "lint:format": "prettier  --loglevel warn --write \"./**/*.{js,jsx,ts,tsx,css,md,json}\" ",
    "lint": "npm run lint:format && npm run lint:fix "
  },
  "dependencies": {},
  "peerDependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@ant-design/icons": "^5.1.4",
    "@types/react": "^18.2.14",
    "@types/lodash-es": "^4.17.8",
    "@types/uuid": "^9.0.3",
    "antd": "^5.3.0",
    "dayjs": "^1.11.7",
    "lodash-es": "^4.17.21",
    "uuid": "^9.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "@types/react-dom": "^18.2.7",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "@vitejs/plugin-react": "^2.2.0",
    "eslint": "^8.28.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.31.11",
    "husky": "^8.0.3",
    "pre-commit": "^1.2.2",
    "prettier": "^2.8.0",
    "sass": "^1.56.1",
    "typescript": "^4.6.4",
    "vite": "^3.2.3",
    "vite-plugin-dts": "^3.5.4",
    "vite-plugin-svgr": "^2.4.0"
  },
  "pre-commit": "lint",
  "repository": {
    "type": "git",
    "url": "..."
  },
  "keywords": [],
  "author": "johnzhu123",
  "bugs": {
    "url": "..."
  },
  "homepage": "...",
  "license": "MIT"
}

[johnzhu123]

I'll have a try, did it mean in production mode , cause the main property in package.json , it actually included the .umd.js file?

[johnzhu123]

not working

[johnzhu123]

all right, the build script for my component lib is mis-configurated. it was built in development mode

[dinesh-git07]

could you share the correct configuration please?

[mastrix]

I think @johnzhu123 meant that the lib (package) was built in dev mode "@maersk-global/air-lcl-logistics-common-rc-func", so when he built the app in production mode, some dev dependencies were dropped, and the lib didn't have them and failed.