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

Đang mở
#4,430 3 bình luận 1 reaction 0 người được giao Xem trên GitHub
triage
Ngôn ngữ chính
TypeScript
Star
2k
Fork
682
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

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

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.