Skip to content
This repository has been archived by the owner on Apr 30, 2024. It is now read-only.

Blank page with uncaught exceptions(s) on Netlify deployment #895

Closed
brylie opened this issue Jun 9, 2021 · 11 comments · Fixed by #903
Closed

Blank page with uncaught exceptions(s) on Netlify deployment #895

brylie opened this issue Jun 9, 2021 · 11 comments · Fixed by #903
Assignees
@dhruvkb
Labels
💻 aspect: code Concerns the software code in the repository 🤖 aspect: dx Concerns developers' experience with the codebase 🛠 goal: fix Bug fix help wanted Open to participation from the community no-issue-activity 🟥 priority: critical Must be fixed ASAP 🟧 priority: high Stalls work on the project or its dependents 💪 skill: javascript/storybook Requires proficiency in 'JavaScript/Storybook' 💪 skill: javascript/vue Requires proficiency in 'JavaScript/Vue' 💪 skill: sass Requires proficiency in 'Sass' 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work

Comments

@brylie
Copy link
Contributor

brylie commented Jun 9, 2021 •
edited
Loading

Description

Both the local development build and Netlify deployment are failing to render, showing only a blank white page. The browser console displays some errors about uncaught exception(s):

image

Full text of console errors 
vendors~main.473205336756676aa930.manager.bundle.js:2 undefined
Ci @ vendors~main.473205336756676aa930.manager.bundle.js:2
f.componentDidCatch.c.callback @ vendors~main.473205336756676aa930.manager.bundle.js:2
Cg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ji @ vendors~main.473205336756676aa930.manager.bundle.js:2
Sj @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.unstable_runWithPriority @ vendors~main.473205336756676aa930.manager.bundle.js:2
cg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Jj @ vendors~main.473205336756676aa930.manager.bundle.js:2
yj @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.unstable_runWithPriority @ vendors~main.473205336756676aa930.manager.bundle.js:2
cg @ vendors~main.473205336756676aa930.manager.bundle.js:2
fg @ vendors~main.473205336756676aa930.manager.bundle.js:2
gg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ig @ vendors~main.473205336756676aa930.manager.bundle.js:2
enqueueSetState @ vendors~main.473205336756676aa930.manager.bundle.js:2
C.setState @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
exec @ vendors~main.473205336756676aa930.manager.bundle.js:2
wrapper @ vendors~main.473205336756676aa930.manager.bundle.js:2
addListener @ vendors~main.473205336756676aa930.manager.bundle.js:2
onElementDetectable @ vendors~main.473205336756676aa930.manager.bundle.js:2
ready @ vendors~main.473205336756676aa930.manager.bundle.js:2
process @ vendors~main.473205336756676aa930.manager.bundle.js:2
processBatch @ vendors~main.473205336756676aa930.manager.bundle.js:2
setTimeout (async)
requestFrame @ vendors~main.473205336756676aa930.manager.bundle.js:2
processBatchAsync @ vendors~main.473205336756676aa930.manager.bundle.js:2
addFunction @ vendors~main.473205336756676aa930.manager.bundle.js:2
install @ vendors~main.473205336756676aa930.manager.bundle.js:2
makeDetectable @ vendors~main.473205336756676aa930.manager.bundle.js:2
attachListenerToElement @ vendors~main.473205336756676aa930.manager.bundle.js:2
forEach @ vendors~main.473205336756676aa930.manager.bundle.js:2
listenTo @ vendors~main.473205336756676aa930.manager.bundle.js:2
handleDOMNode @ vendors~main.473205336756676aa930.manager.bundle.js:2
componentDidMount @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ji @ vendors~main.473205336756676aa930.manager.bundle.js:2
Sj @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.unstable_runWithPriority @ vendors~main.473205336756676aa930.manager.bundle.js:2
cg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Jj @ vendors~main.473205336756676aa930.manager.bundle.js:2
yj @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ig @ vendors~main.473205336756676aa930.manager.bundle.js:2
bk @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
Nj @ vendors~main.473205336756676aa930.manager.bundle.js:2
ik @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.render @ vendors~main.473205336756676aa930.manager.bundle.js:2
renderStorybookUI @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
Promise.then (async)
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
__webpack_require__ @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
538 @ main.65f67fe9f59f4e5e25b5.manager.bundle.js:1
__webpack_require__ @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
checkDeferredModules @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
webpackJsonpCallback @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
(anonymous) @ main.65f67fe9f59f4e5e25b5.manager.bundle.js:1
vendors~main.473205336756676aa930.manager.bundle.js:2 undefined
Ci @ vendors~main.473205336756676aa930.manager.bundle.js:2
Xi.c.callback @ vendors~main.473205336756676aa930.manager.bundle.js:2
Cg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ji @ vendors~main.473205336756676aa930.manager.bundle.js:2
Sj @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.unstable_runWithPriority @ vendors~main.473205336756676aa930.manager.bundle.js:2
cg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Jj @ vendors~main.473205336756676aa930.manager.bundle.js:2
yj @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.unstable_runWithPriority @ vendors~main.473205336756676aa930.manager.bundle.js:2
cg @ vendors~main.473205336756676aa930.manager.bundle.js:2
fg @ vendors~main.473205336756676aa930.manager.bundle.js:2
gg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ig @ vendors~main.473205336756676aa930.manager.bundle.js:2
enqueueSetState @ vendors~main.473205336756676aa930.manager.bundle.js:2
C.setState @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
exec @ vendors~main.473205336756676aa930.manager.bundle.js:2
wrapper @ vendors~main.473205336756676aa930.manager.bundle.js:2
addListener @ vendors~main.473205336756676aa930.manager.bundle.js:2
onElementDetectable @ vendors~main.473205336756676aa930.manager.bundle.js:2
ready @ vendors~main.473205336756676aa930.manager.bundle.js:2
process @ vendors~main.473205336756676aa930.manager.bundle.js:2
processBatch @ vendors~main.473205336756676aa930.manager.bundle.js:2
setTimeout (async)
requestFrame @ vendors~main.473205336756676aa930.manager.bundle.js:2
processBatchAsync @ vendors~main.473205336756676aa930.manager.bundle.js:2
addFunction @ vendors~main.473205336756676aa930.manager.bundle.js:2
install @ vendors~main.473205336756676aa930.manager.bundle.js:2
makeDetectable @ vendors~main.473205336756676aa930.manager.bundle.js:2
attachListenerToElement @ vendors~main.473205336756676aa930.manager.bundle.js:2
forEach @ vendors~main.473205336756676aa930.manager.bundle.js:2
listenTo @ vendors~main.473205336756676aa930.manager.bundle.js:2
handleDOMNode @ vendors~main.473205336756676aa930.manager.bundle.js:2
componentDidMount @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ji @ vendors~main.473205336756676aa930.manager.bundle.js:2
Sj @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.unstable_runWithPriority @ vendors~main.473205336756676aa930.manager.bundle.js:2
cg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Jj @ vendors~main.473205336756676aa930.manager.bundle.js:2
yj @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ig @ vendors~main.473205336756676aa930.manager.bundle.js:2
bk @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
Nj @ vendors~main.473205336756676aa930.manager.bundle.js:2
ik @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.render @ vendors~main.473205336756676aa930.manager.bundle.js:2
renderStorybookUI @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
Promise.then (async)
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
__webpack_require__ @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
538 @ main.65f67fe9f59f4e5e25b5.manager.bundle.js:1
__webpack_require__ @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
checkDeferredModules @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
webpackJsonpCallback @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
(anonymous) @ main.65f67fe9f59f4e5e25b5.manager.bundle.js:1
vendors~main.473205336756676aa930.manager.bundle.js:2 Uncaught undefined
fg @ vendors~main.473205336756676aa930.manager.bundle.js:2
gg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ig @ vendors~main.473205336756676aa930.manager.bundle.js:2
enqueueSetState @ vendors~main.473205336756676aa930.manager.bundle.js:2
C.setState @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
exec @ vendors~main.473205336756676aa930.manager.bundle.js:2
wrapper @ vendors~main.473205336756676aa930.manager.bundle.js:2
addListener @ vendors~main.473205336756676aa930.manager.bundle.js:2
onElementDetectable @ vendors~main.473205336756676aa930.manager.bundle.js:2
ready @ vendors~main.473205336756676aa930.manager.bundle.js:2
process @ vendors~main.473205336756676aa930.manager.bundle.js:2
processBatch @ vendors~main.473205336756676aa930.manager.bundle.js:2
setTimeout (async)
requestFrame @ vendors~main.473205336756676aa930.manager.bundle.js:2
processBatchAsync @ vendors~main.473205336756676aa930.manager.bundle.js:2
addFunction @ vendors~main.473205336756676aa930.manager.bundle.js:2
install @ vendors~main.473205336756676aa930.manager.bundle.js:2
makeDetectable @ vendors~main.473205336756676aa930.manager.bundle.js:2
attachListenerToElement @ vendors~main.473205336756676aa930.manager.bundle.js:2
forEach @ vendors~main.473205336756676aa930.manager.bundle.js:2
listenTo @ vendors~main.473205336756676aa930.manager.bundle.js:2
handleDOMNode @ vendors~main.473205336756676aa930.manager.bundle.js:2
componentDidMount @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ji @ vendors~main.473205336756676aa930.manager.bundle.js:2
Sj @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.unstable_runWithPriority @ vendors~main.473205336756676aa930.manager.bundle.js:2
cg @ vendors~main.473205336756676aa930.manager.bundle.js:2
Jj @ vendors~main.473205336756676aa930.manager.bundle.js:2
yj @ vendors~main.473205336756676aa930.manager.bundle.js:2
Ig @ vendors~main.473205336756676aa930.manager.bundle.js:2
bk @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
Nj @ vendors~main.473205336756676aa930.manager.bundle.js:2
ik @ vendors~main.473205336756676aa930.manager.bundle.js:2
exports.render @ vendors~main.473205336756676aa930.manager.bundle.js:2
renderStorybookUI @ vendors~main.473205336756676aa930.manager.bundle.js:2
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
Promise.then (async)
(anonymous) @ vendors~main.473205336756676aa930.manager.bundle.js:2
__webpack_require__ @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
538 @ main.65f67fe9f59f4e5e25b5.manager.bundle.js:1
__webpack_require__ @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
checkDeferredModules @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
webpackJsonpCallback @ runtime~main.2749027335fbd852563e.manager.bundle.js:1
(anonymous) @ main.65f67fe9f59f4e5e25b5.manager.bundle.js:1

Reproduction

The easiest way to replicate this bug is to visit the Netlify deployment

  1. visit https://cc-vocabulary.netlify.app/
  2. open the browser tools (F12)
  3. make sure the Console tab is selected
  4. See error.

Expectation

The app should render correctly in both the deployed version and the local development environment.

Environment

  • Device: (eg. iPhone Xs; laptop)
  • OS: Ubuntu 20.04
  • Browser: Firefox and Chromium

Additional context

Possibly related to issue #894

Similar or related upstream issue(s):
@brylie brylie added 🟧 priority: high Stalls work on the project or its dependents 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work 🛠 goal: fix Bug fix 💻 aspect: code Concerns the software code in the repository labels Jun 9, 2021
@brylie brylie self-assigned this Jun 9, 2021
@brylie brylie mentioned this issue Jun 9, 2021
Closed
@zackkrida
Copy link
Contributor

This issue also seems related: storybookjs/storybook#14410

@brylie
Copy link
Contributor Author

brylie commented Jun 9, 2021

OK, thanks for linking to the upstream issue 👍 💯 😄

@clasick
Copy link
Contributor

clasick commented Jun 28, 2021

@zackkrida Is there any workaround for this issue to start playing around with this project?

@brylie brylie mentioned this issue Jun 29, 2021
Closed
1 task
@brylie
Copy link
Contributor Author

