Cannot read properties of null (reading 'querySelector')

[Eesssn]

Hi everyone I have an error, and I don't know what should I do or where should I search for that. can anybody help me. `Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'querySelector')

Call Stack r.getBody node_modules\destack\build\browser\grapes.min-02b325bd.js (4:584083) eval node_modules\destack\build\browser\grapes.min-02b325bd.js (4:284460) Array.forEach

r.toggleSelectComponent node_modules\destack\build\browser\grapes.min-02b325bd.js (4:283903) r.stopSelectComponent node_modules\destack\build\browser\grapes.min-02b325bd.js (4:283695) r.stop node_modules\destack\build\browser\grapes.min-02b325bd.js (4:292852) runDefault node_modules\destack\build\browser\grapes.min-02b325bd.js (4:623075) eval node_modules\destack\build\browser\grapes.min-02b325bd.js (4:626321)`

[LiveDuo]

@Eesssn

It would be helpful to provide a repository or a Codesandbox that reproduces the error. If the error is on a public one just share the url.

[Battlelamb]

Hello Great Work,

Followed instructions in the https://www.youtube.com/watch?v=zJoaxMX7AKM&ab_channel=AndreasTzionis

You can check the repo: https://github.com/Battlelamb/destack-test

All the best

[Battlelamb]

Env:

{ npm: '8.11.0', node: '16.15.1', v8: '9.4.146.24-node.21', uv: '1.43.0', zlib: '1.2.11', brotli: '1.0.9', ares: '1.18.1', modules: '93', nghttp2: '1.47.0', napi: '8', llhttp: '6.0.4', openssl: '1.1.1o+quic', cldr: '40.0', icu: '70.1', tz: '2021a3', unicode: '14.0', ngtcp2: '0.1.0-DEV', nghttp3: '0.1.0-DEV' }

[LiveDuo]

Hey @Battlelamb,

Is this about the problem mentioned in the summary of the issue or about something else?

[Battlelamb]

Hey,

Thnx for the replay

Yes it is the same issue

[Battlelamb]

[LiveDuo]

@Battlelamb

I managed to reproduce this. Thanks for validating and sharing the repo.

If you don't mind leaving it public for the next few days it would help to fix it.

[Battlelamb]

Great, thanks, by all means :)

[LiveDuo]

@Battlelamb @Eesssn

I think I got to the bottom of this. It seems React 18 introduces some changes with StrictMode to ensure useEffect is used correctly.

A quick dirty fix will be to set reactStrictMode to false in your next.config.js.

Regardless, I will deploy a fix sometime soon with version 0.11.4.

You can read more here:

1. https://github.com/facebook/react/issues/24502
2. https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects

[Battlelamb]

Great, I will check and get back to you.

Thnx a lot :)

[Battlelamb]

Yes, it is working right now.

Also I tried the react version it won't start.

Should I start a new issue? or I made something wrong? :)

You can check the public repo here: https://github.com/Battlelamb/destack-react-starter

Error: Debugger attached.

destack-react-starter@0.7.0 start destack -d "react-scripts start"

Debugger attached. Waiting for the debugger to disconnect... events.js:377 throw er; // Unhandled 'error' event ^

Error: spawn concurrently ENOENT at Process.ChildProcess._handle.onexit (internal/child_process.js:277:19) at onErrorNT (internal/child_process.js:472:16) at processTicksAndRejections (internal/process/task_queues.js:82:21) Emitted 'error' event on ChildProcess instance at: at Process.ChildProcess._handle.onexit (internal/child_process.js:283:12) at onErrorNT (internal/child_process.js:472:16) at processTicksAndRejections (internal/process/task_queues.js:82:21) { errno: -4058, code: 'ENOENT', syscall: 'spawn concurrently', path: 'concurrently', spawnargs: [ nodemon --watch "../../lib/destack/server" --ext "ts,json" --exec "ts-node -O '{\\"module\\":\\"commonjs\\"}' ../../lib/destack/server/react.ts", 'react-scripts start' ] } Waiting for the debugger to disconnect...

[Battlelamb]

The problem is gone but when I designed a site, it didn't save.

After "npm run build", it tried to start with "npm start", but there was only white blank screen.

Updating the public repo :))

[LiveDuo]

Hey @Battlelamb,

I just fixed a couple of issues with Windows. The version 0.12.0 is now up on NPM and you can try it with npm i destack@latest or using destack-react-starter.

Let me know if this fixes it.