Clone the repo (2.24.0) but the editor has error when I tried on storybook

[alextsoi]

1. Clone the repo
2. used node 18 ( tried node 16 and yarn install )
3. npm i --legacy-peer-deps
4. npm run storybook

Then I got error like this ( I tried all examples )

[alextsoi]

Please correct me if I am wrong.
After debugging some files from the repo using few hours T.T, I found that
select( preferencesStore ).get( scope, 'isComplementaryAreaVisible' )

The select( preferencesStore ) is always undefined
I guess the store initialized from @wordpress/preferences is not same as in this repo.
Therefore, I tried something like below screencap ( copied and modified a bit like what @wordpress/preferences do in its createStore )

The error is gone~~

However, I saw the code const isComplementaryAreaVisible = select( preferencesStore ).get( scope, 'isComplementaryAreaVisible' ); appears just few time, I think we can just handle undfined value of "select( preferencesStore )" directly

[johngodley]

You will need to use yarn to get the versions this repo has been tested with.

yarn install
yarn storybook

[derfoufi]

I have the same issue and the customStores workaround work for me.

[johngodley]

I am unable to reproduce a situation where a custom store is needed. More than likely you are using different versions of the @wordpress packages than is supported here. Version 2.26.0 has updated these versions and may solve some of these issues.

[klimeryk]

I've run into the same problem and unfortunately only adding the custom store as described above helped.

I've tried two different approaches (using Vite and CRA) and both led to the same issue around the stores. I've also confirmed that the workaround works for both Vite and CRA, so it makes me think that it's indeed a bug in isolated-block-editor.
To reproduce:

• Create a new CRA app: npx create-react-app issue-225
• cd issue-225
• npm install @automattic/isolated-block-editor
• npm install -D sass (needed to process the styles)
• replace src/App.js with this very basic editor:

import IsolatedBlockEditor from '@automattic/isolated-block-editor';

import './App.css';
import '@automattic/isolated-block-editor/build-browser/core.css';

const settings = {
  iso: {
    moreMenu: false,
  },
};

function App() {
  return (
    <div className="App">
      <h1>Editor!</h1>
      <IsolatedBlockEditor
        settings={ settings }
        onLoad={ ( parser, rawHandler ) => {
          console.log( 'parser: ', parser )
          console.log( 'rawHandler: ', rawHandler )
        } }
        onSaveContent={ ( content ) => {
          console.log( 'onContentSave' )
        } }
        onError={ () => {
          console.log( 'error' )
        } }
      ></IsolatedBlockEditor>
    </div>
  );
}

export default App;

Uncaught TypeError: select(...) is undefined

getActiveComplementaryArea selectors.js:18
    selector factory.js:45
    boundSelector Redux
    <anonymous> index.js:93
    mapResult index.js:132
    __unstableMarkListeningStores registry.js:123
    withPlugins registry.js:204
    updateValue index.js:132
    Store index.js:166
    useMappingSelect index.js:184
    useSelect index.js:271
    BlockEditor index.js:89
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533

Specifically, the error is on line 18 in @automattic/isolated-block-editor/src/components/with-registry-provider/interface-store/selectors.js (

isolated-block-editor/build-module/components/with-registry-provider/interface-store/selectors.js

Line 17 in 141fc37

const isComplementaryAreaVisible = select(preferencesStore).get(scope, 'isComplementaryAreaVisible');

).

Now, add the workaround with custom stores and the error goes away:

import IsolatedBlockEditor from '@automattic/isolated-block-editor';
import reducer from '@wordpress/preferences/build-module/store/reducer';
import * as selectors from '@wordpress/preferences/build-module/store/selectors';
import * as actions from '@wordpress/preferences/build-module/store/actions';

import './App.css';
import '@automattic/isolated-block-editor/build-browser/core.css';

const settings = {
  iso: {
    moreMenu: false,
    customStores: [
      {
        name: 'core/preferences',
        config: {
          reducer: reducer,
          selectors: selectors,
          actions: actions,
        },
      }
    ],
  },
};

function App() {
  return (
    <div className="App">
      <h1>Editor!</h1>
      <IsolatedBlockEditor
        settings={ settings }
        onLoad={ ( parser, rawHandler ) => {
          console.log( 'parser: ', parser )
          console.log( 'rawHandler: ', rawHandler )
        } }
        onSaveContent={ ( content ) => {
          console.log( 'onContentSave' )
        } }
        onError={ () => {
          console.log( 'error' )
        } }
      ></IsolatedBlockEditor>
    </div>
  );
}

export default App;

(well, the styles are affected by the default centered text, but the editor is working as expected overall)

Hope this helps! Would love to avoid using the custom store workaround, but I was not able to pinpoint what's the root issue here. Only the editor and sass are installed so I'd assume that the correct dependencies are pulled in (can share the package-lock.json if needed) yet the issue persists. So hoping these easy reproduction steps will help hunt his bug down! 🙏

[johngodley]

The issue originally reported here is that the storybook doesn't work (yarn storybook). I am unable to reproduce that problem.

@klimeryk that build setup isn't directly supported. As detailed in the readme (https://github.com/Automattic/isolated-block-editor#bundling-and-wordpress) you either need to load Gutenberg yourself, or you can use the included bundle. Your setup does not appear to be doing those things. I'm not actually able to get your example to work at all (different errors to do with React). I don't think this is a bug, just a problem with how things are built.

[klimeryk]

Weird, it's definitely working on my side (queue the "let's ship your machine to production then" joke 🙃). I'm exploring this package for a personal project, so no worries 🙇 Thanks for having a look!