next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Improve RSC plugin to provide better errors

Open shuding opened this issue 3 years ago • 1 comments

This PR improves the RSC plugin for SWC to throw an error when the "use client" directive is in the top level, but not before other statements / expressions. For example:

Code:

import 'react'

'use client'

Error:

The "use client" directive must be placed before other expressions. Move it to the top of the file to resolve this issue.

   ,----
 3 | 'use client'
   : ^^^^^^^^^^^^
   `----

Bug

  • [ ] Related issues linked using fixes #number
  • [ ] Integration tests added
  • [ ] Errors have a helpful link attached, see contributing.md

Feature

  • [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
  • [ ] Related issues linked using fixes #number
  • [x] Integration tests added
  • [ ] Documentation added
  • [ ] Telemetry added. In case of a feature if it's used or not.
  • [ ] Errors have a helpful link attached, see contributing.md

Documentation / Examples

  • [ ] Make sure the linting passes by running pnpm build && pnpm lint
  • [ ] The "examples guidelines" are followed from our contributing doc

shuding avatar Nov 03 '22 19:11 shuding

Failing test suites

Commit: 7c183f6101ab6bb27054b1bacfc9a1446e2dee6c

pnpm testheadless test/development/acceptance-app/ReactRefreshLogBox.test.ts

  • ReactRefreshLogBox app > render error not shown right after syntax error
Expand output

● ReactRefreshLogBox app › render error not shown right after syntax error

expect(received).toMatchSnapshot()

Snapshot name: `ReactRefreshLogBox app render error not shown right after syntax error 1`

- Snapshot  -  9
+ Received  + 11

- index.js (6:18) @ ClassDefault.render
-
-   4 | class ClassDefault extends React.Component {
-   5 |   render() {
- > 6 |     throw new Error('nooo');
-     |          ^
-   7 |     return <h1>Default Export</h1>;
-   8 |   }
-   9 | }
+ ./index.js
+ Error: 
+   x Expected '{', got 'throw'
+    ,----
+  6 | throw new Error('nooo');
+    : ^^^^^
+    `----
+
+ Caused by:
+     0: failed to process input file
+     1: Syntax Error

  327 |     )
  328 |     expect(await session.hasRedbox(true)).toBe(true)
> 329 |     expect(await session.getRedboxSource()).toMatchSnapshot()
      |                                             ^
  330 |
  331 |     await cleanup()
  332 |   })

  at Object.<anonymous> (development/acceptance-app/ReactRefreshLogBox.test.ts:329:45)

Read more about building and testing Next.js in contributing.md.

ijjk avatar Nov 03 '22 20:11 ijjk