search

alibaba / ice

🚀 ice.js: The Progressive App Framework Based On React（基于 React 的渐进式应用框架）
https://ice.work
MIT License
17.88k stars 2.1k forks source link

Cannot read properties of null (reading 'store') #4750

Closed 940959221 closed 3 years ago

940959221 commented 3 years ago

在使用store.useModel以及其他store的use开头api时一直会报错：Cannot read properties of null (reading 'store')

luhc228 commented 3 years ago

提供一下最小复现 demo

940959221 commented 3 years ago

提供一下最小复现 demo

能否提供一下钉钉群或者单独的钉钉账号

luhc228 commented 3 years ago

提供一下最小复现 demo

能否提供一下钉钉群或者单独的钉钉账号

https://img.alicdn.com/imgextra/i4/O1CN01g2tfrR1VyinpMASF9_!!6000000002722-2-tps-490-672.png

imsobear commented 3 years ago

https://github.com/alibaba/ice/issues/4649#issuecomment-927218643 听着像这个问题

940959221 commented 3 years ago

#4649 (comment) 听着像这个问题

这是在老的ice项目中使用有这个问题，新建一个ice是没有的，而且老的奇怪的是createStore要从@ice/store中引入，如果从ice引入则报错说没有导出这个方法

imsobear commented 3 years ago

那你多提供点信息吧，各种版本也没有，代码也没有，demo 仓库也没有，我们没法判断。

940959221 commented 3 years ago

那你多提供点信息吧，各种版本也没有，代码也没有，demo 仓库也没有，我们没法判断。

// store.ts
import { createStore } from '@ice/store';
// import { createStore } from 'ice';
import env from './models/env';

const store = createStore(
  {
    env,
  },
  {
    // options
  },
);
// console.log(store.useModel('env'));

export default store;
// models/env.ts
export default {
  // 定义 model 的初始 state
  state: {
    env: '3232'
  },

  // 定义改变该模型状态的纯函数
  reducers: {
    update(prevState, payload) {
      return {
        ...prevState,
        ...payload,
      };
    },
  },

  // 定义处理该模型副作用的函数
  effects: (dispatch) => ({
    setEnv(tEnv) {

    },
  }),
};
import store from '@/store';
const RealTime = () => {
  const [state, dispatch] = store.useModel('env');
  return <div></div>
}
Uncaught TypeError: Cannot read properties of null (reading 'store')
    at Object.useSelector (useSelector.js:122)
    at useModelState (modelApis.js:38)
    at Object.useModel (modelApis.js:33)
    at RealTime (index.jsx:65)
    at renderWithHooks (react-dom.development.js:14803)
    at mountIndeterminateComponent (react-dom.development.js:17482)
    at beginWork (react-dom.development.js:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
    at invokeGuardedCallback (react-dom.development.js:292)
    at beginWork$1 (react-dom.development.js:23203)
    at performUnitOfWork (react-dom.development.js:22157)
    at workLoopSync (react-dom.development.js:22130)
    at performSyncWorkOnRoot (react-dom.development.js:21756)
    at scheduleUpdateOnFiber (react-dom.development.js:21188)
    at updateContainer (react-dom.development.js:24373)
    at react-dom.development.js:24758
    at unbatchedUpdates (react-dom.development.js:21903)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:24757)
    at Object.render (react-dom.development.js:24840)
    at runtime.js:93
    at new Promise (<anonymous>)
    at RuntimeModule.modifyDOMRender (runtime.js:70)
    at _render (renderer.js:146)
    at renderer.js:131
    at step (renderer.js:33)
    at Object.next (renderer.js:14)
    at renderer.js:8
    at new Promise (<anonymous>)
    at ./node_modules/_react-app-renderer@2.0.3@react-app-renderer/lib/renderer.js.__awaiter (renderer.js:4)
    at renderInBrowser (renderer.js:91)
    at renderer.js:66
    at step (renderer.js:33)
    at Object.next (renderer.js:14)
    at renderer.js:8
    at new Promise (<anonymous>)
    at ./node_modules/_react-app-renderer@2.0.3@react-app-renderer/lib/renderer.js.__awaiter (renderer.js:4)
    at reactAppRenderer (renderer.js:58)
    at runApp (runApp.ts:70)
    at Module../src/app.jsx (app.jsx:48)
    at __webpack_require__ (bootstrap:789)
    at fn (bootstrap:100)
    at Object.1 (store.ts:17)
    at __webpack_require__ (bootstrap:789)
    at bootstrap:856
    at bootstrap:856
