CODEWITHSUNDEEP
node.jswordpressrestnpmsapui5
mxkraus
mxkraus

Reputation: 191

Use npm wpapi as UI5 shim module

I have a basic setup with UI5 Tooling and "openui5-basic-template-app" Boilerplate.

In this app i want to communicat with my local REST API based on Wordpress. So the /wp-json Endpoint works great, i get response if i target this one in the browser.

To import this in my UI5 Application i added a new shim in the ui5.yaml which loads the wpapi.js from wpapi npm module (Installed via npm install wpapi).

specVersion: '2.6'
metadata:
  name: openui5-basic-template-app
type: application
framework:
  name: OpenUI5
  version: "1.96.2"
  libraries:
    - name: sap.m
    - name: sap.ui.core
    - name: sap.ui.layout
    - name: themelib_sap_horizon
---
specVersion: "2.6"
kind: extension
type: project-shim
metadata:
  name: thirdparty
shims:
  configurations:
    lodash: # name as defined in package.json
      specVersion: "2.6"
      type: module # Use module type
      metadata:
        name: lodash
      resources:
        configuration:
          paths:
            /resources/thirdparty/lodash/: "" # map root directory of lodash module
    wpapi: # name as defined in package.json
      specVersion: "2.6"
      type: module # Use module type
      metadata:
        name: wpapi
      resources:
        configuration:
          paths:
            /resources/thirdparty/wpapi/: "" # map root directory of wpapi module

Also i imported this in my controller.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "../model/formatter",
    "thirdparty/lodash/lodash",
    "thirdparty/wpapi/wpapi",
], function(Controller, formatter) {
    "use strict";
...

But starting the server for checking the result it says

wpapi.js:17 Uncaught ReferenceError: require is not defined at wpapi.js:17:22"

because wpapi loads all its dependencies with via "require()".

enter image description here

Is there a workaround for this?

Upvotes: 0

Views: 522

Answers (1)

mxkraus
mxkraus

Reputation: 191

Solved it by simply targeting to the sub directory "/browser/wpapi.js" of the wpapi npm module.

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "../model/formatter",
    "thirdparty/lodash/lodash",
    "thirdparty/wpapi/browser/wpapi",
], function(Controller, formatter) {
    "use strict";
...

Upvotes: 1

Related Questions