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
- Vorherrschende Sprache
- TypeScript
- Sterne
- 2k
- Forks
- 682
- PR-Merge-Kennzahlen
- Keine gemergten PRs in 30 T.
Beschreibung
**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 (
|
```
Beitragsleitfaden
Bewertung
Dieses Issue wurde noch nicht bewertet.