Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: Missing variable in hydration app #4076

Closed
3 tasks done
cptflammin opened this issue Feb 20, 2023 · 8 comments
Closed
3 tasks done

bug: Missing variable in hydration app #4076

cptflammin opened this issue Feb 20, 2023 · 8 comments
Assignees
@tanner-reits
Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil Resolution: Needs Investigation This PR or Issue should be investigated from the Stencil team

Comments

@cptflammin
Copy link

Prerequisites

Stencil Version

3.0.1

Current Behavior

While prerendering and hydration, stencil raises an error about an undefined __DEV__ variable. This seems to be related to @apollo/client. Being able to define the variable in prerendering config would solve the issue.

[19:35.9] prerendering started ...
[19:36.8] prerendering failed in 822 ms

[ ERROR ] Hydrate Error
ReferenceError: __DEV__ is not defined at checkDEV
(/Users/nico_fl/Development/_trials/stencil-prerender-notfoundvars/dist/hydrate/index.js:28002:5) at
hydrateAppClosure

Expected Behavior

Being able to define missing variable somewhere within app or config.
Defining var in app.ts does not work (variable is renamed with a $1 ending), index.js hydrated app:

const __DEV__$1 = false; console.log('__DEV__', __DEV__$1);

System Info

Mac OS Ventura
@apollo/client@3.7.8
@stencil/core@3.0.1

Steps to Reproduce

stencil build --prerender

Code Reproduction URL

https://github.com/cptflammin/stencil-prerender-notfoundvars

Additional Information

`npm run build

s3@0.0.1 build
stencil build --prerender

[20:57.8] @stencil/core
[20:58.1] v3.0.1 🍒
[21:00.9] build, app, prod mode, started ...
[21:01.0] transpile started ...
[21:04.4] transpile finished in 3.36 s
[21:04.4] copy started ...
[21:04.4] generate hydrate app started ...
[21:04.4] generate lazy + source maps started ...
[21:06.6] copy finished (1338 files) in 2.23 s
[21:23.1] generate hydrate app finished in 18.78 s
[21:26.3] generate lazy + source maps finished in 21.89 s

[ WARN ] Package Json: package.json
package.json "module" property is required when generating a distribution.

[21:26.4] build finished in 25.51 s

[21:30.7] prerendering started ...
[21:30.9] prerendering failed in 225 ms

[ ERROR ] Hydrate Error
ReferenceError: __DEV__ is not defined at checkDEV
(/home/users/wtf/stencil-prerender-notfoundvars/dist/hydrate/index.js:28002:5) at
hydrateAppClosure
(/home/users/wtf/stencil-prerender-notfoundvars/dist/hydrate/index.js:28005:1) at
hydrateFactory
(/home/users/wtf/stencil-prerender-notfoundvars/dist/hydrate/index.js:53398:3) at render
(/home/users/wtf/stencil-prerender-notfoundvars/dist/hydrate/index.js:53665:9) at
/home/users/wtf/stencil-prerender-notfoundvars/dist/hydrate/index.js:53597:62 at new
Promise () at Object.hydrateDocument
(/home/users/wtf/stencil-prerender-notfoundvars/dist/hydrate/index.js:53589:33) at
prerenderWorker
(/home/users/wtf/stencil-prerender-notfoundvars/node_modules/@stencil/core/compiler/stencil.js:11047:46)
at prerenderWorker
(/home/users/wtf/stencil-prerender-notfoundvars/node_modules/@stencil/core/compiler/stencil.js:13259:42)
at
/home/users/wtf/stencil-prerender-notfoundvars/node_modules/@stencil/core/compiler/stencil.js:13268:14`
@ionitron-bot ionitron-bot bot added the triage label Feb 20, 2023
@tanner-reits tanner-reits self-assigned this Feb 27, 2023
@tanner-reits
Copy link
Member

Hey @cptflammin 👋

Thanks for reporting this. I did some digging and ran across this issue in the apollo/client repo. Seems like this is a problem in some other ecosystems as well. I tried installing the latest alpha release of the Apollo client (npm i @apollo/client@alpha) into your repro and was able to build with prerendering successfully. Would you mind giving that a shot in your project and let us know if that solves the issue?

Thanks in advance!

@tanner-reits tanner-reits added Awaiting Reply This PR or Issue needs a reply from the original reporter. and removed triage labels Feb 27, 2023
@cptflammin
Copy link
Author

@tanner-reits oh, ok, thanks for pointing this out. I'll have a look in the upcoming days and let you know

@ionitron-bot ionitron-bot bot removed the Awaiting Reply This PR or Issue needs a reply from the original reporter. label Mar 5, 2023
@cptflammin
Copy link
Author

cptflammin commented Mar 5, 2023 •
edited
Loading

@tanner-reits Ok I updated the example with @stencil/core@3.1.0 and @apollo/client@3.8.0-alpha.8. While it does not output the previous error, it is stucked while prerendering. Dunno if it is related to the call to graphql api or routing issues

@cptflammin
Copy link
Author

@tanner-reits any news ? :)

1 similar comment
@cptflammin
Copy link
Author

@tanner-reits any news ? :)

@tanner-reits
Copy link
Member

Hey @cptflammin

Sorry for the delay here. Took another look at this and was able to figure out that the problem actually lies within the profile page setting the fullscreen attribute on ion-content. We're not sure why that is an issue yet, but removing that for now should get things building and completing prerendering successfully.

We'll take a look at this internally to hopefully figure out why that attribute is causing issues in prerendering. Thanks for your patience!

@tanner-reits tanner-reits added Resolution: Needs Investigation This PR or Issue should be investigated from the Stencil team Bug: Validated This PR or Issue is verified to be a bug within Stencil labels Apr 3, 2023
@sean-perkins
Copy link
Contributor

Hello @cptflammin can you try with this dev-build of @ionic/core and let me know if the problem persists?

npm install @ionic/core@7.0.6-dev.11683653232.1ddc5840

Note: This will require upgrading your example app to Ionic v7: https://ionicframework.com/docs/updating/7-0

This was referenced May 9, 2023
Closed
Merged
github-merge-queue bot pushed a commit to ionic-team/ionic-framework that referenced this issue May 9, 2023
@sean-perkins
fix(content): prevent forceUpdate in SSR (#27440)
e930988 
Issue number: Resolves #27411,
ionic-team/stencil#2429,
ionic-team/stencil#4076

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Rendering `<ion-content fullscreen="true">` in an Angular Universal
project will result in a javascript heap exception and the browser tab
timing out.

`forceUpdate` is not a compatible API with pre-rendering and results in
calling itself indefinitely.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Updates the fullscreen implementation of `ion-content` to only call
`forceUpdate` and related functionality when running in a browser
environment.
- `<ion-content fullscreen="true">` is compatible with Angular Universal

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev-build: `7.0.6-dev.11683653232.1ddc5840` ✅
@rwaskiewicz
Copy link
Member

A fix for this issue was released as a part of Ionic Framework v7.0.6. As a result, I'm going to close out this issue. If this issue should reappear, please feel free to open a new issue. Thanks!

@tanner-reits tanner-reits mentioned this issue Jul 18, 2023
Merged
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tanner-reits tanner-reits

Labels
Bug: Validated This PR or Issue is verified to be a bug within Stencil Resolution: Needs Investigation This PR or Issue should be investigated from the Stencil team
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@rwaskiewicz @cptflammin @sean-perkins @tanner-reits