brylie commented Jun 29, 2021

@clasick would you like to help with an experiment to replace Storybook with VuePress? I have outlined the rationale and included a link to a tutorial series on using VuePress to document a Vue component library in issue #898.

@dhruvkb dhruvkb mentioned this issue Jun 29, 2021
Merged
7 tasks
@dhruvkb
Copy link
Contributor

dhruvkb commented Jun 29, 2021 •
edited
Loading

I'm able to get Storybook up and running in the vocabulary package with some dependency changes. @brylie and @clasick if you can reproduce my findings, this might be less work than throwing away Storybook and starting VuePress from scratch. If it works, similar changes will need to be performed on the other two packages as well.

@clasick
Copy link
Contributor

clasick commented Jun 29, 2021

I'm able to get Storybook up and running in the vocabulary package with some dependency changes. @brylie and @clasick if you can reproduce my findings, this might be less work than throwing away Storybook and starting VuePress from scratch.

Sure @dhruvkb. Could you please share the dependency changes that worked for you?

@dhruvkb
Copy link
Contributor

dhruvkb commented Jun 29, 2021

It's in the PR #903 referenced above my comment. You can check out that branch.

@clasick
Copy link
Contributor

clasick commented Jun 29, 2021

It's in the PR #903 referenced above my comment. You can check out that branch.

