Upgrading from v5 to v6 causing native-base to not work.

[SethY8s]

Hey everyone, so recently at work we decided to start using storybook and we initially started with react-native v5 before we found out that maybe using the beta version of v6 would be better. When I tried to convert and just play around with v6, I found out that whenever I used native-base components my app would crash and I would get an error saying "Can't find variable: HTMLElement". This error would be in several node modules relating to react-native, and I was wondering if anyone knew a workaround we could still use native-base and @storybook/react-native beta 6.

Things I have tried to fix:
-Delete node_modules and reinstall them.
-reinstalling different versions of storybook

I highly recommend checking out my repo here since you can see all my code in .storybook (note that the folder called storybook is just old v5 code). Another important thing to note is that I know react-native storybook v6 is indeed working since I can make normal components with just react-native elements such as View and Text components. I have been looking hard to fix this all day and would really appreciate it if someone had any insight on how to fix this since most of our company's components are made with native-base. Thanks!

[dannyhw]

@SethY8s Hey thanks for trying out the beta, sorry that you ran into issues. Could you try updating your other storybook dependencies to match each other? Preferably remove any older packages on 5.3 you aren't using too so that you don't get clashing peer dependencies.

for example

 "@storybook/addon-actions": "^6.5",
  "@storybook/addon-ondevice-actions": "^6.0.1-beta.9",

I can take a look at your project in more detail tomorrow and debug it for you.

[SethY8s]

@dannyhw, Excited to see what you come up with. Thanks for getting back to me so fast!

[dannyhw]

@SethY8s I was able to confirm my suspicions that this is caused by the polyfill added as a temporary workaround for some other issues in storybook/preview-web

I'm currently waiting for a new version of v6.5 that will allow me to remove this polyfill for good.

If you want to temporarily workaround this issue then there are some patches you can apply to node_modules for example using patch-package

in node_modules/@storybook/react-native/dist/index.js
remove or comment line 1

// import './document-polyfill';

in node_modules/@storybook/preview-web/dist/modern/PreviewWeb.js
remove or comment line 28 and 29

    // this.view = new WebView();
    // this.urlStore = new UrlStore(); // Add deprecated APIs for back-compat

I've been told that the changes should be made next week so hopefully a permanent fix is coming very soon.

[jfdesgagne]

Hi, is there any news on this? I tried making the same patch changes but ran into more problem

TypeError: undefined is not an object (evaluating 'document.location')

Thanks!

[jfdesgagne]

For now, applying the patch on document-polyfill to be:

// import Document from './DOM/Document';
// window.document = window.document || new Document();
window.document = {
    location: {

    },
    body: {
        addEventListener: () => undefined
    },
    addEventListener: () => undefined,
    querySelectorAll: () => [],
    getElementById: () => undefined
}

window.addEventListener = () => undefined
window.HTMLElement = {}
window.HTMLElement.prototype = {
    focus: () => undefined
}

get me around the problem for the moment

[dannyhw]

This is already fixed on the latest version of the beta, check the lock file to make sure you're on the latest @jfdesgagne