useSelector @ useSelector.js:122
useModelState @ modelApis.js:38
useModel @ modelApis.js:33
RealTime @ index.jsx:65
renderWithHooks @ react-dom.development.js:14803
mountIndeterminateComponent @ react-dom.development.js:17482
beginWork @ react-dom.development.js:18596
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
beginWork$1 @ react-dom.development.js:23203
performUnitOfWork @ react-dom.development.js:22157
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
scheduleUpdateOnFiber @ react-dom.development.js:21188
updateContainer @ react-dom.development.js:24373
(anonymous) @ react-dom.development.js:24758
unbatchedUpdates @ react-dom.development.js:21903
legacyRenderSubtreeIntoContainer @ react-dom.development.js:24757
render @ react-dom.development.js:24840
(anonymous) @ runtime.js:93
(anonymous) @ runtime.js:70
_render @ renderer.js:146
(anonymous) @ renderer.js:131
step @ renderer.js:33
(anonymous) @ renderer.js:14
(anonymous) @ renderer.js:8
./node_modules/_react-app-renderer@2.0.3@react-app-renderer/lib/renderer.js.__awaiter @ renderer.js:4
renderInBrowser @ renderer.js:91
(anonymous) @ renderer.js:66
step @ renderer.js:33
(anonymous) @ renderer.js:14
(anonymous) @ renderer.js:8
./node_modules/_react-app-renderer@2.0.3@react-app-renderer/lib/renderer.js.__awaiter @ renderer.js:4
reactAppRenderer @ renderer.js:58
runApp @ runApp.ts:70
./src/app.jsx @ app.jsx:48
__webpack_require__ @ bootstrap:789
fn @ bootstrap:100
1 @ store.ts:17
__webpack_require__ @ bootstrap:789
(anonymous) @ bootstrap:856
(anonymous) @ bootstrap:856
Show 13 more frames
imsobear commented 3 years ago

@940959221 看着代码没有明显的问题，能不能提供个 demo 项目，放到 GitHub 上，我们试一下。

940959221 commented 3 years ago

@940959221 看着代码没有明显的问题，能不能提供个 demo 项目，放到 GitHub 上，我们试一下。

这个弄不了，阿里的项目不能上传的，主要是新建的项目是没问题的，但是这个是其他人搭建的，所以具体是啥问题也不太清楚，我这边贴一下我的package.json，看看是不是包的问题还是啥，如果看不出的话我只能不在这里面用store了

