JavaScript does not get loaded on the custom _error.js page

[MatthiasMargot]

None of my JavaScript gets loaded on the custom _error page in a production bundle, works fine in development though.

There's also things on the _error page that are reused elsewhere in the application like a common header that has some JavaScript for letting a user log in/sign out.

In the console I can see some errors saying the scripts can't be found.
Is this normal behaviour that you simply can't run any JavaScript on the _error page? Is there any way to hack around this?

asdf:1 GET https://<BASE_URL>/_next/56777ac5-5382-4caf-9a49-e437db6e03a1/page/asdf.js net::ERR_ABORTED

• I have searched the issues of this repository and believe that this is not a duplicate.

Steps to Reproduce (for bugs)

1. Create a custom _error.js page in the pages folder that's part of next's api
2. Go to a route that doesn't exist

Context

I was asked to implement a newsletter subscription form on the custom error page in order to give the user the ability to be notified as soon as a certain page exists because we have links that don't lead anywhere yet for a second stage of the project.

Your Environment

Tech	Version
next	4.2.3
node	9.5.0
OS	Mac OS X
Chrome	65.0.3325.181

[timneutkens]

Try upgrading to Next 6

[timneutkens]

Thanks for following the issue template perfectly 🙏

[MatthiasMargot]

Is that the answer to this problem?
I'm currently on next 4.2.3, is that safe to just do?
Are you guys keeping complete backward compatibility?

[timneutkens]

If you're not customizing .babelrc/next.config.js we're 100% backwards compatible with 4.2.3, otherwise you might have to make some changes.

[MatthiasMargot]

Hi, getting back on this thread because I have tried migrating but I have customized next.config.js and .babelrc and when I tried migrating babel was giving me errors and I lost too much time trying to do that, so I eventually ignored this for a while. I would really like to find a solution to this that does not involve the migration.

A couple of things I can imagine but wouldn't know how to implement in next exactly:

• Access to the status code of internal next mechanism from a custom routing middleware
• Redirecting from the _error page via next/router (but that again would mean js would need to run, question: can you redirect with the next/router server-side and will that work inside say getInitialProps of the _error page?)

If all else fails, do you have a common issues migration guide with a customized .babelrc that states exactly what configurations/babel-syntax is not backward compatible?

I have tried debugging this but I'm getting errors I can't find mentioned on any other threads and it's gonna take me too long to fix this myself :/

[timneutkens]

@MatthiasMargot can you post your .babelrc + the errors you're getting?

[MatthiasMargot]

{
    "presets": [
        "next/babel", "flow"
    ],
    "plugins": [
        "inline-react-svg",
        "transform-flow-strip-types",
        ["babel-plugin-root-import",
            [
                {
                    "rootPathPrefix": "~"
                },
                {
                    "rootPathPrefix": "@",
                    "rootPathSuffix": "src/components"
                },
                {
                    "rootPathPrefix": "#",
                    "rootPathSuffix": "src/utils"
                }
            ]
        ],
        "babel-plugin-styled-components",
        ["styled-components", { 
            "ssr": true, 
            "displayName": true, 
            "preprocess": false }
        ],
        ["transform-define", "./env-config.js"]
    ]
}

UnhandledPromiseRejectionWarning: Error: .plugins[2][1] must be an object, false, or undefined

[timneutkens]

The error is actually pretty clear,

["babel-plugin-root-import",
            [
                {
                    "rootPathPrefix": "~"
                },
                {
                    "rootPathPrefix": "@",
                    "rootPathSuffix": "src/components"
                },
                {
                    "rootPathPrefix": "#",
                    "rootPathSuffix": "src/utils"
                }
            ]
        ],

this must be an object. Seems like it's an open pull request here: entwicklerstube/babel-plugin-root-import#93

Also ["transform-define", "./env-config.js"] must be an object too, you can do this using .babelrc.js: #4239 (comment)

[billnbell]

Yeah we need to get that PR entwicklerstube/babel-plugin-root-import#93 approved.

[timneutkens]

Going to close this as it works fine on latest.