Running into an issue at "Getting Dynamic" in the tutorial

I was following the tutorial and everything was going smoothly until I got to
yarn redwood db save & yarn rw db up. Now the localhost is showing “Something Went Wrong”.

Running the command yarn rw g scaffold post partially works, while the about and home pages show “Something Went Wrong” if I navigate to http://localhost:8910/posts then the page renders. However, if I click “+New” or “Create one?” then the page reloads with “Something Went Wrong” again.

I had the problem with Redwood v0.2.4 & now v0.2.5 as well.

This post seems related but based on ^0.1.0 so I thought it would be best to bring it up again.

macOS 10.15.3 (19D76)
node v13.11.0
yarn v1.22.4
redwoodjs/core “^0.2.5”

If you need any further information I am happy to provide it.

I thought about posting here but did not want to thread hijack.

Are you seeing any error messages in the Web Inspector? What about the console output where you’re running yarn rw dev?

Please do see @rob’s reply asking about possible error messages. That info will help.

There’s definitely complexity involved in the process, which we are trying to find ways to improve on the DX side of things. So know your experience and questions are really important for us.

So far in most cases where the error is “Something went wrong”, there is an issue with the code and/or the db save and up commands not having been run since a change. This Issue thread (and my linked comment specifically) give some examples as well as a link to a repo with example “finished” code.

1 Like

I am getting two errors in Web Inspector>Console>Errors (Firefox Dev Ed) from http://localhost:8910/:

SyntaxError: invalid regexp group util.js:71

    matchAll self-hosted:2931
    matchPath util.js:71
    RouterImpl router.js:114
    React 16
        renderWithHooks
        mountIndeterminateComponent
        beginWork
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        beginWork$1
        performUnitOfWork
        workLoopSync
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    js index.js:10
    Webpack 7
        __webpack_require__
        fn
        0
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>

&

The above error occurred in the <RouterImpl> component:
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider
    in FatalErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, FatalErrorBoundary. react-dom.development.js:19560
    React 18
        logCapturedError
        logError
        payload
        getStateFromUpdate
        processUpdateQueue
        resumeMountClassInstance
        updateClassComponent
        beginWork
        beginWork$1
        performUnitOfWork
        workLoopSync
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    js index.js:10
    Webpack 7
        __webpack_require__
        fn
        0
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>

console output after running yarn redwood dev is as follows:

yarn run v1.22.4
$ /Users/isaactait/Desktop/Coding/redwoodblog/node_modules/.bin/redwood dev
$ /Users/isaactait/Desktop/Coding/redwoodblog/node_modules/.bin/prisma2 generate --watch
$ /Users/isaactait/Desktop/Coding/redwoodblog/node_modules/.bin/webpack-dev-server --config ../node_modules/@redwoodjs/core/config/webpack.development.js
$ /Users/isaactait/Desktop/Coding/redwoodblog/node_modules/.bin/dev-server

13:58:29  db | Watching... /Users/isaactait/Desktop/Coding/redwoodblog/api/prisma/schema.prisma
13:58:29  db |
13:58:29  db | ✔ Generated Prisma Client to ./../node_modules/@prisma/client in 170ms
13:58:29  db |
13:58:31 api | Listening on http://localhost:8911
13:58:31 api | Watching /Users/isaactait/Desktop/Coding/redwoodblog/api
13:58:31 api |
13:58:31 api | Now serving
13:58:31 api |
13:58:31 api | ► http://localhost:8911/graphql/
13:58:31 web | ℹ 「wds」: Project is running at http://localhost:8910/
13:58:31 web | ℹ 「wds」: webpack output is served from /
13:58:31 web | ℹ 「wds」: Content not from webpack is served from /Users/isaactait/Desktop/Coding/redwoodblog/web
13:58:31 web | ℹ 「wds」: 404s will fallback to /index.html

I ran the commands yarn redwood db save & yarn redwood db up and now I am getting three errors in the Web Inspector:

First error message

[WDS] Disconnected! index.js:172
    close index.js:172
    initSocket socket.js:26
    dispatchEvent sockjs.js:170
    _close sockjs.js:970
    _close sockjs.js:958
    _transportClose sockjs.js:917
    g sockjs.js:66
    emit sockjs.js:86
    onclose sockjs.js:2976
    (Async: EventHandlerNonNull)
    WebSocketTransport sockjs.js:2974
    _connect sockjs.js:829
    _receiveInfo sockjs.js:803
    g sockjs.js:66
    emit sockjs.js:86
    doXhr sockjs.js:567
    g sockjs.js:66
    emit sockjs.js:86
    InfoAjax sockjs.js:374
    g sockjs.js:66
    emit sockjs.js:86
    onreadystatechange sockjs.js:1598
    (Async: EventHandlerNonNull)
    _start sockjs.js:1557
    AbstractXHRObject sockjs.js:1495
    (Async: setTimeout handler)
    AbstractXHRObject sockjs.js:1494
    XHRLocalObject sockjs.js:2915
    InfoAjax sockjs.js:356
    _getReceiver sockjs.js:536
    doXhr sockjs.js:556
    InfoReceiver sockjs.js:525
    (Async: setTimeout handler)
    InfoReceiver sockjs.js:524
    SockJS sockjs.js:731
    SockJSClient SockJSClient.js:39
    initSocket socket.js:20
    8910 index.js:176
    8910 app.chunk.js:64288
    Webpack 7

Second error message:

The above error occurred in the <RouterImpl> component:
    in RouterImpl (created by LocationProvider)
    in LocationProvider (created by Context.Consumer)
    in Location (created by Router)
    in Router (created by Routes)
    in Routes
    in ApolloProvider (created by GraphQLProvider)
    in GraphQLProvider (created by RedwoodProvider)
    in RedwoodProvider
    in FatalErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, FatalErrorBoundary. react-dom.development.js:19560
    React 18
        logCapturedError
        logError
        payload
        getStateFromUpdate
        processUpdateQueue
        resumeMountClassInstance
        updateClassComponent
        beginWork
        beginWork$1
        performUnitOfWork
        workLoopSync
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    js index.js:10
    Webpack 7
        __webpack_require__
        fn
        0
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>

Final error message:

SyntaxError: invalid regexp group util.js:71
    matchAll self-hosted:2931
    matchPath util.js:71
    RouterImpl router.js:114
    React 16
        renderWithHooks
        mountIndeterminateComponent
        beginWork
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        beginWork$1
        performUnitOfWork
        workLoopSync
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    js index.js:10
    Webpack 7
        __webpack_require__
        fn
        0
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>

Ah, helpful indeed. And, unfortunately, this may be a very strange, known Firefox issue you stumbled upon having to do with regex. See below. Could you try a different browser to confirm?

1 Like

Just tried it in Google Chrome Canary and localhost is loading fine and the demo site works great :exploding_head:

Thank you very much for the guidance. I am really excited for Redwood - keep up the great work!

1 Like

Good to hear! And sorry/not-sorry you had to be a trailblazer (the info is a huge help to us) :wink: We’ll* figure something out that hopefully doesn’t require patching an esoteric issue with Firefox that’s apparently been around for a loooong time.

*and by “we” I most definitely mean @peterp who’s been hammering at fixes the past week like a machine :mechanical_arm:

1 Like

Redwood ^0.3.0 works on Firefox :partying_face:

2 Likes