Cannot access 'internals' before initialization

[mdiener]

Describe the bug
I'm trying to have a simple Textfield component loading on a page. It however throws the following error after a quick second of rendering it correctly. This also only occurs when running npm run dev and not when doing a full npm run build && npm run preview. The provided output is rather sparse:

500
Cannot access 'internals' before initialization
ReferenceError: Cannot access 'internals' before initialization
    at http://localhost:3000/node_modules/@smui/common/internal/classAdderBuilder.js:3:36

To Reproduce
Steps to reproduce the behavior:

1. npm init svelte@next test (chose typescript support)
2. cd test
3. npm install
4. npm install --save-dev @smui/textfield smui-theme
5. create a Textfield component in index.js
6. npm run dev

Expected behavior
The component should display normally as a text field.

Desktop (please complete the following information):

• OS: Linux
• Browser: Chrome

Additional context
This is the content of my index.js file for the textfield component:

<script lang="ts">
  import Textfield from '@smui/textfield'

  let value: string | null = null;
</script>

<Textfield bind:value />

[Serjlee]

This is also baffling me. I discovered you can fix it by monkey patching node_modules/@smui/common/internal/classAdderBuilder.js:3 with:

const defaults = Object.assign({}, {
    class: '',
    classMap: {},
    contexts: {},
    props: {}})

But I've frankly got no clue on why it doesn't work out of the box

[mdiener]

At least the explanation for why a ReferenceError is thrown appears to be that something tries to access the internals variable before it is being initialized. I can only assume this doesn't happen during regular "build" because it moves the different pieces of code around and somehow moves the initialization of this variable up.

[TDZ] Temporal Dead Zone: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#temporal_dead_zone_tdz

[tuchuants]

I have no idea why this happened, but at least downgrade to 4.2.0 would be a workaround.

[hperrin]

I think I've figured this out. I'm moving internals back into the Svelte components and just ignoring the TS error about it not being exported. It is exported.

[Serjlee]

@hperrin I'm still getting the same issue on beta.6 :(

[michapixel]

me too, but i have another situation. this is a sveltekit-nwjs app, so i wouldn't wonder.

But sometimes - if i rearrange my imports - the error goes away. next time i'm adding an import: boom.

[michapixel]

This is also baffling me. I discovered you can fix it by monkey patching node_modules/@smui/common/internal/classAdderBuilder.js:3 with:

const defaults = Object.assign({}, {
    class: '',
    classMap: {},
    contexts: {},
    props: {}})

But I've frankly got no clue on why it doesn't work out of the box

how do you monkeypatch this?

[hperrin]

I didn't figure it out...
But I did now. I had a circular dependency that TypeScript didn't recognize.

Sorry to give you false hope yesterday, @Serjlee. xD

[hperrin]

I have no idea why this issue doesn't appear all the time. Very strange.

[michapixel]

I really don't know why it's so unstable in it's errors.

But i messed up my package.json an therefore deleted all modules and reinstalled with latest and boom. It works.

I'm sorry. My best gess it's been the svelte-kit package which caused all the trouble.

The error always occurred in Button.js which was the first one imported in my project..
I guess that error is terribly misleading.
But since your components are highly complex in code, i thought, maybe ... 😔🤭

[hperrin]

Well, once I release this newest change, that should fix it permanently.

[hperrin]

Ok, the latest version should fix this permanently.

[Serjlee]

I can confirm it works fine with beta.7, thanks a lot!