Files
Jiachi LiuandGitHub 14c8900e70 style(dev-overlay): refine the error message header styling (#63823)
### What

Polish the UX based on the feedbacks from @sambecker 

* Fix the font that still use mono
* Align the color, to use red for the warnings
* Give the title to build error
* Only highlight the nextjs doc url as link

### After vs Before

#### Runtime Error


<img width="335" alt="image"
src="https://github.com/vercel/next.js/assets/4800338/64f2f692-1eae-41db-9287-046aff9ba112">
<img width="335" alt="image"
src="https://github.com/vercel/next.js/assets/4800338/2d4bad15-745e-4083-ba57-8968c0f321c2">

#### Build Error

<img width="335" alt="image"
src="https://github.com/vercel/next.js/assets/4800338/ecfc3883-4522-40c6-b042-6d85e7ea970e">
<img width="335" alt="image"
src="https://github.com/vercel/next.js/assets/4800338/bbf37ec5-b639-4b95-a87f-9911182e431c">



Closes NEXT-2958
2024-04-05 23:39:22 +02:00

192 lines
6.0 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ReactRefreshLogBox app default Can't resolve @import in CSS file 1`] = `
"./app/styles2.css
Module not found: Can't resolve './boom.css'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./app/styles1.css"
`;
exports[`ReactRefreshLogBox app default Import trace when module not found in layout 1`] = `
"./app/module.js:1:1
Module not found: Can't resolve 'non-existing-module'
> 1 | import "non-existing-module"
| ^
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./app/layout.js"
`;
exports[`ReactRefreshLogBox app default Should not show __webpack_exports__ when exporting anonymous arrow function 1`] = `
"index.js (3:11) @ default
1 | export default () => {
2 | if (typeof window !== 'undefined') {
> 3 | throw new Error('test')
| ^
4 | }
5 |
6 | return null"
`;
exports[`ReactRefreshLogBox app default boundaries 1`] = `
"FunctionDefault.js (1:51) @ FunctionDefault
> 1 | export default function FunctionDefault() { throw new Error('no'); }
| ^"
`;
exports[`ReactRefreshLogBox app default conversion to class component (1) 1`] = `
"Child.js (4:11) @ ClickCount.render
2 | export default class ClickCount extends Component {
3 | render() {
> 4 | throw new Error()
| ^
5 | }
6 | }"
`;
exports[`ReactRefreshLogBox app default css syntax errors 1`] = `
"./index.module.css:1:1
Syntax error: Selector "button" is not pure (pure selectors must contain at least one local class or id)
> 1 | button {}
| ^"
`;
exports[`ReactRefreshLogBox app default logbox: anchors links in error messages 1`] = `"Error: end https://nextjs.org"`;
exports[`ReactRefreshLogBox app default logbox: anchors links in error messages 2`] = `"https://nextjs.org/"`;
exports[`ReactRefreshLogBox app default logbox: anchors links in error messages 3`] = `"Error: https://nextjs.org start"`;
exports[`ReactRefreshLogBox app default logbox: anchors links in error messages 4`] = `"https://nextjs.org/"`;
exports[`ReactRefreshLogBox app default logbox: anchors links in error messages 5`] = `"Error: middle https://nextjs.org end"`;
exports[`ReactRefreshLogBox app default logbox: anchors links in error messages 6`] = `"https://nextjs.org/"`;
exports[`ReactRefreshLogBox app default logbox: anchors links in error messages 8`] = `"https://nextjs.org/"`;
exports[`ReactRefreshLogBox app default module init error not shown 1`] = `
"index.js (3:7) @ eval
1 | // top offset for snapshot
2 | import * as React from 'react';
> 3 | throw new Error('no')
| ^
4 | class ClassDefault extends React.Component {
5 | render() {
6 | return <h1>Default Export</h1>;"
`;
exports[`ReactRefreshLogBox app default should strip whitespace correctly with newline 1`] = `
"index.js (7:15) @ onClick
5 |
6 | <a onClick={() => {
> 7 | throw new Error('idk')
| ^
8 | }}>
9 | click me
10 | </a>"
`;
exports[`ReactRefreshLogBox app turbo Can't resolve @import in CSS file 1`] = `
"./app/styles2.css:1:2
Module not found: Can't resolve './boom.css'
> 1 | @import "./boom.css"
| ^
https://nextjs.org/docs/messages/module-not-found"
`;
exports[`ReactRefreshLogBox app turbo Import trace when module not found in layout 1`] = `
"./app/module.js:1:1
Module not found: Can't resolve 'non-existing-module'
> 1 | import "non-existing-module"
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
https://nextjs.org/docs/messages/module-not-found"
`;
exports[`ReactRefreshLogBox app turbo Should not show __webpack_exports__ when exporting anonymous arrow function 1`] = `
"index.js (3:11) @ {default export}
1 | export default () => {
2 | if (typeof window !== 'undefined') {
> 3 | throw new Error('test')
| ^
4 | }
5 |
6 | return null"
`;
exports[`ReactRefreshLogBox app turbo boundaries 1`] = `
"FunctionDefault.js (1:51) @ FunctionDefault
> 1 | export default function FunctionDefault() { throw new Error('no'); }
| ^"
`;
exports[`ReactRefreshLogBox app turbo conversion to class component (1) 1`] = `
"Child.js (4:11) @ ClickCount.render
2 | export default class ClickCount extends Component {
3 | render() {
> 4 | throw new Error()
| ^
5 | }
6 | }"
`;
exports[`ReactRefreshLogBox app turbo css syntax errors 1`] = `
"./index.module.css
Parsing css source code failed
Selector is not pure (pure selectors must contain at least one local class or id), (lightningcss, Selector(button, specificity = 0x1))"
`;
exports[`ReactRefreshLogBox app turbo logbox: anchors links in error messages 1`] = `"Error: end https://nextjs.org"`;
exports[`ReactRefreshLogBox app turbo logbox: anchors links in error messages 2`] = `"https://nextjs.org/"`;
exports[`ReactRefreshLogBox app turbo logbox: anchors links in error messages 3`] = `"Error: https://nextjs.org start"`;
exports[`ReactRefreshLogBox app turbo logbox: anchors links in error messages 4`] = `"https://nextjs.org/"`;
exports[`ReactRefreshLogBox app turbo logbox: anchors links in error messages 5`] = `"Error: middle https://nextjs.org end"`;
exports[`ReactRefreshLogBox app turbo logbox: anchors links in error messages 6`] = `"https://nextjs.org/"`;
exports[`ReactRefreshLogBox app turbo logbox: anchors links in error messages 8`] = `"https://nextjs.org/"`;
exports[`ReactRefreshLogBox app turbo module init error not shown 1`] = `
"index.js (3:7) @ <unknown>
1 | // top offset for snapshot
2 | import * as React from 'react';
> 3 | throw new Error('no')
| ^
4 | class ClassDefault extends React.Component {
5 | render() {
6 | return <h1>Default Export</h1>;"
`;
exports[`ReactRefreshLogBox app turbo should strip whitespace correctly with newline 1`] = `
"index.js (7:15) @ onClick
5 |
6 | <a onClick={() => {
> 7 | throw new Error('idk')
| ^
8 | }}>
9 | click me
10 | </a>"
`;