react-microfrontends / root-config Goto Github PK

Hi,

I'm trying to make this example to work: https://single-spa.js.org/docs/testing/units/#jest-config, but I always get an error on System when I'm trying to do this.

Here are the steps that I did:

• On the planets project added the following files/code:

// jest.config.js
module.exports = {
  collectCoverageFrom: ["src/**/*.js"],
  modulePathIgnorePatterns: ["/cache", "/dist"],
  transform: {
    "^.+\\.(j|t)sx?$": "babel-jest",
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.js"],
  moduleNameMapper: {
    // Note this is only needed if you don't match the module name directly
    // an alternative would be to place the mock in
    // <rootDir>/__mocks__/@react-mf/styleguide.js and it would be autodetected
    "@react-mf/styleguide": "<rootDir>/__mocks__/react-mf-styleguide.js",
    "@react-mf/people": "<rootDir>/__mocks__/people/react-mf-people.js",
  },
};

// jest.setup.js
// import Mocks for SystemJS mock below
import peopleApplication from "@react-mf/people";
// Mock SystemJS
global.System = {
  import: jest.fn(mockImport),
};

function mockImport(importName) {
  // What you do in mock import will depend a lot on how you use SystemJS in the project and components you wish to test

  /* If I had already created a mock for `@react-mf/people` and I wanted to test this component:
   *  https://github.com/react-microfrontends/planets/blob/main/src/planets-page/selected-planet/selected-planet.component.js#L5
   * I would want `System.import('@react-mf/people')` to resovle to my mock one way to accomplish this would be the following
   */
  if (importName === "@react-mf/people") {
    return Promise.resolve(peopleApplication);
  } else {
    console.warn("No mock module found");
    return Promise.resolve({});
  }
}

• Next, I built a version of @react-mf/people and put if on the folder /__mocks__/people/react-mf-people.js

When I try to run an unrelated test, I got an error on the System.

What am I doing wrong here? Is it possible for you to implement the example described in the documentation?

Thanks

webpack.config.js

templateParameters: {
  isLocal: webpackConfigEnv && webpackConfigEnv.isLocal === "true",
  orgName,
},

package.json

webpack serve --port 9000 --env isLocal

When I run yarn start，I find that ejs was not loading a local js file.
I printed the following in the webpack.config.js file

console.log(webpackConfigEnv, webpackConfigEnv.isLocal === "true");

result is

{ WEBPACK_SERVE: true, isLocal: true } false

I need a recommendation:

One of the things I like about this demo project is how react-mf-root-config.js generates the app registration from the <route> tags in the layout template. I suppose this is hard-coding either way, but it strikes me as easier to read, and as others on my team are learning the ropes, I'm seeing that it makes more sense to anyone who is accustomed to this style of route declaration.

I'm trying to work out the best way to do the same thing without the use of layout, though. The off-the-shelf non-layout root-config project is pretty bare-bones.

Or alternately, maybe it makes more sense to use layout with a "flat" structure to take advantage of the construct methods, rather than re-inventing the wheel? I see that constructRoutes in layout is pretty involved...

Sadly, IE11 is still in use by some users. Using single-spa has been great, except that we cannot get it to function on IE11. There are a few mentions to polyfills in the documentation, but the only one of any substance is in the angular-specific section, and the demo commit linked from there utilizes an index.html to add polyfills.

We have a structure more similar to this repo - a root-config.js and an index.ejs. Is there a chance that you could make this repo compatible with running on IE11 so that other could us this as an all-browser example?

When I follow the local development instructions, I get this error when I try to go to https://localhost:9000/react-mf-root-config.js in Chrome:

This site can’t provide a secure connection

localhost sent an invalid response.

ERR_SSL_PROTOCOL_ERROR

This happens even after following the linked Chrome instructions for SSL problems. When I go to chrome://flags/#allow-insecure-localhost, I see the flag enabled for "Allow invalid certificates for resources loaded from localhost." Restarting Chrome did not help.

I am using Chrome 87 on macOS 10.15.

the documentation mentions 8080 but it is actually 9000

Hello, please help, i just explore the single-spa.

i want to create an intranet application with root- container with multiple parcel applications with all dependency cdn (js files) was stored on local intranet server.
On the local development root-config, it is running well to call and display multiple single-spa parcel from different host.
but i got issue on build productive windows server environment (IIS).

• Unhandled Promise rejection: Unable to resolve bare specifier "@ifx/root-config"

Do implement importmap.json stored on local IIS host server and bypass local check (without importmap.json - inline import), both method failed on build productive Error : Error: Unable to resolve bare specifier "@ifx/root-config" . but it is running well on the local development method, single-spa able to load properly for inline import or importmap.json concept.

I was just playing around with the demo app the other day, but it appears there may have been something that changed recently.

When attempting to access https://react.microfrontends.app/ - I receive the following error

I cleared my cache, attempted accessing in an incognito window, and made sure devTools were disabled.

1. git clone https://github.com/react-microfrontends/root-config.git
2. yarn install
3. yarn start
   then error comes, can you recommend a working partner for me(webpack, wecpack-cli, webpack-dev-server)
   [webpack-cli] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

• options has an unknown property 'firewall'. These properties are valid:
  object { allowedHosts?, bonjour?, client?, compress?, devMiddleware?, headers?, historyApiFallback?, host?, hot?, http2?, https?, ipc?, liveReload?, onAfterSetupMiddleware?, onBeforeSetupMiddleware?, onListening?, open?, port?, proxy?, setupExitSignals?, static?, watchFiles?, webSocketServer? }
• options.client has an unknown property 'host'. These properties are valid:
  object { logging?, overlay?, progress?, webSocketTransport?, webSocketURL? }

The live example at this url https://react.microfrontends.app is not working

Someone forgot to pay the server bill?

红色箭头代表的是主+子应用，蓝色箭头代表想把子应用渲染到主应用的位置

Hi there, i have a question, so here i want to create some login page, according to this routing, how can we create such as public route for login page ? Thankyou.

Not able to run root-config project due to below error
Error: single-spa-layout: The HTMLElement passed to constructRoutes must be . Received TEMPLATE
at single-spa-layout.min.js:2
at WEBPACK_DYNAMIC_EXPORT../node_modules/single-spa-layout/dist/umd/single-spa-layout.min.js.e.constructRoutes (single-spa-layout.min.js:2)
at Module../src/root-config.js (root-config.js:8)
at webpack_require (bootstrap:19)
at Object.0 (react-mf-root-config.js:9858)
at webpack_require (bootstrap:19)
at bootstrap:83
at Object.execute (bootstrap:83)
at i (system-core.js:276)

Hello everyone,
I'm doing a couple of tests to check the csp on the various frameworks.

I tried on the angular version, where in couple of scripts unfortunately I stumbled upon the DOM XSS injection sink functions.

Now I am trying the version of react, where I state that I am not so familiar, and I am not able to locally point the scripts that point to the various cdn, which are in the index.ejs file.

Could you kindly tell me if there is a way to do it ???