bug: black screen - Githubissues

jakub-beep commented 2 years ago

Prerequisites

[X] I have read the Contributing Guidelines.
[X] I agree to follow the Code of Conduct.
[X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

[ ] v4.x
[X] v5.x
[ ] v6.x
[ ] Nightly

Current Behavior

ionic/react : “5.6.8” ionic/react-router: “5.6.9” react: “17.0.2” next: “11.0.1” Hi, I am facing issues with black screen and components losing its styling during interaction with a page. It happens usually when I am clicking on the buttons which call some popups which are ionic components. I am pretty sure it is also connected with routing. This little css property is called during those events. I can of course block this css in the code, but it is pointless because when I set it to transparent I see that components lost its styling, also I cannot interact with the page. I see that Ionic 6 probably resolves those issues, because after migration I did not face any issues, but I cannot be sure, because many things just crashed and I would have to upgrade them to test it fully. Unfortunately it is quite impossible to migrate our app to ionic 6 right now because there is no enough time and there is no guarantee that everything will be fine. Is there anyone who faced those issues and could help me to solve this problem? Please help.

Expected Behavior

When rerouting I expect not to lose styling and not to see blackscreen popup.

Steps to Reproduce

Honestly I am not sure.

Code Reproduction URL

No response

Ionic Info

ionic/react : “5.6.8” ionic/react-router: “5.6.9”

Additional Information

No response

ionitron-bot[bot] commented 2 years ago

Thanks for the issue! This issue has been labeled as needs reproduction. This label is added to issues that need a code reproduction.

Please reproduce this issue in an Ionic starter application and provide a way for us to access it (GitHub repo, StackBlitz, etc). Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

If you have already provided a code snippet and are seeing this message, it is likely that the code snippet was not enough for our team to reproduce the issue.

For a guide on how to create a good reproduction, see our Contributing Guide.

Sukaato commented 2 years ago

I have the same issue, when i go to a page that use an ion-datetime i got a blackscreen (depends on theme) and some errors:

TypeError: Failed to resolve module specifier "@utils/logging". Relative references must start with either "/", "./", or "../". undefined

Uncaught (in promise) Error: Constructor for "ion-datetime#undefined" was not found
    at initializeComponent (index-163bbb8a.js:2040:23)

and in stencil build logs i got a warn too

[ WARN  ]  Bundling Warning UNRESOLVED_IMPORT
           '@utils/logging' is imported by
           ./node_modules/@ionic/core/dist/collection/components/datetime/utils/comparison.js, but could not be
           resolved – treating it as an external dependency

which refers to this commit : https://github.com/ionic-team/ionic-framework/commit/5dfaf63c6582811b61339a6fa50cf551cd8724d0

And finally, this refers to a bug in stencilJS, typescript knows its custom path, but stencilJS does not know this custom path. You need to add @rollup/plugin-alias and add this in the stencil configuration.

export const config: Config = {
  rollupPlugins: {
    before: [
      alias({
        entries: [
          { find: '@custom/*', replacement: 'same path from tsconfig' },
        ]
      })
    ]
  }
}

sean-perkins commented 2 years ago

@Sukaato since the listed dependencies are v5, your reported issue is a different problem. I'll split the issue and get a PR to resolve that problem.

sean-perkins commented 2 years ago

@Sukaato I have an open PR, but here is a dev-build in the interim: 6.1.14-dev.11657236641.106931ae

liamdebeasi commented 2 years ago

Thanks for the issue! This issue is being closed due to the lack of a code reproduction. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

The separate issue mentioned in https://github.com/ionic-team/ionic-framework/issues/25588#issuecomment-1178192415 has been resolved in Ionic 6.1.14.

Thank you for using Ionic!