bug: Cannot read property 'data-opts' of undefined

[micahlt]

Bug Report

Ionic version:

[x] 4.x

Current behavior:

When using the latest version of Ionic (downloaded via npm) in the browser, I receive the following error in the console:

Cannot read property 'data-opts' of undefined
at Fe (p-1b73df01.js:1)
    at Object.parcelRequire.node_modules/@ionic/core/dist/ionic/ionic.esm.js../p-1b73df01.js (ionic.esm.js:1)
    at newRequire (ionic.esm.496e7286.js:47)
    at ionic.esm.496e7286.js:81
    at ionic.esm.496e7286.js:120

The page is not hydrated.

Expected behavior:

No errors and a hydrated website.

Steps to reproduce:

1. Download the latest Ionic version:

$ npm install --save ionic

2. Link to the respective Ionic scripts and styles

<script type="module" src="node_modules/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="node_modules/@ionic/core/dist/ionic/ionic.js"></script>
<link href="node_modules/@ionic/core/css/ionic.bundle.css" rel="stylesheet">

3. Build with a bundler (I use Parcel)

parcel index.html

Other information:
It's a possibility that it could be a Parcel (bundler) issue instead of Ionic, but I don't think so.

Ionic info:

Ionic:

   Ionic CLI : 6.8.0 (/home/micahlt/.nvm/versions/node/v12.16.1/lib/node_modules/@ionic/cli)

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v12.16.1 (/home/micahlt/.nvm/versions/node/v12.16.1/bin/node)
   npm    : 6.14.4
   OS     : Linux 5.4

[ionitron-bot]

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

Please provide a reproduction with the minimum amount of code required to reproduce the issue. Without a reliable code reproduction, it is unlikely we will be able to resolve the issue, leading to it being closed.

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

[micahlt]

I've already provided a sufficient amount of code. What needs to be added?

[liamdebeasi]

I need a full app that I can clone to reproduce the issue. Following the steps you provided does not reproduce the issue for me. (You can put the app on GitHub and link me to the repo)

[micahlt]

@liamdebeasi Got it. Will do!

[micahlt]

@liamdebeasi The ionic branch of this repo should do.

[liamdebeasi]

Thanks for the follow up. After a few failed attempts at getting this to break (ignore my previous comments 😊) I was able to get the error to reproduce.

I will look into this.

[micahlt]

Thanks a lot, really appreciate it. I would just use the CDN but I'm attempting to make the application run offline. 👍

[liamdebeasi]

When Ionic is setup, it looks for the Ionic Framework scripts. It expects the src values to look something like ionic.esm.js, but Parcel is adding a hash to all of the files (I.e. ionic.esm.123abc.js), so the files are never found. This leads to the data-opts undefined error you are experiencing.

The regex that is used to look for the files comes from Stencil, so I am going to move this issue to that repo to see if the Stencil team has any suggestions.

[micahlt]

Ahh, that makes sense. So if I disable Parcel's hashing, it should work, correct?

[micahlt]

Just giving a bump here, because offline functionality is a key feature of my app. Any solutions?

[erichstark]

I have similair problem with stenciljs. I have to add hash/tag to the resource because of server caching.

[erichstark]

@micahlt try to add attribute to script with namespace of components

based on this code
Array.from(e.querySelectorAll("script")).find(s=>RegExp(/${r}(\.esm)?\.js($|\?|#)).test(s.src) || s.getAttribute("data-stencil-namespace") === r)
stencil (i dont know why) is trying to find exact resource. So can also identify it with this attribute.

<script data-stencil-namespace="my-components" src="...esm.js"></script>

You have to find out namespace for those components, but I think it could be just "ionic".

Let me know if that helps.

[micahlt]

@erichstark Thanks for the help! Unfortunately, due to this slowdown my team has switched from Ionic to Material Components.

[TimPietrusky]

I would also be interested in a solution to this, I want to import ionic into my typescript web app import '@ionic/core/dist/ionic/ionic.esm.js' and also receive the error Cannot read property 'data-opts' of undefined.

[BerkeAras]

I would also be interested in a solution to this, I want to import ionic into my typescript web app import '@ionic/core/dist/ionic/ionic.esm.js' and also receive the error Cannot read property 'data-opts' of undefined.

Same issue and don't know how to fix. Any ideas @liamdebeasi

[nathantaal]

Anything? This issue prevents from using plain JS with a bundler... or any other JS framework..

[AlexNaga]

This is still a current issue with "@stencil/core": "2.10.0"

[pvandrunen]

Bump to this. The only method for using Vanilla Ionic that has worked for me is using the CDN links, trying to use an import to the package doesn't work. In fact, manually copying the entire ionic project into the project folder and using the local path 1) assumes all of the generated files are in the root / and if I copy all of those files to the root it throws the error:

3e2f13040bdb459fc502.js:4 Uncaught TypeError: Cannot read properties of undefined (reading 'data-opts')
    at 3e2f13040bdb459fc502.js:4:295
    at 3e2f13040bdb459fc502.js:4:10191

[rwaskiewicz]

The fix for this bug has gone out with the Stencil v3.1.0 release 🎉