Failed to resolve dependencies

[Taking1998]

Hi,
I cannot run exercise 8 due to the error

[Peter Muessig]

Hi @Taking1998,

did you follow the steps and then it fails or did you try to run the ex8 from the repo here? Can you share the content of your package.json with me? Either the dependency to the ui5-tooling-modules is outdated or chart.js version doesn't match?

BR, Peter

[Taking1998]

Hi @petermuessig ,
I practiced from front to back according to the steps, and then I couldn't see the effect until exercise 8.
Below is the package.json file of my application.

{
  "name": "myapp",
  "version": "1.0.0",
  "description": "UI5 Application: myapp",
  "author": "Taking1998",
  "license": "Apache-2.0",
  "scripts": {
    "build": "ui5 build --clean-dest",
    "build:opt": "ui5 build self-contained --clean-dest --all",
    "start": "ui5 serve --port 8080 -o index.html",
    "start:dist": "ui5 serve  --port 8080 -o index.html --config ui5-dist.yaml",
    "ts-typecheck": "tsc --noEmit",
    "lint": "eslint webapp"
  },
  "devDependencies": {
    "@openui5/ts-types-esm": "1.104.0",
    "@typescript-eslint/eslint-plugin": "^5.42.1",
    "@typescript-eslint/parser": "^5.42.1",
    "@ui5/cli": "^2.14.14",
    "@ui5/ts-interface-generator": "^0.5.4",
    "chart.js": "3.8.0",
    "eslint": "^8.27.0",
    "typescript": "^4.8.4",
    "ui5-middleware-livereload": "^0.7.0",
    "ui5-tooling-modules": "^0.7.12",
    "ui5-tooling-transpile": "^0.2.0"
  },
  "ui5": {
    "dependencies": [
      "ui5-middleware-livereload",
      "ui5-tooling-modules",
      "ui5-tooling-transpile"
    ]
  }
}

[Peter Muessig]

I used your package.json above and put it into the exercises/ex8/com.myorg.myapp deleted the package-lock.json and run npm i and it works for me. Maybe there is something wrong in the ui5.yaml. Can you share this as well here? THX

[Taking1998]

Hi @petermuessig ,
Below is the package.json file of my application.

specVersion: "2.6"
metadata: 
  name: com.myorg.myapp 
type: application 
framework: 
  name: OpenUI5 
  version: "1.104.0" 
  libraries: 
    - name: sap.f 
    - name: sap.m 
    - name: sap.ui.core 
    - name: sap.ui.unified 
    - name: themelib_sap_horizon 
builder:
  customTasks:
  - name: ui5-tooling-transpile-task 
    afterTask: replaceVersion 
    configuration: &transpileConfig 
      removeConsoleStatements: true 
      transpileAsync: true 
      transpileTypeScript: true 
  - name: ui5-tooling-modules-task 
    afterTask: replaceVersion 
server:
  customMiddleware: 
  - name: ui5-middleware-livereload
    afterMiddleware: compression 
    configuration: 
      debug: true 
      extraExts: "xml,json,properties" 
      port: 35729 
      path: "webapp" 
  - name: ui5-tooling-transpile-middleware 
    afterMiddleware: compression 
    configuration: *transpileConfig

[Peter Muessig]

Hi @Taking1998 ,

thanks for sharing, now I see the issue: you missed to add the ui5-tooling-modules-middleware into the customMiddleware section. This is needed to enable loading NPM packages with their name from the node_modules:

specVersion: "2.6"
metadata: 
  name: com.myorg.myapp 
type: application 
framework: 
  name: OpenUI5 
  version: "1.104.0" 
  libraries: 
    - name: sap.f 
    - name: sap.m 
    - name: sap.ui.core 
    - name: sap.ui.unified 
    - name: themelib_sap_horizon 
builder:
  customTasks:
  - name: ui5-tooling-transpile-task 
    afterTask: replaceVersion 
    configuration: &transpileConfig 
      removeConsoleStatements: true 
      transpileAsync: true 
      transpileTypeScript: true 
  - name: ui5-tooling-modules-task 
    afterTask: replaceVersion 
server:
  customMiddleware: 
  - name: ui5-middleware-livereload
    afterMiddleware: compression 
    configuration: 
      debug: true 
      extraExts: "xml,json,properties" 
      port: 35729 
      path: "webapp" 
  - name: ui5-tooling-transpile-middleware 
    afterMiddleware: compression 
    configuration: *transpileConfig
  - name: ui5-tooling-modules-middleware
    afterMiddleware: ui5-tooling-transpile-middleware

With the ui5.yaml above, I added the missing ui5-tooling-modules-middleware and queued it after the ui5-tooling-transpile-middleware. See the last entry in the yaml above.

This should fix your issue and you should be able to continue... 😄

Best,
Peter

[Taking1998]

Hi @petermuessig ,
I went to look at the content of section 8.1 again. I missed adding the content of the above configuration, so the project cannot access the node_modules folder. After using the configuration content you gave, the project can introduce chart.js/auto, and the chart is successfully displayed, thank you very much.😄

[Peter Muessig]

Glad to here that this helped, closing the issue now...