This runs without errors:

/ponents/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 'ponents/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 'ponents/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 Reactponent {
    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/ponents/App.js:29:26
[0]     at Object.<anonymous> (/Users/me/myProject/src/ponents/App.js:46:2)
[0]     at Module._pile (internal/modules/cjs/loader.js:1076:30)
[0]     at Module._pile (/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 ().

This runs without errors:

/ponents/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 'ponents/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 'ponents/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.ponent {
    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/ponents/App.js:29:26
[0]     at Object.<anonymous> (/Users/me/myProject/src/ponents/App.js:46:2)
[0]     at Module._pile (internal/modules/cjs/loader.js:1076:30)
[0]     at Module._pile (/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./samerbuna).

• javascript
• reactjs

1 Answer 1

React.ponent does not exist, React.Component is right