pixability / federated-types Goto Github PK

My component files contain sass imports. When I generate the type files for the exposed components, the declaration modules contain the style imports. The style imports is something that should not be there right?

declare module "ui/Component" {
    import { HTMLAttributes } from 'react';
    import './Component.scss';                        <---
    export interface Component {
        name: string;
        ...

Hey man,

I've a lerna based mono repo with packages at different levels.

packages/a/b/c/federation.config.json packages/e/f/federation.config.json

Getting the ERROR: Found x federation configs.

Do we need to update some of the path resolution to use process.cwd()?

In fact I can see by debugging it that findFederationConfigs is traversing the node_modules of the package, and lerna has npm linked to the other package, so that script is finding the federation.config.json of that project too. If we really need to do this traversing, filtering out node_modules might be worth doing:

const findFederationConfigs = (base, files, result) => { files = files || fs.readdirSync(base); files = files.filter(f => f !== 'node_modules'); // something like this. result = result || [];

Hey there @gthmb,

I am coming from this discussion → module-federation/module-federation-examples#20

I would like ask how remote apps' types can be included of host apps' scope?

let me illustrate my question with an example

The files below belong to my remote app, meaning I am gonna use this app as dependant into my host app

/* federation.config.json */

{
  "name": "blank",
  "exposes": {
    "./BlankApp": "./src/bootstrap"
  }
}

// webpack.dev.js

const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const federationConfig = require('./federation.config.json');
const packageJson = require('../package.json');

module.exports = {
  mode: 'development',
  plugins: [
    new ModuleFederationPlugin({
      ...federationConfig,
      filename: 'blank-app-entry.js',
      shared: packageJson.dependencies,
    }),
  ],
  devServer: {
    port: 17001,
    hot: true,
  },
  devtool: 'eval-source-map',
};

and this my bootstrap file

// src/bootstrap.tsx

import React from 'react';
import ReactDOM from 'react-dom';

import App from './app/App';

const mount = (el: HTMLElement | null): void => {
  ReactDOM.render(<App title="I am an independent app!" />, el);
};

if (process.env.NODE_ENV === 'development') {
  const devRoot: HTMLElement | null = document.querySelector('#blank-app');

  if (devRoot) {
    mount(devRoot);
  }
}

export default mount;

The files below belong to my host app

// webpack.dev.js

const path = require('path');
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const packageJson = require('../package.json');

module.exports = {
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        exclude: /node_modules/,
        use: 'ts-loader',
      }
    ]
  },
  devServer: {
    port: 8090,
    hot: true,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'main',
      remotes: {
        blank: 'blank@http://localhost:17001/blank-app-entry.js',
      },
      shared: packageJson.dependencies,
    }),
  ],
};

and now I want is injecting my remote app inside the host app

//  src/remote-apps/BlankApp.tsx

import React, { useRef, useEffect, ReactElement } from 'react';
import mount from 'blank/BlankApp';

export default function BlankApp(): ReactElement {
  const ref = useRef(null);

  // Pass in our ref and render it once.
  useEffect(() => {
    mount(ref.current);
  });

  return <div ref={ref} />;
}

// src/App.tsx

import React, { FC } from 'react';
import BlankApp from './remote-apps/BlankApp';

interface AppProps {
  title: string;
}

export default function App ({ title }): FC<AppProps> {
  return (
    <main>
       <h1> This is host App </h1>
       <BlankApp />
    </main>
  )
}

When I ran my yarn start command for the host app, I am getting this error:

ERROR in /webpack-module-federation-playground/src/remote-apps/BlankApp.tsx
./remote-apps/BlankApp.tsx 2:18-34
[tsl] ERROR in /webpack-module-federation-playground/src/remote-apps/BlankApp.tsx(2,19)
      TS2307: Cannot find module 'blank/BlankApp' or its corresponding type declarations.
 @ ./src/App.tsx 11:34-68
 @ ./src/index.js 1:0-21

webpack 5.21.2 compiled with 1 error in 9225 ms
ℹ ｢wdm｣: Failed to compile.

Apperantly My types are available only for my remote app and I am curious how may I move those generated remote apps' types into host app scope and make ts-loader happy.

Getting this ERROR: Error: ENOENT: no such file or directory error. I took a look at the source code. it seems if the types files exist, they are deleted and not recreated. Hence readFileSync fails because file has already been deleted.

When generating types for a package, I get 2 files: like_button.d.ts and index.ts.

like_button.d.ts

/// <reference types="react" />
declare module "like_button/LikeButton" {
    type LikeButtonProps = {
        a: 1;
    };
    export default function LikeButton(props: LikeButtonProps): JSX.Element;
}

index

export * from './like_button';

But typescript complains in the index.

Any suggestion?

I have an error, I don't know why it does this.
I added this script "make-types": "make-federated-types --outputDir ../types/"
When i run it, I have this error :
ERROR: Error: ENOENT: no such file or directory, open '/Users/___/poc-microfrontend/types/account.d.ts'

I don't really understand why it does this. Even when I don't put the outpuDir option.