🐛[BUG]: Getting Uncaught TypeError: Cannot read properties of undefined (reading 'Option')

[jalopez526]

🐛 bug 描述

When running npm run serve I'm getting this error:

App works well when ran with npm start this only happes serving assets generated with npm run build

package.json:

{
  "version": "0.0.0",
  "dependencies": {
    "@ant-design/icons": "^4.6.4",
    "@ant-design/pro-card": "^1.14.22",
    "@ant-design/pro-descriptions": "^1.9.19",
    "@ant-design/pro-form": "^1.42.1",
    "@ant-design/pro-layout": "^6.26.0",
    "@ant-design/pro-list": "^1.14.5",
    "@ant-design/pro-skeleton": "^1.0.1",
    "@ant-design/pro-table": "^2.54.4",
    "antd": "^4.16.13",
    "antd-mask-input": "^0.1.15",
    "axios": "^0.21.4",
    "less": "^4.1.1",
    "lint-staged": "10.5.4",
    "node-sass": "^6.0.1",
    "react": "^17.0.0",
    "react-dom": "^17.0.0",
    "react-jwt": "^1.1.3",
    "react-router-dom": "^5.3.0",
    "sass-loader": "^12.1.0",
    "typescript": "^4.4.3"
  },
  "scripts": {
    "start": "vite",
    "build": "tsc && vite build",
    "serve": "vite preview",
    "format": "prettier --write src/**/*.ts{,x}",
    "lint": "tsc --noEmit && eslint src/**/*.ts{,x}",
    "lint:fix": "tsc --noEmit && eslint src/**/*.ts{,x} --fix"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "yarn format"    ]
  },
  "devDependencies": {
    "@types/axios": "^0.14.0",
    "@vitejs/plugin-react-refresh": "^1.3.6",
    "umi-plugin-react": "^1.15.8",
    "vite": "^2.5.10",
    "vite-plugin-imp": "^2.0.9",
    "@typescript-eslint/eslint-plugin": "^4.28.1",
    "@typescript-eslint/parser": "^4.28.1",
    "eslint": "^7.29.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.23.4",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.24.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^4.3.8",
    "prettier": "^2.3.2"
  }
}

vite.config.ts:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import vitePluginImp from "vite-plugin-imp"

// https://vitejs.dev/config/
export default defineConfig({
  build: {
    chunkSizeWarningLimit: 1500,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules'))  return id.toString().split('node_modules/')[1].split('/')[0].toString();
        }
      }
    }
  },

  //Resolver problema con less
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },
  resolve: {
    alias: [
      { find: /^~/, replacement: "" },
    ],
  },
  plugins: [
    reactRefresh(),
    vitePluginImp({
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    }),
  ],
})

tsconfig.json

{
    "compilerOptions": {
        "target": "ESNext",
        "useDefineForClassFields": true,
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ESNext"
        ],
        "allowJs": false,
        "skipLibCheck": false,
        "esModuleInterop": false,
        "allowSyntheticDefaultImports": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "noEmit": true,
        "jsx": "react-jsx"
    },
    "include": [
        "./src"
    ],
}

[chenshuai2144]

This is a simple data access problem. See if your interface data is empty

[jalopez526]

It works finewith webpack? Not sure what do I need to check. Seems like the component is being undefined when trying to use it's props.