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

[ar-daniel]

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>

[imhoffd]

There's a lot here, so let me know if I missed anything.

• React support in ionic generate

  ionic generate library is only supported in Ionic Angular 4+. Apologies for the confusion, you probably found the command in the online docs, but those are specific to Angular (we're working on a docs refactor). Use the terminal --help flag for React-specific CLI documentation. React has no generators, see this issue for React support in ionic generate: https://github.com/ionic-team/ionic-cli/issues/4432

• Importing outside of src/

  Looks like you found that this is the standard configuration of apps created with create-react-app. If react-scripts doesn't support it, we likely won't be able to support it for a while unless we roll our own webpack configuration. It's much better to keep using react-scripts and let the devs eject when they need advanced configuration.

  If you're using --multi-app, there's going to be a lot of manual work you'll need to do in order to get it working, especially for React. Not many people use the multi-app feature and we try to prioritize as best we can.

• Generating libraries

  I'm interested in hearing more about this. This would basically generate a TypeScript library with package.json, tsconfig.json, src/index.ts, etc? My first thoughts are it's easy enough to do manually and that people may not use it enough to warrant the feature.

[ar-daniel]

Thanks for acknowledging and creating a new issue.

I don't feel good about ejecting and mess up with the build configuration / lose the benefits that come with the initial ionic setup. I just attempted to rewire the config as a work-around.

Multi app setup could be seen as a common scenario when the interface of mobile and web are done separately (for the majority of UI and routing) and all the components in it are placed in the shared library. This would prove viable when dealing with different screen sizes while needing to achieve acceptable UI standard for the web page. And on extension to create desktop app like electron -(with necessary changes for desktop UI), this case would prove more useful. Please consider prioritizing.

For creating libraries- Yes, The library files would contain package.json, tsconfig.json, capacitor.config.json, .gitignore and src template tsx files with

• necessary peer and dev-dependencies setups
  • for bundling, transpiling and testing.
• scripts
  • for building, starting dev server, testing, publishing,

Creating it manually would be similar to setting up what the ionic start template gives from scratch.

For reference - I've found a tool - 'create-react-library' which can be used to create separate libraries that can be imported in any react project. Also has support for typescript. and sets up an example react app within the workspace (created with create-react-app) for integration and testing in an actual app environment, - all done through a CLI. https://github.com/transitive-bullshit/create-react-library

[damienromito]

@dwieeb did you find a way to use react-app-rewired with ionic on a monorepo ?