ES6 export & export.default All In One

ES6 export & export.default All In One

vue mixin & TypeError: Cannot read property 'components' of undefined

vue mixin & TypeError: Cannot read property 'components' of undefined
vue.js?26dd:1407 Uncaught (in promise) TypeError: Cannot read property 'components' of undefined
at checkComponents (vue.js?26dd:1407)
at mergeOptions (vue.js?26dd:1527)
at mergeOptions (vue.js?26dd:1548)
at Function.Vue.extend (vue.js?26dd:5146)
at eval (vue-router.esm.js?4af9:1753)
at eval (vue-router.esm.js?4af9:1833)

https://stackoverflow.com/questions/55672109/typeerror-cannot-read-property-components-of-undefined-in-vue2

// monitor mixins
import {
    monitorAdsMixin,
    autoGetSpreaderName,
    autoGetModuleName,
-} from '@//mixins/monitor/tools-mixin.js';
+} from '@/mixins/monitor/tools-mixin.js';

export default {
    // name: '',
    mixins: [monitorAdsMixin],

mixin bug

const autoGetSpreaderName = () => '';
const autoGetModuleName = () => '';

const monitorAdsMixin = {
    // created () {
    //     this.initMonitorDict();
    // },
    mounted () {
        console.log('mixin init 🔥');
        this.initMonitorDict();
    },
    methods: {
        initMonitorDict () {
            // 初始化
            initRegions(); 
            initSpreaderIds(); 
        },
    },
};

export {
    monitorAdsMixin,
    autoGetSpreaderName,
    autoGetModuleName,
};

// export default monitorAdsMixin;

solutions ✅

error file path tools-mixin.js';

// monitor mixins
// export modules & default export ✅
// import {
//     monitorAdsMixin,
//     autoGetSpreaderName,
//     autoGetModuleName,
// } from '@/mixins/monitor/tools-mixin.js';

// no default export ✅
import * as monitorMixin from '@/mixins/monitor/tools-mixin.js';

const {
    monitorAdsMixin,
    autoGetSpreaderName,
    autoGetModuleName,
} = monitorMixin;

// default export ✅
// import monitorAdsMixin from '@/mixins/monitor/tools-mixin.js';

export default {
    // name: '',
    mixins: [monitorAdsMixin],
   //...
}

ads-mixin.js ✅

// monitor mixins
// export modules & default export ✅
import {
    monitorAdsMixin,
    autoGetSpreaderName,
    autoGetModuleName,
} from '@/mixins/monitor/ads-mixin.js';

// no default export ✅
// import * as monitorMixin from '@/mixins/monitor/ads-mixin.js';

// const {
//     monitorAdsMixin,
//     autoGetSpreaderName,
//     autoGetModuleName,
// } = monitorMixin;

// default export ✅
// import monitorAdsMixin from '@/mixins/monitor/ads-mixin.js';

export default {
    // name: '',
    mixins: [monitorAdsMixin],

react

https://github.com/facebook/react/blob/master/packages/react/index.js

// Export all exports so that they're available in tests.
// We can't use export * from in Flow for some reason.
export {
  Children,
  createRef,
  Component,
  PureComponent,
  createContext,
  forwardRef,
  lazy,
  memo,
  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  useMemo,
  useReducer,
  useRef,
  useState,
  useMutableSource,
  useMutableSource as unstable_useMutableSource,
  createMutableSource,
  createMutableSource as unstable_createMutableSource,
  Fragment,
  Profiler,
  unstable_DebugTracingMode,
  StrictMode,
  Suspense,
  createElement,
  cloneElement,
  isValidElement,
  version,
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
  createFactory,
  useTransition,
  useTransition as unstable_useTransition,
  startTransition,
  startTransition as unstable_startTransition,
  useDeferredValue,
  useDeferredValue as unstable_useDeferredValue,
  SuspenseList,
  SuspenseList as unstable_SuspenseList,
  unstable_LegacyHidden,
  unstable_Scope,
  unstable_useOpaqueIdentifier,
  unstable_getCacheForType,
  unstable_Cache,
  unstable_useCacheRefresh,
} from './src/React';

react component

https://reactjs.org/docs/react-component.html

https://codesandbox.io/s/h6dcw?file=/src/index.js:0-219

// import React from "react";
import React, {
  // Component,
  // useRef,
  // useState,
  // useEffect,
} from "react";

/*

import React, {
  // Component,
  // useRef,
  // useState,
  // useEffect,
} from "react";

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---