solid icon indicating copy to clipboard operation
solid copied to clipboard

Attempted import error

Open IsaccoSordo opened this issue 1 year ago • 1 comments

Describe the bug

Hello,

We are receiving reports from users that importing our SDK into their SSR applications results in the following errors:

Attempted import error: 'effect' is not exported from 'solid-js/web'
Attempted import error: 'memo' is not exported from 'solid-js/web' (imported as 'memo')
Attempted import error: 'template' is not exported from 'solid-js/web' (imported as 'template')
Error: export 'style' (imported as 'style') was not found in 'solid-js/web'

We attempted to resolve these issues by updating our rollup configuration file from this version to this version, explicitly excluding Solid dependencies from the bundle. Despite this, we continue to encounter the same errors when importing our module into a NextJS app.

I've linked a StackBlitz repository to this issue, which hosts a NextJS app attempting to import a SolidJS component, where one of the errors occurs.

For instance from our observations, directly calling createEffect in the example app does not trigger the error, but it seems that when it gets transpiled the error appears. If createEffect is called through the html property from import html from "solid-js/html";, we encounter the "Attempted import" error.

Thank you for your attention to this matter.

Your Example Website or App

https://stackblitz.com/edit/stackblitz-starters-dttbwm?file=app%2Fpage.tsx,packages%2Fmy-ui-lib%2Fsrc%2FApp.tsx

Steps to Reproduce the Bug or Issue

One way we found to consistently reproduce the issue is as follows:

  1. Set up a NextJS application.
  2. In the NextJS app, import html from solid-js using the statement: import html from "solid-js/html";.
  3. Attempt to use a SolidJS component within the NextJS application.

This should trigger the error mentioned above.

Expected behavior

The "Attempted import" errors should not appear in the console.

Screenshots or Videos

No response

Platform

Versions tested: 1.7.6, 1.7.11

Additional context

No response

IsaccoSordo avatar May 28 '24 09:05 IsaccoSordo

It looks like client bundled code is running on the server. Stuff like template is from client compiled code.

Our html and h libraries are client-only currently and do not support SSR as they rely on DOM APIs being present. So importing them on the server could easily produce bugs like that. We use our JSX which gets compiled for each environment.

If there is no need to server render these pieces. I suggest putting them in a dynamic import that is not resolved on the server... or if Next has any client only functionality that doesn't import the code. The problem is excluding Solid from the bundle, even solid-js/html is probably not going to be enough because whatever imports that is going to complain it can't find that import since it exists in the code. The whole entry point of import just needs to not be there in the code. Whether that is using like some sort of alias replacement or uninitialized dynamic import.

ryansolid avatar May 28 '24 15:05 ryansolid

In 1.9 instead of erroring on import we will error on calling the function.

This is fixed by this commit: https://github.com/solidjs/solid/commit/4f8597dc0e04f1cdb5c5502f6f82499ccb9c7b97

ryansolid avatar Sep 23 '24 22:09 ryansolid