ionic-team / ionic-team/ionic-cli

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

Abierto
#4,430 3 comentarios 1 reacción 0 asignados Ver en GitHub
triage
Lenguaje dominante
TypeScript
Estrellas
2k
Forks
682
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

**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 (
|
```

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.