This runs without errors:

/components/App.js:

import * as React from 'react';

export function App() {

  return (

    <div>

    </div>

  )

}

/renderers/dom.js:

import * as React from 'react';

import * as ReactDOM from 'react-dom';

import { App }  from 'components/App';

import '../styles/index.css';



ReactDOM.hydrate(

  <App initialData={window.__R_DATA.initialData} />,

  document.getElementById('root'),

);

/renderers/server.js:

import * as React from 'react';

import * as ReactDOMServer from 'react-dom/server';

import { App } from 'components/App';



export async function serverRenderer() {

  const initialData = {

    appName: 'My Project',

  };



  const pageData = {

    title: `${initialData.appName}`,

  };



  return Promise.resolve({

    initialData,

    initialMarkup: ReactDOMServer.renderToString(

      <App initialData={initialData} />,

    ),

    pageData,

  });

}

But when I switch out App.js with a class instead of a function (and also switch out (import * as React) with (import React) to avoid another curious error):

import React from 'react';



class App extends React.component {

    render () {

        <div>

        </div>

    }

}



export default App;

and switch out the { App } in the other two files with App, the app crashes and I get the following error:

    /Users/me/myProject/node_modules/@babel/runtime/helpers/inherits.js:5

[0]     throw new TypeError("Super expression must either be null or a function");

[0]     ^

[0] 

[0] TypeError: Super expression must either be null or a function

[0]     at _inherits (/Users/me/myProject/node_modules/@babel/runtime/helpers/inherits.js:5:11)

[0]     at /Users/me/myProject/src/components/App.js:29:26

[0]     at Object.<anonymous> (/Users/me/myProject/src/components/App.js:46:2)

[0]     at Module._compile (internal/modules/cjs/loader.js:1076:30)

[0]     at Module._compile (/Users/me/myProject/node_modules/pirates/lib/index.js:99:24)

[0]     at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)

[0]     at Object.newLoader [as .js] (/Users/me/myProject/node_modules/pirates/lib/index.js:104:7)

[0]     at Module.load (internal/modules/cjs/loader.js:941:32)

[0]     at Function.Module._load (internal/modules/cjs/loader.js:782:14)

[0]     at Module.require (internal/modules/cjs/loader.js:965:19)

Can anyone explain what's bringing about this error?

My suspicion is that it has to do with <App> being called twice in two different files but I don't know - I can work around it by using the function instead of the class but I would like the flexibility as well as the understanding of what's happening.

For the record, I'm not 100% clued up on the purpose of dom.js and server.js - I suspect they're there to help my app run server-side but I'm not sure - they came with what I used to install my React project (https://github.com/samerbuna).