[Nextjs] crypto is not defined

[lucaswong98]

Describe the bug

When initialising the Layout component, an error appeared where in the Model class crypto is not defined. This seems to be specfic towards nextjs framework as this problem doesnt exist in cra app.

[working CRA version]: https://codesandbox.io/s/zen-sanderson-4rogmf?file=/src/App.js

Your Example Website or App

https://stackblitz.com/edit/nextjs-gbgxff?file=pages/index.js

Steps to Reproduce the Bug or Issue

1. Go to the website stackblitz
2. the error will appear when component on mount

Expected behavior

I expect to see same behavior as shown in cra app.

Operating System

Windows

Browser Type?

Chrome

Browser Version

111.0.5563.147

Screenshots or Videos

-

Additional context

[CRA version] : https://codesandbox.io/s/zen-sanderson-4rogmf?file=/src/App.js No response

[lucaswong98]

Silly me, all I have to do is to define the model within the component...

[sba020621]

Hi, I'm having this exact same error! How did you define the model within the component to resolve?

[lucaswong98]

you just need to define your model inside the component that uses it Example:

function Component(){
  const model = Model.fromJson(json);

  function factory(node: TabNode) {
    var component = node.getComponent();
    return <div>{node.getName()}</div>;
  }

  return <Layout model={model} factory={factory}/>
}

[sba020621]

That helps so much, thank you!

[shb3014]

To prevent this error for electron projects, model needs to be loaded only when window is available.

const [model, setModel] = useState(null);

useEffect(() => {
    setModel(Model.fromJson(modelJson));
}, []);

const factory = (node) => {
    var component = node.getComponent();
    if (component === "button") {
        return <button>{node.getName()}</button>;
    }
}

if (model) {
    return <Layout
        model={model}
        factory={factory}/>
} else {
    return (
        <div></div>
    )
}