Cannot use `createResource` at the top of a module (`build` hang and `yarn dev` doesn't work - but hot reloading does -)

[Mimuuu]

Describe the bug

First of all, let me preface this by saying I don't know if this is a bug or something in the behaviour of solidjs (or js in general) that I'm missing.

I have a pretty simple app in which I (would want to) use a resource like this (I try to show only the relevant bits):

// the API call has no parameters, it's an empty GET request
export const [data, { mutate, refetch }] = createResource(asyncFunc_APICall); // this is line 10 - ref for logs below

// This is the homepage
export default function Index() {
    return (
        <Component data={data()} />
    );
}

I have a bunch of child components inside Component. All the way down I have this:

import { mutate, refetch } from "Index"

export default function ChildComponent(props: Props) {
    const action = async () => {
        // some API call
        // either refetch or mutate depending
    }
}

Now what is happening is this:

If I run yarn build, the script hangs in this position forever:

$ solid-start build
 solid-start build
 version  0.2.6
 adapter  node

solid-start building client...
solid-start rendering index.html...
// it hangs here forever

Now the most confusing part for me, if I run yarn dev, I get this in the console (and in the app):

solid-start dev
 version  0.2.6
 adapter  node

  VITE v3.2.4  ready in 262 ms

  ➜  Local:   http://localhost:3000/
  ➜  Network: use --host to expose
  ➜  Inspect: http://localhost:3000/__inspect/


  ➜  Page Routes:
     ┌─ http://localhost:3000/*404
     └─ http://localhost:3000/

  ➜  API Routes:
     None! 👻

GET http://localhost:3000/
An unhandled error occured: TypeError: Cannot read properties of undefined (reading 'id')
    at Proxy.createResource (/project_path/node_modules/solid-js/dist/server.cjs:398:35)
    at /project_path/src/routes/index.tsx:10:43
    at async instantiateModule (file:///project_path/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:53058:9)
GET http://localhost:3000/
An unhandled error occured: TypeError: Cannot read properties of undefined (reading 'id')
    at Proxy.createResource (/project_path/node_modules/solid-js/dist/server.cjs:398:35)
    at /project_path/src/routes/index.tsx:10:43
    at async instantiateModule (file:///project_path/node_modules/vite/dist/node/chunks/dep-67e7f8ab.js:53058:9)

From my understanding, createResource is a Signal and should be allowed to be defined like this. If I define a random Signal similarly I don't have any issues either.

What is VERY confusing to me is the following though, once I am on this error above, if I move my resource inside Index like this:

export default function Index() {
    const [data, { mutate, refetch }] = createResource(asyncFunc_APICall);
    
    return (
        <Component data={data()} />
    );
}

The error disappear, now as expected I have import errors. If I move the resource back as it was originally, everything works fine. No errors, everything updates as expected, until I ctrl-c and yarn dev again and the error shows up again.

PS: The example link does not work, couldn't make solid work in it, not sure why.

Your Example Website or App

https://stackblitz.com/edit/solidjs-templates-bm2b3n?file=src/Child.tsx

Steps to Reproduce the Bug or Issue

1. Declare and export a resource at the top level of a module

2. run yarn dev and observe some errors

3. keeping the server running, move the resource inside a component, let the hot-reloading do its thing

4. move the resource back to its original place at the top level of a module, everything works fine

5. Observe that as long as a resource is created at the top-level of a module, build hangs forever.

Expected behavior

build should probably not hang but error out.

Running yarn dev first should (?) correctly handle resource at the top level of a module.

Screenshots or Videos

No response

Platform

• OS: [macOS]
• Browser: [Firefox]

Additional context

Thank you!

[ryansolid]

createResource internally generates a unique identifier so that it can be stable across SSR boundaries and it uses the reactive context to do so. On client we can ignore this but for SSR we cannot because we need to match on hydration. A top-level createResource would not work here.

Also I don't know if a top-level createResource makes sense in general as it would be shared between all requests/sessions. If you are just loading some data that is needed all the time when the server loads I'd be tempted to fetch it near the entry before calling render and then inject it using context. Alternatively put the resource in your component and just have the function return the data instead of refetching.

let data;

// in component or routeData
const [resource] = createResource(async () => {
  let res = data || await something()
  return res;
})

As for the build problem I'm not sure. The error is a runtime one so if it still happens when the dev server page is closed then I have no idea. If it only happens when its open and trying to reload well that might be HMR based, so can confirm if manual reload does the same. Mind you HMR is just a transform on our side so very well might still be the Vite build process.

[ryansolid]

In setting up for SolidStarts next Beta Phase built on Nitro and Vinxi we are closing all PRs/Issues that will not be merged due to the system changing. If you feel your issue was closed in mistake. Feel free to re-open it after updating/testing against 0.4.x release. Thank you for your patience.

See #1139 for more details.