Memoed store getter is undefined

Describe the bug
The memoed store getter pattern from the official docs throws an error (fullName is not a function). It seems the getter is immediately invoked when the store is created (i.e. before actually explicitly accessing it). At that point in time the memoed function isn't defined yet, hence the error.

To Reproduce
Provide a code snippet and steps to reproduce the behavior:

Clone the repro repo
Run npm install and npm run dev
Open the app in a web browser
See error in console: Uncaught TypeError: fullName is not a function

Expected behavior
The app should render without an error.

Reproduction
GitHub repo

Additional context
The repro is literally just the official JS template with the code from the docs added to <App>.

CMIIW but I think this issue should be flagged on https://github.com/solidjs/solid-docs

Hmm, not sure. The docs/example per se are fine. It's unexpected to me though that the getter is immediately executed by createStore and was wondering whether that's a bug... I am happy to move the issue though if that makes more sense.

It shouldn't be executing on initial creation which is why the docs are written that way. If it is executing immediately that is a Solid bug. I use this pattern in the Realworld Demo app. It worked in 1.0 and I don't believe that stuff has changed but we should look at the reproduction.

@mhyfritz

@mhyfritz this is a documentation issue. Just return fullName, without calling it.

let fullName;
const [state, setState] = createStore({
user: {
  firstName: "John",
  lastName: "Smith",
  get fullName() {
    return fullName;
  },
},
});
fullName = createMemo(() => `${state.user.firstName} ${state.user.lastName}`);

What is in the docs should work. The idea is the getter is just a simple getter. So what you put in is what you get out. It shouldn't run immediately.

This is what it should be:

get fullName() {
  return fullName()
}

The get should be deferred to the property access. In so you can use it like store.fullName on demand. The get function shouldn't be ran immediately. https://github.com/solidjs/solid/blob/main/packages/solid/store/src/store.ts#L84

@ryansolid

It should not, @ryansolid. There is a mistake.

get fullName() {
  return fullName()
}

is written in the docs, and such getter will call the inner function immediately. This is a mistake, it should be:

get fullName() {
  return fullName
}

to return a reference to the memoized function. Those two brackets after fullName should not be there.
Sorry, I was wrong - completely missed that this is a getter. This is a bug in createStore, since fullName is called before it's initialized.

Getters only run when accessed, in this case, fullName getter should not even evaluate given that the property wasn't accessed even before createMemo. This is a bug.

Yep, my bad. It's a bug in createStore - happens with or without createMemo.

The problem is:

solid/packages/solid/store/src/store.ts

Lines 368 to 371 in 670f4f3

    
           const wrappedStore = wrap( 
        
             unwrappedStore, 
        
             "_SOLID_DEV_" && ((options && options.name) || DEV.hashValue(unwrappedStore)) 
        
           );

The demo is running in dev mode (_SOLID_DEV_) and since options.name hasn't been set invokes DEV.hashValue on the initial store which further down JSON.stringifies the initial store, which tries to evaluate the getter method.

@cynecx

That makes a lot of sense. Thank you @cynecx, that saves me some investigation. Some of the Dev mode stuff less tested in conjunction. Ok, well looks like we have a direction. I should have made a test for nesting Memos too.. I think I just disliked how it looked and hoped to do something differently at some point and just never added them. That's a mistake.

fix solidjs#661 - state setter, fix solidjs#662 - hasing getters, upd…

Navigation Menu

Repository navigation

Memoed store getter is undefined #662

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const wrappedStore = wrap(
	unwrappedStore,
	"_SOLID_DEV_" && ((options && options.name) \|\| DEV.hashValue(unwrappedStore))
	);

Memoed store getter is undefined #662

Description

Activity

lxsmnsyc commented on Sep 20, 2021

mhyfritz commented on Sep 20, 2021

ryansolid commented on Sep 20, 2021

high1 commented on Sep 20, 2021

ryansolid commented on Sep 20, 2021

high1 commented on Sep 20, 2021

lxsmnsyc commented on Sep 20, 2021

high1 commented on Sep 20, 2021

cynecx commented on Sep 20, 2021

ryansolid commented on Sep 20, 2021

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions