REACT - Error: Attempted import error/ App' does not contain a default export (imported as 'App'

Question

Returns an error: ./src/index.js Attempted import error: './App' does not contain a default export (imported as 'App').

import React, { Component, useState } from "react";

const App = () => {
    const [count, setCount] = useState(0);

  const  increment = () => {
        setCount(count + 1);
    };

    return (
      <div>
          <h2> counter app </h2>
          <button onClick={increment}>Clicked {count} times</button>
      </div>
    );
};

index

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(<App />, document.getElementById('root'));

Answer 1

In Nodejs, to use a variable or a function in another file, you have to export them. And we have two type export.

1. Use export const

// Export a variable
export const App = () => { ... }

// Import App in another file
import { App } from '...'

2. Use export default

// Export default
const App = () => { ... }
export default App

// Import App in another file
import App from '...'

Follow my example and see your code. You missing export App to could use this variable in another file.

So, In your case, you must export App to use in index.js:

import React, { Component, useState } from "react";

const App = () => {
    const [count, setCount] = useState(0);

  const  increment = () => {
        setCount(count + 1);
    };

    return (
      <div>
          <h2> counter app </h2>
          <button onClick={increment}>Clicked {count} times</button>
      </div>
    );
};
export default App

Remember, you just only have one export default in one file.

Answer 2

import React, { Component, useState } from "react";

const App = () => {
    const [count, setCount] = useState(0);

  const  increment = () => {
        setCount(count + 1);
    };

    return (
      <div>
          <h2> counter app </h2>
          <button onClick={increment}>Clicked {count} times</button>
      </div>
    );
};

export default App;

Answer 3

import openSocket from 'socket.io-client';

class Socket {
  constructor() {
    this.socket = openSocket('http://localhost:8080');
    this.socket.emit("connection", 1000);
  }
}

export default new Socket();


import socketService  from "../../services/socketService";

socketService.socket.on("new-order", (result) => {
  if (result.data) {
    console.log('order page',result.data);
    let x = [...records];
    x.unshift(result.data);
    setRecords(x);
  }
});