Strapi, Unable to customize the ./admin/src/app.js, getting "This dependency was not found"

Questions and Answers
1
System Information
  • Strapi Version: 3.6.3
  • Operating System: MacOS64bit
  • Database: default
  • Node Version: node12.22.1
  • NPM Version: 6.14.12
  • Yarn Version: 1.22.5

• I am new to strapi, however, in current project, it is needed to integrate strapi with existing stack, specifically, integrate the strapi-admin
• In order to do that, have installed strapi via the following command:

npx create-strapi-app my-project --quickstart
  • As a result, have the following structure:
[bash myproject]$ tree -L 1
.
├── README.md
├── admin
├── api
├── build
├── config
├── extensions
├── favicon.ico
├── node_modules
├── package-lock.json
├── package.json
├── public
└── yarn.lock

With this goal, created ./admin/node_modules and installed express, (installed fs, net intentionally, due to the error, that will be observed here, later on) packages in it. Also, have used default admin.config.js

[bash admin]$ tree -L 1
.
├── admin.config.js
├── node_modules
├── package-lock.json
└── src

2 directories, 2 files
[bash admin]$ tree -L 1 node_modules/
node_modules/
├── accepts
├── array-flatten
├── body-parser
├── bytes
├── content-disposition
├── content-type
├── cookie
├── cookie-signature
├── debug
├── depd
├── destroy
├── ee-first
├── encodeurl
├── escape-html
├── etag
├── express
├── finalhandler
├── forwarded
├── fresh
├── fs
├── http-errors
├── iconv-lite
├── inherits
├── ipaddr.js
├── media-typer
├── merge-descriptors
├── methods
├── mime
├── mime-db
├── mime-types
├── ms
├── negotiator
├── on-finished
├── parseurl
├── path-to-regexp
├── proxy-addr
├── qs
├── range-parser
├── raw-body
├── safe-buffer
├── safer-buffer
├── send
├── serve-static
├── setprototypeof
├── statuses
├── toidentifier
├── type-is
├── unpipe
├── utils-merge
└── vary

50 directories, 0 files

[bash node_modules]$ tree -L 1 destroy/
destroy/
├── LICENSE
├── README.md
├── index.js
└── package.json

(Snippet of an original app.js)

....

import basename from "./utils/basename";
import injectReducer from "./utils/injectReducer";
import injectSaga from "./utils/injectSaga";
import Strapi from "./utils/Strapi";

// Import root component
import App from "./containers/App";
// Import Language provider
import LanguageProvider from "./containers/LanguageProvider";

import configureStore from "./configureStore";
import { SETTINGS_BASE_URL } from "./config";

// Import i18n messages
import { translationMessages, languages } from "./i18n";

import history from "./utils/history";

import plugins from "./plugins";

// const PORT = 8181;
// const HOST = "0.0.0.0";
// // app
// const app = express();
// app.get("/endpoint", (req, res) => {
//   res.send("customer API is being hit");
// });
// app.listen(PORT, HOST);
// console.log(`Running on http://${HOST}:${PORT}`);

// import express from '../node_modules/express' // Tried to place here, same error

const strapi = Strapi();

const pluginsReducers = {};
const pluginsToLoad = [];

import fs from '../node_modules/fs'
import express from '../node_modules/express'

Object.keys(plugins).forEach((current) => {
  const registerPlugin = (plugin) => {
    strapi.registerPlugin(plugin);

    return plugin;
  };
  const currentPluginFn = plugins[current];

  // By updating this by adding required methods
  // to load a plugin you need to update this file
  // strapi-generate-plugins/files/admin/src/index.js needs to be updated
  const plugin = currentPluginFn({
    registerComponent: strapi.componentApi.registerComponent,
    registerField: strapi.fieldApi.registerField,
    registerPlugin,
    settingsBaseURL: SETTINGS_BASE_URL || "/settings",
    middlewares: strapi.middlewares,
  });

.....

Upon attempt to build the package via npm run build, an error message showing up:


....

 ｢wds｣: 404s will fallback to /admin/
Starting the development server...

Admin development at http://localhost:8000/admin/
 



 ERROR  Failed to compile with 7 errors                  21:49:22

These dependencies were not found:

* fs in ./.cache/admin/node_modules/destroy/index.js, ./.cache/admin/node_modules/etag/index.js and 3 others
* net in ./.cache/admin/node_modules/express/lib/request.js

To install them, you can run: npm install --save fs net


This relative module was not found:

* ../node_modules/fs in ./.cache/admin/src/app.js
 WAIT  Compiling...                                      21:49:22

 ERROR  Failed to compile with 7 errors                  21:49:29

These dependencies were not found:

* fs in ./.cache/admin/node_modules/destroy/index.js, ./.cache/admin/node_modules/etag/index.js and 3 others
* net in ./.cache/admin/node_modules/express/lib/request.js

To install them, you can run: npm install --save fs net


This relative module was not found:

* ../node_modules/fs in ./.cache/admin/src/app.js

Quesitons:

• Any suggestions on why this error is showing up, at this stage?

• I have tried to use other, NPM Packages, and was getting similar error, when attempting to invoke their methods, by customizing the app.js, so, I thought, it is something to do with the webpack “package path chaging”

• Have tried to ignore the package by means of webpack, but, it didn’t help, is there a way to avoid this error, by means of webpack?

NOTE: running npm install --save fs net is not helping, neither from <project_root>/admin/src/ nor <project_root>
NOTE: I have reviewed an official documentation about customization. which suggests to leverage <project_root>/extensions folder, in order to create custom extension with it’s own modules, however, have done that, and, upon start, exact same error is coming up.