Hi all,
We recently updated to Meteor 2.0 and are enjoying the local development iteration speed benefits of the hot module replacement (HMR) that was recently introduced.
However, one of the pages in our app now seems to crash with an error that seems to come from react fast refresh / hot module replacement. I have pasted the full error below.
error: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
react-fast-refresh.js?hash=b6c1b2fb7b85526cb964fb12dbb325c90c3ae990:827 Uncaught (in promise) DOMException: Blocked a frame with origin "http://localhost:3000" from accessing a cross-origin frame.
at Object.isLikelyComponentType (http://localhost:3000/packages/react-fast-refresh.js?hash=b6c1b2fb7b85526cb964fb12dbb325c90c3ae990:827:26)
at isReactRefreshBoundary (http://localhost:3000/packages/react-fast-refresh.js?hash=b6c1b2fb7b85526cb964fb12dbb325c90c3ae990:91:20)
at Object.after (http://localhost:3000/packages/react-fast-refresh.js?hash=b6c1b2fb7b85526cb964fb12dbb325c90c3ae990:134:11)
at Module.require (http://localhost:3000/packages/modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:274:27)
at Module.moduleLink [as link] (http://localhost:3000/packages/modules.js?hash=d44ac5a1105c53d0fd450f617e8d4f22f1af4f0f:330:22)
at module (/node_modules/video.js/dist/video.es.js:9:21)
at http://localhost:3000/packages/dynamic-import.js?hash=2897a1149caa3c08f86cd16ec170545b0a87d695:143:7
at fileEvaluate (http://localhost:3000/packages/modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:388:7)
at Module.require (http://localhost:3000/packages/modules-runtime-hot.js?hash=d12281259a6cee99786429a66f76b05f13449c7f:270:27)
at Module.moduleLink [as link] (http://localhost:3000/packages/modules.js?hash=d44ac5a1105c53d0fd450f617e8d4f22f1af4f0f:330:22)
The problem goes away when we disable react fast refresh via the following env var: DISABLE_REACT_FAST_REFRESH=true but I’d rather not have to do that so we can keep using HMR.
One other important thing to note is that the page seems to be crashing as a result of including our videojs video player, which we set up as mentioned in the following SO answer: https://stackoverflow.com/a/54837498/1142043
Has anyone else ran into similar issue with HMR / react fast refresh and their react components? Any tips on how we may go about fixing such issues? Thanks.
2 Likes
UPDATE April 19th 2021 I do not have the problem since I upgraded a bunch of dependencies including upgrading Meteor to version 2.2.
Hi @twcfolgar. I am hitting the same wall with the following routes:
Disabling HMR fixes the issue. The production build has no issues. Same problem with HOST=localhost and HOST=127.0.0.1.
On Firefox I get one of two errors:
When I first encounter a problematic route I get this
Uncaught DOMException: Permission denied to access property "$$typeof" on cross-origin object react-fast-refresh.js:827
isLikelyComponentType react-fast-refresh.js:827
isReactRefreshBoundary react-fast-refresh.js:91
after react-fast-refresh.js:134
require modules-runtime-hot.js:274
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module flattenNames.js:16
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module index.js:16
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module Alpha.js:9
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module index.js:9
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module PickerDialog.js:1
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module ColorPicker.js:64
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module index.js:1
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module AllergyCard.js:112
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module AllergiesList.js:1
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
getNamespace dynamic-import.js:211
dynamicImport dynamic-import.js:46
bindEnvironment meteor.js:1234
(Async: promise callback)
then promise.js:132
dynamicImport dynamic-import.js:45
_c53 Router.js:70
lazyInitializer modules.js:3094
mountLazyComponent modules.js:22318
beginWork modules.js:23711
beginWork$1 modules.js:28596
performUnitOfWork modules.js:27432
workLoopSync modules.js:27363
renderRootSync modules.js:27326
performSyncWorkOnRoot modules.js:26949
performSyncWorkOnRoot self-hosted:1224
flushSyncCallbackQueueImpl modules.js:15983
unstable_runWithPriority modules.js:31640
runWithPriority$1 modules.js:15932
flushSyncCallbackQueueImpl modules.js:15978
flushSyncCallbackQueue modules.js:15965
scheduleUpdateOnFiber modules.js:26549
dispatchAction modules.js:20795
dispatchAction self-hosted:1281
computation useTracker.ts:130
_compute tracker.js:308
_recompute tracker.js:324
_runFlush tracker.js:495
onGlobalMessage meteor.js:515
(Async: EventListener.handleEvent)
addEventListener eval:4
usePostMessage meteor.js:524
<anonymous> meteor.js:553
If I switch to another problematic route and do a soft re-render of the route I get this:
Uncaught TypeError: baseGetTag is not a function
Lodash 4
isFunction
baseIsNative
getNative
module
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module getSplitLineSegments.js:9
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module SplitLinePath.js:9
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module index.js:9
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module Sex.js:17
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module Stats.js:69
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
getNamespace dynamic-import.js:211
dynamicImport dynamic-import.js:46
bindEnvironment meteor.js:1234
promise callback*module/exports.makeCompatible/Promise.prototype.then promise.js:132
dynamicImport dynamic-import.js:45
_c39 Router.js:60
lazyInitializer modules.js:3094
mountLazyComponent modules.js:22318
beginWork modules.js:23711
beginWork$1 modules.js:28596
performUnitOfWork modules.js:27432
workLoopSync modules.js:27363
renderRootSync modules.js:27326
performSyncWorkOnRoot modules.js:26949
flushSyncCallbackQueueImpl modules.js:15983
unstable_runWithPriority modules.js:31640
runWithPriority$1 modules.js:15932
flushSyncCallbackQueueImpl modules.js:15978
flushSyncCallbackQueue modules.js:15965
discreteUpdates$1 modules.js:27076
discreteUpdates modules.js:8412
dispatchDiscreteEvent modules.js:10545
modules.js:41:23
Lodash 4
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
require modules-runtime-hot.js:310
module Lodash
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module getSplitLineSegments.js:9
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module SplitLinePath.js:9
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module index.js:9
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module Sex.js:17
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
module Stats.js:69
makeModuleFunction dynamic-import.js:143
fileEvaluate modules-runtime-hot.js:388
require modules-runtime-hot.js:270
moduleLink modules.js:320
getNamespace dynamic-import.js:211
dynamicImport dynamic-import.js:46
bindEnvironment meteor.js:1234
(Async: promise callback)
then promise.js:132
dynamicImport dynamic-import.js:45
_c39 Router.js:60
lazyInitializer modules.js:3094
mountLazyComponent modules.js:22318
beginWork modules.js:23711
beginWork$1 modules.js:28596
performUnitOfWork modules.js:27432
workLoopSync modules.js:27363
renderRootSync modules.js:27326
performSyncWorkOnRoot modules.js:26949
performSyncWorkOnRoot self-hosted:1224
flushSyncCallbackQueueImpl modules.js:15983
unstable_runWithPriority modules.js:31640
runWithPriority$1 modules.js:15932
flushSyncCallbackQueueImpl modules.js:15978
flushSyncCallbackQueue modules.js:15965
discreteUpdates$1 modules.js:27076
discreteUpdates modules.js:8412
dispatchDiscreteEvent modules.js:10545
bind_applyFunctionN self-hosted:1375
dispatchDiscreteEvent self-hosted:1338
I am having the same problem, on Meteor 2.3.2. In my case the offending line is
import { Line } from 'react-chartjs-2';
When the chart import is removed everything works.