Can't create error page called $error.svelte

[benaltair]

Describe the bug
When I name my error page $error.svelte as described in the docs it throws an error from any page I visit.

Logs

SyntaxError: Unexpected token (6:187)
    at Object.pp$4.raise (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:35243:13)
    at Object.pp.unexpected (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:32935:8)
    at Object.pp.expect (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:32929:26)
    at Object.pp$3.parseObj (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:34879:12)
    at Object.pp$3.parseExprAtom (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:34618:17)
    at Object.pp$3.parseExprSubscripts (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:34445:19)
    at Object.pp$3.parseMaybeUnary (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:34422:17)
    at Object.parseMaybeUnary (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:42964:29)
    at Object.pp$3.parseExprOps (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:34357:19)
    at Object.pp$3.parseMaybeConditional (D:\Github\conference\node_modules\vite\dist\node\chunks\dep-efe32886.js:34340:19)

To Reproduce

1. Clone the error-page-name-bug branch of our repo.
2. Navigate to any page (for instance http://localhost:3000/).

Expected behavior
Navigating to any page should bring up that page. This breaks the whole site.

Information about your SvelteKit Installation:

  System:
    OS: Windows 10 10.0.19042
    CPU: (16) x64 AMD Ryzen 7 3800X 8-Core Processor
    Memory: 15.56 GB / 31.92 GB
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD      
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 89.0.4389.90
    Edge: Spartan (44.19041.423.0), Chromium (89.0.774.63)       
    Internet Explorer: 11.0.19041.1
  npmPackages:
    @sveltejs/kit: next => 1.0.0-next.59 
    svelte: ^3.29.0 => 3.35.0

• Browser: Chrome

• Adapter: Netlify

Severity
Blocking an upgrade. I'm unsure how the routing works to be honest, but it doesn't seem like I should still be using the old Sapper naming convention for the error page and I'm worried it'll break in the future.

Additional context
For history, this repo was migrated from Sapper. For some reason, the error page _error.svelte still works. This issue only comes up when renaming it to match the Kit docs. Although _error.svelte does work, I'm seeing issues #715 and #784 consistently.

[Rich-Harris]

I think I know what's happening here — the SSR component includes a sourcemap for the CSS, which contains the source code in its entirety. Things like process.env.NODE_ENV gets string-replaced by Vite, but it replaces it in the string containing the source code in a way that introduces a syntax error.

Because the error component is always included (just in case), this blows up the app.

This needs a proper fix but in the meantime you should be able to solve it by not using process.env.NODE_ENV — use dev from $app/env instead.

[benaltair]

Thanks @Rich-Harris, switching from const dev = process.env.NODE_ENV === 'development' to import { dev } from '$app/env' now allows the $error.svelte rename without errors.

See the fix here: https://github.com/bahaistudies/conference/commit/dda146af397bdab59b191669839733d3b250c193

[ignatiusmb]

The repo can't be found and I think this isn't a problem anymore in the latest version. Closing.