Errors while importing module in React

Question

The app was running good without any errors until I imported Imex, it showed 4 errors as follows

1. Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at App.js:8 at App

2. Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
    at createChild (react-dom.development.js:13446)
    at reconcileChildrenArray (react-dom.development.js:13719)
    at reconcileChildFibers (react-dom.development.js:14125)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

3. The above error occurred in the <div> component:

at div
at App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

4. Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.
    at createFiberFromTypeAndProps (react-dom.development.js:25058)
    at createFiberFromElement (react-dom.development.js:25086)
    at createChild (react-dom.development.js:13446)
    at reconcileChildrenArray (react-dom.development.js:13719)
    at reconcileChildFibers (react-dom.development.js:14125)
    at reconcileChildren (react-dom.development.js:16990)
    at updateHostComponent (react-dom.development.js:17632)
    at beginWork (react-dom.development.js:19080)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)

App.js

import Display from './Comp/Display';
import Imex from './ImportExport/Import';

function App() {
  return (
    <div>
      <Display />
      <Imex />
    </div>
  );
}

export default App;

The Display has some data which was displayed on the page before importing Imex.

Import.js

import a from "./Export";
const Imex = console.log(a); 
export default Imex;

Export.js

const a = "Name";
export default a;

The import.js statement to print "Name" in the console is working but the screen is not showing anything.

Answer 1

The error is simple you are not exporting a react component from both Import.js and Export.js.

But, this would work:

App.js

import Display from './Comp/Display';
import imex from './ImportExport/Import';

function App() {
  return (
    <div>
      <Display />
      {imex}
    </div>
  );
}

export default App;

Import.js

import a from "./Export";
const imex = a + " is john doe"; 
export default imex;

Export.js

const a = "Name";
export default a;

If you are writing javascript inside a react component (JSX), you should write js between two curly braces. And also it should be an expression not a statement

---

Edit:

Your code didn't work because you aren't exporting a react component. Basically, a react component is a reusable configuration object. You can always console.log the return value of a function (react component) and see the output. (Don't think too much about the component word)

In the Import.js file, you are exporting the return value of the console.log function. Still don't get it? Well, please consider this code

function foo(num) {
    return num + 10;
}

const x = foo(5);
console.log(x);

What would be the output of x? x will be 15.

And, What would be the output of the code down below?

function foo(num) {
    const n = num + 10;
    some_task(n);
}

const x = foo(5);
console.log(x);

This still calculates the result but, it doesn't return the result. console.log(' ') is something like that. It won't return anything. But it does some tasks. So, the return value of Import.js will always be undefined.

Also in the Export.js file, the same rule applies. But, it does return something. Which is the value of a. But not a react configuration object.

In the App.js file, you are rendering a function that should be a react component. Because react expects a react configuration object when you are <Foo /> doing this. The capitalized name is just a convention of naming a component.

How does my code work? There in Export.js file, it exports a variable. just a variable. And then in the Import.js file, it mutates the exporting variable in the Export.js (imports a and then adds some string at the end of a finally exports it) Both aren't a react component.

Then what are curly braces?

Side Note: Everything you write inside the return statement of a component, is something called JSX. Which stands for Javascript XML. It simply allows us to directly write HTML like syntax inside javascript. And it also ships with extra other features.

Curly braces are there for writing javascript inside JSX. It may sound confusing. Curly braces are a special syntax, that simply allows react to know that the content in between braces is javascript.

Please consider this code:

function App() {
    const l = 'Simon Doyle';
    return (
        <div>
            {l}
        </div>
    );
}

What would happen here? First of all, there is a div. please ignore that. And then there are curly braces. There the JSX parser will know that the inside braces there is gonna be a javascript expression. And if it doesn't return an object and also it does return something, then it will render it as HTML. If the return value is an array, react will iterate over the array and render them as different HTML elements.

Anther Side Note: React expects content inside curly braces to be an expression, not a statement. And it should return something. Return is not only for functions. Even a variable returns something. Which is the value of the variable. You can try it on repl :)

Another example:

function List() {
    const l = ['Peter', 'Simon', 'Doyle', 'Poirot'];
    return (
        <div>
            {l.map((name) => {
                <h1>{name}</h1>;
            })}
        </div>
    );
}

Here, we manually iterate over the array And return a new array. It's something the map method does. But it returns an array of react configuration objects :P Also, you can render object properties in JSX. And also you can render an array of objects. There, the concept of that is called props. Also, feel free to dive into the documentation. Because react has good documentation.

Also read this if you don't get it: What do curly braces mean in JSX (React)?

Answer 2

You're trying to render a component Imex but it has returned no JSX. Can you try with the JSX code?