Lerna，Storybook-未捕获的错误：无效的挂接调用挂钩只能在功能组件的主体内部调用 Root package.json lerna.json 前端package.json 文件夹结构

编程问答 2022-06-06

问题描述

我想为前端和后端设置monorepo。到现在为止，故事书已在包装内设置了前端。当我运行npm run storybook（故事书）时，代码将编译并自动打开浏览器。但是我看不到故事书，但出现以下错误

enter image description here

Root package.json 

{
  "name": "turbotic-platform","version": "1.0.0","description": "","main": "","scripts": {
    "bootstrap": "lerna bootstrap","reset": "rm -rf node_modules && lerna clean","build": "lerna run build","start": "lerna run start --parallel","pt": "prettier --write 'packages/**/*.{js,html,scss,tsx,ts,jsx}'"
  },"keywords": [],"author": "Turbotic","license": "ISC","private": true,"workspaces": {
    "packages": [
      "packages/*"
    ]
  },"devDependencies": {
    "husky": "^4.2.5","lerna": "^3.20.2","prettier": "2.0.5","pretty-quick": "^2.0.1"
  }
}

lerna.json 

{
  "version": "1.0.0","packages": [
    "packages/*"
  ],"npmClient": "npm"
}

前端package.json 

{
  "name": "client-turbotic-dashboard","version": "0.1.0","dependencies": {
    "@testing-library/jest-dom": "^5.11.4","@testing-library/react": "^11.1.0","@testing-library/user-event": "^12.1.10","prop-types": "^15.7.2","react": "^17.0.1","react-dom": "^17.0.1","react-scripts": "4.0.0","web-vitals": "^0.2.4"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","storybook": "start-storybook -p 6006 -s public","build-storybook": "build-storybook -s public"
  },"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": {
    "@babel/core": "^7.12.3","@storybook/addon-actions": "^6.0.27","@storybook/addon-essentials": "^6.0.27","@storybook/addon-links": "^6.0.27","@storybook/node-logger": "^6.0.27","@storybook/preset-create-react-app": "^3.1.4","@storybook/react": "^6.0.27","babel-loader": "^8.1.0","eslint": "^7.12.0","eslint-config-airbnb": "^18.2.0","eslint-config-prettier": "^6.14.0","eslint-plugin-import": "^2.22.1","eslint-plugin-jsx-a11y": "^6.4.0","eslint-plugin-prettier": "^3.1.4","eslint-plugin-react": "^7.21.5","eslint-plugin-react-hooks": "^4.2.0","prettier": "^2.1.2","react-is": "^17.0.1"
  }
}

文件夹结构

enter image description here

当我将npmClient:"yarn"与useWorkspaces: true一起使用但我想使用npmClient:"npm"

时，它可以工作

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

lernamonoreporeactjsreactjsreactjsreactjsstorybook