{
  "name": "@aljk/content_platform",
  "version": "0.0.0",
  "description": "",
  "dependencies": {
    "@ali/aijk-security-sdk": "^1.0.1",
    "@ali/aplus_universal": "^4.1.1-beta1",
    "@ali/drone-filter-form": "^1.1.1",
    "@ali/drone-mtop": "^1.2.6",
    "@ali/drone-router": "^2.1.10",
    "@ali/lib-mtop": "^2.6.1",
    "@ali/lib-promise": "^3.1.3",
    "@ali/theme-alihealth-shim": "^1.0.2",
    "@ali/universal-mtop": "^5.2.2",
    "@alifd/next": "^1.x",
    "@alifd/theme-design-pro": "^0.7.0",
    "@alife/theme-alihealth-backstage-default": "^0.2.5",
    "@ant-design/icons": "^4.6.4",
    "@antv/g6": "^4.3.4",
    "@antv/x6": "^1.26.1",
    "@antv/x6-react-shape": "^1.4.5",
    "@icedesign/container": "^1.0.5",
    "@types/react": "^16.9.20",
    "@types/react-dom": "^16.9.5",
    "ahooks": "^2.10.8",
    "bizcharts": "^4.1.11",
    "moment": "^2.24.0",
    "prop-types": "^15.5.8",
    "qs": "^6.9.4",
    "react": "^16.6.0",
    "react-copy-to-clipboard": "^5.0.4",
    "react-dom": "^16.6.0",
    "react-json-view": "^1.21.3",
    "react-router-dom": "^5.2.0",
    "umi-request": "^1.3.9",
    "xlsx": "0.17.1"
  },
  "devDependencies": {
    "@ali/build-plugin-fisher-mircoapp-sync": "^1.0.6",
    "@ali/build-plugin-ice-def": "^0.1.0",
    "@ali/eslint-plugin-alijk": "^1.0.0",
    "@ice/spec": "^1.0.0",
    "@icedesign/container": "^1.0.5",
    "babel-plugin-import": "^1.13.3",
    "build-plugin-fusion": "^0.1.0",
    "build-plugin-icestark": "^1.0.2",
    "build-plugin-moment-locales": "^0.1.0",
    "eslint": "^6.0.1",
    "husky": "^4.3.0",
    "ice.js": "^1.0.0",
    "stylelint": "^13.0.0"
  },
  "scripts": {
    "start": "sudo node_modules/.bin/icejs start --disableOpen=true --port=443",
    "build": "icejs build",
    "lint": "npm run eslint && npm run stylelint",
    "eslint": "eslint --cache --ext .js,.jsx ./",
    "stylelint": "stylelint ./**/*.scss"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run eslint"
    }
  },
  "aljkProcode": {
    "disabled": false,
    "platform": "PC",
    "framework": "react",
    "language": "js",
    "srcDirName": "src",
    "materialsDirName": "components"
  },
  "readme": "ERROR: No README data found!",
  "_id": "@aljk/micro_app_scm_lujinsuo@0.0.0"
}
imsobear commented 3 years ago

@940959221 内部同学呀，直接私聊我呗（花名 大果）

imsobear commented 3 years ago

转线下。

lerpo commented 2 years ago

你们这解决问题有意思，有头没有尾，到底咋解决的呀，issue就关掉了

imsobear commented 2 years ago

你们这解决问题有意思，有头没有尾，到底咋解决的呀，issue就关掉了

原因是：src/app 和 src/store 的文件后缀不一致，一个是 js 一个是 ts，改成一致的就没有问题了。看下你是不是这个问题，不是的话可以单独提 issue。

lerpo commented 2 years ago

image 引用的页面是tsx的也会有影响么 store是ts的

imsobear commented 2 years ago

不影响，搞不定可以单独提 issue 然后提供重现 demo。

lessonli commented 2 years ago

我在 3d 场景中 渲染 2d 内容 2d 组件中使用了 store 报错与上面的一致 单独渲染 2d 组件是没有这个问题的

52myu commented 1 year ago

你们这解决问题有意思，有头没有尾，到底咋解决的呀，issue就关掉了

原因是：src/app 和 src/store 的文件后缀不一致，一个是 js 一个是 ts，改成一致的就没有问题了。看下你是不是这个问题，不是的话可以单独提 issue。

我也遇到这个问题，不知道哪里出问题。这个 #5872 ，好神奇的错误，热更新就出问题。文件名改成一样也是不行

AmmiWang commented 1 year ago

@imsobear @luhc228 ice2.0环境，全局store没问题，页面store就报这个错，有解法嘛？ Demo：https://github.com/AmmiWang/ice2-demo 启动后访问：http://localhost:3333/#/test-fn-component 修改如图位置为./store即可复现错误

image