Can not accessing default export component in SolidJS during development mode

[hungtcs]

Describe the bug

Here's a simplified example of the code structure in question:

export default function Select() {
  return <div>....</div>;
}

Select.Option = function SelectOption() {
  return <div>....</div>;
}

The problem arises when mounting the Option component onto the Select component. In production mode, everything functions as expected.

However, in development mode, the code structure is altered, resulting in the inability to access the Select component.

The generated code in development mode looks like this:

export default _$$component(_REGISTRY, "Select", function Select() {
  return _tmpl$();
}, {
  location: "src/layout/primary-layout/index.tsx:1:15"
});

Select.Option = function SelectOption() {
  return _tmpl$();
}

As you can observe, the default exported component is not assigned to the Select variable in development mode, causing issues with accessing it.

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-hanvsn

Steps to Reproduce the Bug or Issue

1. code similar to above

Expected behavior

1. default export can be accessed normally

Screenshots or Videos

No response

Platform

• OS: macOS
• Browser: Chrome
• Version: latest

Additional context

No response

[ryansolid]

Yeah this is related to HMR. We need to wrap every component in a memo in order for it to hot swap. Unfortunately that is the only way Hot Module Reloading can work in Solid. We proxy all properties through.

Looking at this issue it is a scoping issue though with the compiler. Like changing the code to this works:

const Select = () => {
  return <div>....</div>;
};

Select.Option = function SelectOption() {
  return <div>....</div>;
};

export default Select;

This is an issue with Solid Refresh. I will move the issue there. You can also turn HMR off by setting hot: false or using the skip directive on the file.