admin 管理员组

文章数量: 1086019

I'm working on updating a large React application ("webapp-front-end") by creating a new module-based redesign. The idea is to gradually migrate and refactor the UI using TypeScript. The new redesign application is built with Vite and exports screens as modules along with their necessary providers. However, when I import these modules into my main project (which is built with Create React App), the React hooks (e.g., useState and useContext) seem to stop working.

Error screenshot

Here are some details:

Main application (webapp-front-end)

package.json:

{
  "name": "webapp-front-end",
  "version": "3.07.0",
  "private": true,
  "dependencies": {
    "@amcharts/amcharts4": "^4.10.39",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/plugin-transform-react-jsx": "^7.25.2",
    "@emotion/react": "^11.13.0",
    "@emotion/styled": "^11.13.0",
    "@mui/icons-material": "^5.16.6",
    "@mui/material": "^5.16.6",
    "@mui/x-data-grid": "^7.11.1",
    "@mui/x-date-pickers": "/mui/mui-x/commit/b12bff5a/@mui/x-date-pickers",
    "@redux-devtools/extension": "^3.3.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.7.4",
    "axios-mock-adapter": "^2.0.0",
    "caniuse-lite": "^1.0.30001649",
    "chalk": "^4.1.2",
    "date-fns": "^2.28.0",
    "dotenv": "^16.4.5",
    "eslint-config-airbnb-base": "^15.0.0",
    "history": "^5.3.0",
    "husky": "^9.1.4",
    "jwt-decode": "^4.0.0",
    "moment": "^2.30.1",
    "nth-check": "^2.0.1",
    "os-browserify": "^0.3.0",
    "pagseguro-react": "^1.0.10",
    "path-browserify": "^1.0.1",
    "postcss": "^8.4.41",
    "prop-types": "^15.8.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-drag-drop-files": "^2.3.10",
    "react-redux": "^9.1.2",
    "react-router-dom": "^6.25.1",
    "react-scripts": "5.0.1",
    "redesign-web-app": "link:..\\redesign-web-app",
    "redux": "^5.0.1",
    "redux-thunk": "^3.1.0",
    "semver": "^7.6.3",
    "serialize-javascript": "^6.0.2",
    "validate.js": "^0.13.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test:coverage": "jest --env=jsdom --colors --coverage",
    "test:watch": "jest --watch",
    "test": "jest",
    "test:snapshot:update": "jest -u",
    "eject": "react-scripts eject",
    "lint": "eslint src/",
    "lint:fix": "eslint --fix src/redux/store/actions/tests/**",
    "prepare": "husky"
  },
  "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"
    ]
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "devDependencies": {
    "@babel/core": "^7.25.2",
    "@babel/preset-env": "^7.25.3",
    "@babel/preset-react": "^7.24.7",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/react": "^16.0.0",
    "@types/react-test-renderer": "^18.3.0",
    "@types/redux-mock-store": "^1.0.6",
    "@types/redux-thunk": "^2.1.0",
    "babel-jest": "^29.7.0",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.28.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "prettier": "^3.3.3",
    "react-test-renderer": "^18.3.1",
    "redux-mock-store": "^1.5.4",
    "uuid": "^10.0.0"
  }
}

Redesign (Vite project) package.json:

{
  "name": "redesign-web-app",
  "description": "Postaqui lib",
  "private": false,
  "version": "3.07.0",
  "main": "./dist/redesign-web-app.umd.js",
  "module": "./dist/redesign-web-app.es.js",
  "types": "./dist/src/index.d.ts",
  "type": "module",
  "files": [
    "dist"
  ],
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview",
    "test": "vitest"
  },
  "dependencies": {
    "@hookform/resolvers": "3.10.0",
    "@tanstack/react-table": "8.21.2",
    "axios": "1.7.9",
    "jwt-decode": "4.0.0",
    "lodash": "4.17.21",
    "react-datepicker": "8.2.1",
    "react-hook-form": "7.54.2",
    "react-modal": "3.16.3",
    "react-responsive": "10.0.0",
    "react-select": "5.10.0",
    "react-tooltip": "5.28.0",
    "styled-components": "6.1.14",
    "uuid": "11.0.5",
    "vanilla-masker": "1.2.0",
    "zod": "3.24.1"
  },
  "peerDependencies": {
    "react": "18.3.1",
    "react-dom": "18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "9.17.0",
    "@testing-library/dom": "10.4.0",
    "@testing-library/jest-dom": "6.6.3",
    "@testing-library/react": "16.2.0",
    "@types/lodash": "4.17.15",
    "@types/react": "18.3.18",
    "@types/react-dom": "18.3.5",
    "@types/react-modal": "3.16.3",
    "@types/vanilla-masker": "1.2.4",
    "@typescript-eslint/eslint-plugin": "8.26.1",
    "@typescript-eslint/parser": "8.26.1",
    "@vitejs/plugin-react": "4.3.4",
    "babel-plugin-styled-components": "2.1.4",
    "eslint": "9.17.0",
    "eslint-config-prettier": "10.1.1",
    "eslint-plugin-import": "2.31.0",
    "eslint-plugin-jsx-a11y": "6.10.2",
    "eslint-plugin-react": "7.37.4",
    "eslint-plugin-react-hooks": "5.0.0",
    "eslint-plugin-react-refresh": "0.4.16",
    "globals": "15.14.0",
    "jsdom": "26.0.0",
    "prettier": "3.5.3",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-router-dom": "6.25.1",
    "typescript": "~5.6.2",
    "typescript-eslint": "8.18.2",
    "vite": "6.0.5",
    "vite-plugin-dts": "4.5.0",
    "vitest": "3.0.5"
  }
}

Relevant TypeScript and Vite configuration files for the redesign project:

tsconfig.app.json:

{
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": [
      "ES2020",
      "DOM",
      "DOM.Iterable"
    ],
    "module": "ESNext",
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "isolatedModules": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "noUncheckedSideEffectImports": true,
    "types": [
      "vitest",
      "@testing-library/jest-dom"
    ]
  },
  "include": [
    "src"
  ]
}

vite.config.ts:

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

export default defineConfig({
  plugins: [
    react(),
    dts({
      include: ['src'],
    }),
  ],
  build: {
    lib: {
      entry: './src/index.ts', // Entry point of the library
      name: 'MyTypescriptUI',
      fileName: (format) => `redesign-web-app.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom', 'react-router-dom'],
      output: {
        interop: 'auto',
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'react-router-dom': 'ReactRouterDom',
        },
      },
    },
    sourcemap: true,
  },
});

Problem Summary:

The main application is a CRA-based React app (with React version 18.3.1) and the redesign is a Vite-built module using TypeScript.

The redesign exports screens and providers as modules.

When imported into the main app, standard React hooks like useState and useContext fail to work as expected.

• I asked ChatGPT for help, but it kept cycling through the same suggestions without resolving the issue.
• I searched for other Vite projects with a similar configuration, yet their setups did not work when applied to my project.
• I also attempted modifying my tsconfig settings, but none of the changes made any difference.

本文标签：