Moving .jsx components from Create-React-App

[valorloff]

I'm trying move .jsx components looks like:

class Header extends React.Component {
  constructor(props) {
............................................
}
render() {
    return 
    (
    <div className="nav-container">
      <a id="top"></a>
        <nav>
          <div className="nav-utility">
            <div className="module left">
 ..........................)

from production ready CreateReactApp to new next.js project and once faced with module parse fail:

Module parse failed: /home/orloff/projects/dst-next/src/app/components/layout/header.jsx Unexpected token (40:6)
You may need an appropriate loader to handle this file type.
| render() {
|     return
|     ( <div>Header</div>
|   //   <div className="nav-container">
|   //     <a id="top"></a>

 @ ./components/App.js 11:14-44
 @ ./pages?entry
 @ multi ./pages?entry

what is correct way solve it?

[Florian-R]

This is caused by the jsx extension. See #2391 and #2699

[timneutkens]

Closing as duplicate

[valorloff]

Thanks!
i'm add content of examples/with-jsx/next.config.js and next llaunched properly

[valorloff]

but not works properly:
yarn build-next && yarn build-firebase

> Using "webpack" config function defined in next.config.js.
> Failed to build on /tmp/53bd3882-64aa-43bd-9ad1-3cdc2e54cc93
{ Error: ./components/App.js
Module not found: Error: Can't resolve './layout/header' in '/home/orloff/projects/dst-next/src/app/components'
resolve './layout/header' in '/home/orloff/projects/dst-next/src/app/components'

though
header.jsx in place, what is wrong?

[valorloff]

using description file: /home/orloff/projects/dst-next/src/app/package.json (relative path: ./components)
    Field 'browser' doesn't contain a valid alias configuration
  after using description file: /home/orloff/projects/dst-next/src/app/package.json (relative path: ./components)
    using description file: /home/orloff/projects/dst-next/src/app/package.json (relative path: ./components/layout/header)
      no extension
        Field 'browser' doesn't contain a valid alias configuration
        /home/orloff/projects/dst-next/src/app/components/layout/header doesn't exist
      .js
        Field 'browser' doesn't contain a valid alias configuration
        /home/orloff/projects/dst-next/src/app/components/layout/header.js doesn't exist
      .json
        Field 'browser' doesn't contain a valid alias configuration
        /home/orloff/projects/dst-next/src/app/components/layout/header.json doesn't exist
      as directory
        /home/orloff/projects/dst-next/src/app/components/layout/header doesn't exist
[/home/orloff/projects/dst-next/src/app/components/layout/header]
[/home/orloff/projects/dst-next/src/app/components/layout/header.js]
[/home/orloff/projects/dst-next/src/app/components/layout/header.json]
[/home/orloff/projects/dst-next/src/app/components/layout/header]
 @ ./components/App.js 11:14-40

but in next.config.js explicitly defined:

module.exports = {
  distDir: "../functions/next",
  // Add extensions
  pagesExtensions: [
    'js',
    'jsx',
    'json'],

Where should Field 'browser' be?
Where in src/app/package.json should be described it?