setting "type" to "module" in package.json then not able to read es modules

Question

CONTEXT: I'm trying to start with SSR using react, and I've ran into this problem before the updates, and I'm pretty sure I'm missing something obvious but I'm not sure what it could be.

In my root directory I've got public, server, and src.

'./server/index.js'

require('ignore-styles')
require('url-loader')
require('file-loader')
require('regenerator-runtime/runtime')
require('@babel/register')({
    ignore: [/(node_modules)/],
    presets: [
        '@babel/preset-env',
        [
            '@babel/preset-react',
            {
                runtime: 'automatic',
             
            }
        ]
    ],
    plugins: [],
})
require('./ssr')

'./server/ssr.js'

import express from 'express';
import fs from 'fs';
import path from 'path';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { App } from "../src/App.js";

const server = express();

server.get(
    /.(js|css|map|ico|svg|png)$/,
    express.static(path.resolve(__dirname, '../build'))
)


server.use('*', async (req, res) => {
    let indexHTML = fs.readFileSync(
        path.resolve(__dirname, '../build/index.html'),
        {
            encoding: 'utf8',
        }
    )
    

    const app = renderToString(
        <StaticRouter location={req.originalUrl} context={{}}>
            <App />
        </StaticRouter>
    )

    indexHTML = indexHTML.replace(
        '<div id="root"></div',
        `<div id="app">${app}</div>`
    )


    res.contentType('text/html')
    res.status(200)

    res.send(indexHTML)
})

server.listen(3000, () => {
    console.log('port 3000 serving...');
})

'./src/App.js'

import React from 'react';
import './App.css';


export function App() {
  return (
    <div className="App">
      <h1>hello</h1>
    </div>
  );
}

export default { App } ;

'./package.json'

{
  "name": "portfolio",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.1",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^6.2.1",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@babel/register": "^7.16.7",
    "ignore-styles": "^5.0.1",
    "url-loader": "^4.1.1"
  }
}

AS A RESULT:

this is what I'm getting...

Module not found: Error: Can't resolve './reportWebVitals' in 'C:\Users\aarons\Dev\live-mystery\portfolio\src'
Did you mean 'reportWebVitals.js'?
BREAKING CHANGE: The request './reportWebVitals' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request

and when I can get the application to build and run on port 3000, this is what i get any time the page is re-rendered...

running... node --trace-warnings server gets me...

port 3000 serving...
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.
(node:17740) UnhandledPromiseRejectionWarning: 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.
    at ReactDOMServerRenderer.render (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4053:17)
    at ReactDOMServerRenderer.read (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at _callee$ (C:\Users\aarons\Dev\live-mystery\portfolio\server\/ssr.js:25:17)
    at tryCatch (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:63:40)
    at Generator.invoke [as _invoke] (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:294:22)
    at Generator.next (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtime.js:119:21)
    at asyncGeneratorStep (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:19:103)
dom\cjs\react-dom-server.node.development.js:4053:17)
m\cjs\react-dom-server.node.development.js:3690:29)
    at renderToString (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\react-dom\cjs\react-dom-server.node.development.js:4298:27)
    at _callee$ (C:\Users\aarons\Dev\live-mystery\portfolio\server\/ssr.js:25:17)
    at tryCatch (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\runtimefunction (for composite components) but got: undefined. You likely forgot to export your component from the file it's d.js:63:40)
    at Generator.invoke [as _invoke] (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenedom\cjs\react-dom-server.node.development.js:4053:17)rator-runtime\runtime.js:294:22)                                                                    m\cjs\react-dom-server.node.development.js:3690:29)
    at Generator.next (C:\Users\aarons\Dev\live-mystery\portfolio\node_modules\regenerator-runtime\rom-server.node.development.js:4298:27)untime.js:119:21)
    at asyncGeneratorStep (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:19:103)         .js:63:40)
    at _next (C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:21:194)                      rator-runtime\runtime.js:294:22)
    at C:\Users\aarons\Dev\live-mystery\portfolio\server\ssr.js:21:364                              untime.js:119:21)
(node:17740) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    at emitDeprecationWarning (internal/process/promises.js:180:11)                                 e, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
    at processPromiseRejections (internal/process/promises.js:249:13)
    at processTicksAndRejections (internal/process/task_queues.js:94:32)

Answer 1

I resolved it adding a package.json in the server folder scope with { "type": "module" } and removing that property from the main package.json as it was before