Ionic CLI: creating multi app - fails to generate to shared components for react project and not able to import files outside of src directory

首先使用 ionic init --multi-app、ionic generate library sharedlib --project=mobile --dry-run 以及报告的共享文件夹导入来复现这些失败。检查生成的 ionic.config.json、capacitor.config.json、React 项目配置和 config-overrides.js。完成的标准是：生成对 bare 项目和 React 项目都有效，可以引用共享文件，并且 Capacitor 的 webDir 对 React 正确。

Description:

In multi app react project

1. unable to generate framework components using 'ionic generate' cmd (for creating a shared a library to be used by the mulitple apps.)

2. and when creating a shared lib folder manually

   • unable reference files in the common folder from within the apps in a multi app setup. states that - Relative imports outside of src/ are not supported.

associated issue

3. when setting up a capacitor ionic project within multiapp. In the capacitor.config.json
   • the value of "webDir" is set to "www", rather to be set to "build" for react projects.

Steps to Reproduce:

after initializing and creating a multi app project
$ ionic init --multi-app
$ ionic start     
//( for creating different apps in a sub-folder which would share a common library)

$ ionic generate library sharedlib --dry-run
//or shared component
$ ionic generate component sharedcompt --dry-run

Output:

$ ionic generate library sharedlib --dry-run
[WARN] Multi-app workspace detected, but cannot determine which project to use.
              Please set a defaultProject in ./ionic.config.json or specify the project using the
       global --project option. Read the documentation[1] for more information
       [1]: https://ion.link/multi-app-docs
[ERROR] Cannot perform generate for bare projects.
        The Ionic CLI doesn't know how to generate framework components for bare projects.

$ ionic generate library sharedlib --project=mobile  --dry-run
[ERROR] Cannot perform generate for React projects.   
        Since you're using the React project type, this command won't work. The Ionic CLI
        doesn't know how to generate framework components for React projects.

-- and when manually creating shared lib/ component and referencing from within a project
throws an error

Failed to compile
./src/pages/Home.tsx
Module not found: You attempted to import ../../../../common/src/tools/common/pages/ToolsPage which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.

My ionic info:

Ionic:
   Ionic CLI       : 6.8.0 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.1.0

Capacitor:
   Capacitor CLI   : 2.1.0
   @capacitor/core : 2.1.0

Utility:
   cordova-res : not installed
   native-run  : not installed

System:
   NodeJS : v14.2.0 (/usr/bin/node)
   npm    : 6.14.4
   OS     : Linux 5.0

Other Information:

Expected behaviour:

• to be able to generate/create shared files in a multiapp setup in bare projects. ( not to be associated a particular project)
• ionic generate for react projects to work.
• even if the shared file to be created manually - referencing of files (shared library files) outside of application src folder to be possible. (as that's the purpose of creating a multi app setup )

Attempts made to fix:
-- tried to rewire the build config with a rewire tool
https://github.com/timarney/react-app-rewired
following the instructions to use and
with creating a config-overrides.js file in project folder - code as follows as per
https://stackoverflow.com/questions/44114436/the-create-react-app-imports-restriction-outside-of-src-directory

const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');

module.exports = function override(config, env) {
    config.resolve.plugins = config.resolve.plugins.filter(plugin => !(plugin instanceof ModuleScopePlugin));

    return config;
};

and in the package.json updating scripts as

 "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  },

but didnt work for ionic serve. same error as before
when executing npm start used gives

Module parse failed: Unexpected token (17:17)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| 
| 
> const route_Tools: React.FC = () => {
|   return (
|     <IonPage>