Problems with Dependencies Sharing

[seikosantana]

Hi, I'm working on an Ionic application where I load remote components from, and on the remote component which i forked form remote component starter, i tried putting shared dependencies into remote-component.config.js.

The first one i tried was putting "@ionic/react": require("@ionic/react"), and I'm getting

export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1176:20)
    at Module._compile (node:internal/modules/cjs/loader:1218:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)
    at Module.load (node:internal/modules/cjs/loader:1117:32)
    at Module._load (node:internal/modules/cjs/loader:958:12)
    at Module.require (node:internal/modules/cjs/loader:1141:19)
    at require (node:internal/modules/cjs/helpers:110:18)
    at Object.<anonymous> (D:\Iotatechnology\iotaboard-frontend\dashboard-modules\iotaboard-dashboard-rwth\node_modules\@ionic\react\dist\index.js:6:20)
    at Module._compile (node:internal/modules/cjs/loader:1254:14)

Any clue why this is happening? Thanks in advance!

[seikosantana]

I should have read the readme more carefully..

[joelnet]

I should have read the readme more carefully..

Hi I know I'm a bit late, but what was it that was wrong and how did you solve it?

[seikosantana]

Hi, thanks for your response.

If I remember correctly, I moved remote-component.config.js inside src on my react application, and then add package names I want to be shared with the remote component like:

/**
 * These dependencies will be made available to the Remote Components.
 */
module.exports = {
  resolve: {
    react: require("react"),
    "@ionic/react": require("@ionic/react"),
    "@ionic/react-router": require("@ionic/react-router"),
    "@microsoft/signalr": require("@microsoft/signalr"),
    // "chart.js": require("chart.js"),
    "date-fns": require("date-fns"),
    "ionicons": require("ionicons"),
    // "react-chartjs-2": require("react-chartjs-2"),
    "react-dom": require("react-dom"),
    "react-router": require("react-router"),
    "react-router-dom": require("react-router-dom")
  },
};

I then also add them on remote-component.config.js on a repository forked from your remote component starter

/**
 * Dependencies for Remote Components
 */

module.exports = {
  resolve: {
    "react": "react",
    "@ionic/react": "@ionic/react",
    "@ionic/react-router": "@ionic/react-router",
    "@microsoft/signalr": "@microsoft/signalr",
    "@types/react": "@types/react",
    "@types/react-dom": "@types/react-dom",
    "@types/react-router": "@types/react-router",
    "@types/react-router-dom": "@types/react-router-dom",
    "react-router-dom": "react-router-dom",
    // "chart.js": "chart.js",
    "date-fns": "date-fns",
    "ionicons": "ionicons",
    // "react-chartjs-2": "react-chartjs-2",
    "react-dom": "react-dom",
    "react-router": "react-router",
    "react-router-dom": "react-router-dom"
  }
};

Found it related to https://github.com/Paciolan/remote-component#creating-a-remote-component-with-webpack and https://github.com/Paciolan/remote-component-starter#external-dependencies

so that it gets included in externals, https://github.com/Paciolan/remote-component-starter/blob/9c62d5170f88c4a88fea1da1bd01502061916368/webpack-main.config.js#L12-L15

https://github.com/Paciolan/remote-component-starter/blob/9c62d5170f88c4a88fea1da1bd01502061916368/webpack-main.config.js#L35-L36

I've been trying to understand how remote component actually works. Am I doing this correctly?

[seikosantana]

I'm not so familiar with JS modules and webpack and so far working with remote component, I have encountered a few issues that seems to happen only when working in remote component, but not occurring when in main application.

I often have issues especially when working with chart.js in remote component. One of them is https://github.com/chartjs/Chart.js/issues/11193 if you're interested to look at.

Some other issues when Chart.js is shared with the method described in the previous comment was it complaining the Line component is not exported.

Time adapters also don't work inside the remote component. Workaroud was https://github.com/chartjs/chartjs-adapter-date-fns/issues/58#issuecomment-1375844810

Do you have any clues on why it happens or maybe ways to fix it? I suspect it has something to do with modules system but aren't modules transpiled for browser compatibility before being loaded with remote component?