Thanks. Can confirm that the vocabulary package storybook works in that branch.

@brylie brylie added help wanted Open to participation from the community 💪 skill: javascript/vue Requires proficiency in 'JavaScript/Vue' 💪 skill: javascript/storybook Requires proficiency in 'JavaScript/Storybook' 💪 skill: sass Requires proficiency in 'Sass' 🟥 priority: critical Must be fixed ASAP 🤖 aspect: dx Concerns developers' experience with the codebase labels Jun 29, 2021
@brylie
Copy link
Contributor Author

brylie commented Jul 8, 2021 •
edited
Loading

Re-opening this issue since the Netlify deployment is still showing a blank screen. We may need to manually deploy or work out the automated deployment process.

@brylie brylie reopened this Jul 8, 2021
@brylie brylie changed the title Blank page with uncaught exceptions(s) on local build and Netlify deployment Blank page with uncaught exceptions(s) on Netlify deployment Jul 8, 2021
@dhruvkb
Copy link
Contributor

dhruvkb commented Jul 12, 2021 •
edited
Loading

The issue stemmed from incorrect brach configuration on Netlify still pointing to master. Rebuilding after changing the branch name to main seems to have fixed the problem.

Migrating the Storybooks over to GitHub Pages (#932) renders this moot though.

@brylie brylie removed their assignment Aug 5, 2021
@github-actions
Copy link

github-actions bot commented Oct 5, 2021

Stale issue message

@brylie brylie closed this as completed Oct 5, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@dhruvkb dhruvkb

Labels
💻 aspect: code Concerns the software code in the repository 🤖 aspect: dx Concerns developers' experience with the codebase 🛠 goal: fix Bug fix help wanted Open to participation from the community no-issue-activity 🟥 priority: critical Must be fixed ASAP 🟧 priority: high Stalls work on the project or its dependents 💪 skill: javascript/storybook Requires proficiency in 'JavaScript/Storybook' 💪 skill: javascript/vue Requires proficiency in 'JavaScript/Vue' 💪 skill: sass Requires proficiency in 'Sass' 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix Storybook WSOD with some dependency updates cc-archive/vocabulary-legacy
4 participants
@brylie @zackkrida @clasick @dhruvkb