Next.js: JSX unexpected token

[khankuan]

Hi, I'm using the latest versions and has encountered an error on a simple skeleton:

Module build failed: SyntaxError: Unexpected token (27:6)

  25 |   render() {
  26 |     return (
> 27 |       <div>
     |       ^
  28 |         {JSON.stringify(this.props)}
  29 |       </div>
  30 |     );

Is there any special steps required for JSX?

Also, I'm getting transpiling error:

ReferenceError: regeneratorRuntime is not defined

[sergiodxa]

Have you customized the Babel configuration? Check in the console when you run next if are getting a message about a custom config, maybe you have a .babelrc in a parent directory and is being applied.

JSX works out of the box, that is the most usual reason I have seen for not working.

[khankuan]

@sergiodxa you're right! Had a package json somewhere above. Thanks :)

[justinsoliz]

@khankuan it looks like i'm running into a similar issue where I have a parent folder with a babel configuration. curious what your fix was for this issue?

[khankuan]

I removed the package.json file and it worked.

[alastrat]

In your current folder add a new .babelrc file with:

{ "presets": "next/babel", "env": { "test": { "presets": [ "env", "next/babel" ] } } }