bug: Cannot access uninitialized variable, only in Safari, works with dev build

Agular commented 4 months 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.

Stencil Version

4.18.2 to 3.4.1

Current Behavior

In Safari (16.X, 17.X) on either Mac or iOS a white screen is shown. Page renders fine on Mac Chrome or on any browser in Windows.

In the console errors this error is thrown: Unhandled Promise Rejection: ReferenceError: Cannot access uninitialized variable in index.js:1867 which refers to https://github.com/ionic-team/stencil/blob/5a82d0152c92f4ad64c0a9dc92dfb5a564a0bdbf/src/runtime/initialize-component.ts#L47

Expected Behavior

Page is rendered successfully in Safari. Or a more clear error message of the situation.

System Info

npx stencil info:
      System: node 20.11.0
    Platform: windows (10.0.19044)
   CPU Model: 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz (8 cpus)
    Compiler: C:\**..**\ProjectName\node_modules\@stencil\core\compiler\stencil.js
       Build: 1716229673
     Stencil: 4.18.2
  TypeScript: 5.4.5
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.31.0

package.json dependencies
{
    "devDependencies": {
        "@ionic/core": "7.8.5",
        "@rollup/plugin-image": "^3.0.3",
        "@stencil-community/eslint-plugin": "^0.7.2",
        "@stencil/core": "4.18.2",
        "@types/jest": "^29.5.12",
        "@types/node": "^20.12.12",
        "@typescript-eslint/eslint-plugin": "^5.62.0",
        "@typescript-eslint/parser": "^5.62.0",
        "eslint": "^8.57.0",
        "eslint-config-prettier": "^8.10.0",
        "husky": "^8.0.3",
        "jest": "^29.7.0",
        "jest-cli": "^29.7.0",
        "prettier": "3.2.5",
        "puppeteer": "^19.11.1",
        "rollup-plugin-dotenv": "^0.5.1",
        "workbox-build": "^4.3.1"
    },
    "dependencies": {
        "@microsoft/signalr": "^7.0.14",
        "@stencil/redux": "^0.2.0",
        "axios": "^1.6.8",
        "chart.js": "^4.4.2",
        "chartjs-plugin-annotation": "^3.0.1",
        "date-fns": "^2.30.0",
        "date-fns-tz": "^2.0.1",
        "leaflet": "^1.9.4",
        "leaflet.markercluster": "^1.5.3",
        "redux": "^4.2.1",
        "redux-thunk": "^2.4.2",
        "shepherd.js": "^10.0.1",
        "swiper": "^8.4.7"
    }
}

Steps to Reproduce

I sadly do not have a MVP at this time.

Code Reproduction URL

-

Additional Information

I first had this problem with StencilJS 3.4.1 and Ionic 6. Also I thought that PR #5762 would help me debug this situation, but it does not help.

I have tried the following with various results:

1) Updating StencilJS to 4.X and Ionic Framework to 7, did not work. 2) Starting commenting huge chunks of code to get a MVP working state. I have achieved working states with this, but it seems that it kind of does not depend on any specific code, it just depends on how many components are rendered at the same time. I commented out components that I created inside the project. 3) Deploying a dev build to production. This actually works surprisingly, but is not a final solution. My notice is that the files are bundled separately in the build and not bundled together. 4) Configuring bundles in stencil.config.ts to simulate dev build effect by making sure most of the files are bundled separately. This is the current workaround for me, but is not stable since more custom components might reproduce the bug again. 5) Adding browserlist configuration to packages.json with info from Ionic 6/7 migration guide, this did not work. 6) Removing 3rd party dependencies e.g. axios, chart.js, date-fns, leaflet, redux, shepherd.js, swiper

For me it seems odd that the dev build works fine, but not the prod build. Additionally, currently seems that the bundling is the issue, but how?

tanner-reits commented 4 months ago

@Agular I tried to reproduce this based on what you have in the summary, but didn't have any issues. When you get a chance, can you put together a reproduction case? Otherwise, we won't be able to verify or root cause the issue.

ionitron-bot[bot] commented 4 months 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 Stencil starter component library 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.

Agular commented 4 months ago

@tanner-reits The team decided that we will probably drop this bug for now. I hope it was not too much of an inconvenience. I will close the issue myself.

ionic-team / stencil