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

未關閉
#4,430 3 則留言 1 個 reaction 已指派 0 人 在 GitHub 檢視
triage
主要語言
TypeScript
星號
2k
分支
682
PR 合併指標
30 天內沒有已合併 PR

描述

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

貢獻指南

開啟貢獻指南

研究方向

Start by reproducing the failures with `ionic init --multi-app`, `ionic generate library sharedlib --project=mobile --dry-run`, and the reported shared-folder import. Review the generated `ionic.config.json`, `capacitor.config.json`, React project configuration, and `config-overrides.js`. Done means generation works for bare and React projects, shared files can be referenced, and the Capacitor `webDir` is correct for React.

由索引模型根據 Issue 內容生成。

評估

技術堆疊
react, typescript
領域
build-system, cli, frontend
Issue 類型
功能
難度
4/5
預估耗時
3-5 天
活躍度
停滯
描述清晰度
基本清楚
新手友好度
32/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。