NodeJS MODULE_NOT_FOUND when importing React component

Question

I'm following a tutorial (which is not publicly available) on how to set up a server-side rendered React App. The tutorial uses React, Babel and Webpack. I wanted to use typescript with it, so I installed required dependencies according to official docs.

My goal is to use renderToString function to render imported component in the index.js file. To make it more convenient I put the relevant files here but I will link my github repository so you can take a better look at the structure and dependencies yourself.

Everything was OK before I tried importing a component into the index.js file (github is in this OK state). Importing a component into the index.js creates an error (see below).

I tried changing the index.js file into index.tsx or index.jsx, removed and reinstalled node_modules, but nothing helped me and I am not sure where should I look for a possible solution. My current project structure looks like this:

EDIT: I've been able to track down the source of the problem - nodejs throws the error. I am still not sure on how to fix this problem.

client.tsx:

import ReactDOM from 'react-dom';
import { App } from './App';

ReactDOM.render(
  <App />,                                
  document.querySelector("#container")  
);

App.tsx:

// this function component worked fine inside of the client.tsx
export function App() {
  return (
    <div>
      <h1>Cats are love !</h1>
    </div>
  );
}

Error comes from index.tsx:

import express from 'express'
import { readFileSync } from 'fs';
import { renderToString } from 'react-dom/server';

import { App } from '../src/App';

const app = express();

app.use(express.static("dist"));

app.get("/", async (_request, response) => {
  
  const index = readFileSync(`public/index.html`, `utf8`);
  const rendered = renderToString(<App />);

  response.send(index.replace("{{rendered}}", rendered));

});

const port = 3000;
app.listen(port);

console.log(`Server listening on port ${port}`);

The error output reads:

catlord@Cat-Heaven:~/react-workspace/server-side-rendering$ npm run build

> [email protected] build
> webpack

asset bundle.js 1.03 MiB [emitted] [big] (name: client)
runtime modules 670 bytes 3 modules
modules by path ./node_modules/ 1010 KiB
  modules by path ./node_modules/react/ 108 KiB
    modules by path ./node_modules/react/*.js 404 bytes 2 modules
    modules by path ./node_modules/react/cjs/*.js 108 KiB 2 modules
  modules by path ./node_modules/scheduler/ 26.3 KiB
    modules by path ./node_modules/scheduler/*.js 412 bytes 2 modules
    modules by path ./node_modules/scheduler/cjs/*.js 25.9 KiB 2 modules
  modules by path ./node_modules/react-dom/ 875 KiB
    ./node_modules/react-dom/index.js 1.33 KiB [built] [code generated]
    ./node_modules/react-dom/cjs/react-dom.development.js 874 KiB [built] [code generated]
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
modules by path ./src/*.tsx 495 bytes
  ./src/client.tsx 298 bytes [built] [code generated]
  ./src/App.tsx 197 bytes [built] [code generated]
webpack 5.69.1 compiled successfully in 919 ms

catlord@Cat-Heaven:~/react-workspace/server-side-rendering$ npm start

> [email protected] start
> babel-node server/index.js

node:internal/modules/cjs/loader:936
  throw err;
  ^

Error: Cannot find module '../src/App'
Require stack:
- /home/catlord/react-workspace/server-side-rendering/server/index.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:933:15)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (/home/catlord/react-workspace/server-side-rendering/server/index.js:8:1)
    at Module._compile (node:internal/modules/cjs/loader:1101:14)
    at Module._compile (/home/catlord/react-workspace/server-side-rendering/node_modules/pirates/lib/index.js:136:24)
    at Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Object.newLoader [as .js] (/home/catlord/react-workspace/server-side-rendering/node_modules/pirates/lib/index.js:141:7)
    at Module.load (node:internal/modules/cjs/loader:981:32) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/home/catlord/react-workspace/server-side-rendering/server/index.js'
  ]
}

Answer 1

You can make a path relative to the root of the project with @

import { App } from '@/src/App';