TypeError: Cannot read properties of undefined (reading 'exports') about vite-plugin-federation HOT 11 CLOSED

I will fix this, but it will take some time and if it's urgent I suggest you use webpack

from vite-plugin-federation.

I will fix this, but it will take some time and I suggest you use webpack

Have you fixed it?I meet the same problem.

from vite-plugin-federation.

I assume you have other component libraries that use react/react-dom, please add them to shared as well, otherwise it may result in multiple different react/react-dom in the runtime environment

from vite-plugin-federation.

I assume you have other component libraries that use react/react-dom, please add them to shared as well, otherwise it may result in multiple different react/react-dom in the runtime environment

I add all of them

remote component

import React ,{useState} from "react";

export default ({caption = "Home Button"}) => {
  const [count, setCount] = useState(0)
  return (<button onClick={() => setCount(count+1) } className='remote-btn'>{caption}{count}</button>)
};

  shared: {
      react: { singleton: true },
      'react-dom': {
        singleton: true,
      },
      antd: {
        singleton: true,
      },
    },

warning

Uncaught TypeError: Cannot read properties of undefined (reading 'exports')
    at __federation_shared_antd.js:1:438

if remove the hook call it will be ok.

reference webpack remote component with hook call it run well too

from vite-plugin-federation.

This problem seems strange, can you provide me with a link to a repository or sandbox where I can reproduce the problem?

from vite-plugin-federation.

Here is git respository https://github.com/lolocoo/vite-federation-issue-reproduce.git

export default ({caption = "Home Button"}) => {
  const [count, setCount] = useState(0)
  return (<button onClick={() => setCount(count+1) } className='remote-btn'>{caption}{count}</button>)
};

cause error TypeError: Cannot read properties of undefined (reading 'exports')
const [count, setCount] = react.exports.useState(0);

use React.useState fix the problem.

export default ({caption = "Home Button"}) => {
  const [count, setCount] = React.useState(0)
  return (<button onClick={() => setCount(count+1) } className='remote-btn'>{caption}{count}</button>)
};

when I refrence a component from ui library like ant.design

import React, { useState } from "react";
import { Button  } from 'antd'

export default ({caption = "Home Button"}) => {
  const [count, setCount] = React.useState(0)
  return (<Button onClick={() => setCount(count+1) } className='remote-btn'>{caption}{' '}{count}</Button>)
};

cause the error Cannot read properties of undefined (reading 'exports'). react.exports.Component

from vite-plugin-federation.

I found some problems after checking out the repository,when I use dev mode, the console also reports an error
I tried to use build & serve to start the host side and found that it works, I get the following result

If this result is normal, the reason should be that there are some problems with the plugin's support for react in dev mode

from vite-plugin-federation.

I found some problems after checking out the repository,when I use dev mode, the console also reports an error I tried to use build & serve to start the host side and found that it works, I get the following result

If this result is normal, the reason should be that there are some problems with the plugin's support for react in dev mode

Thank you for your help. Will you solve this problem? I will use it in my project if not will migrate vite to webpack. It's so painfull.

from vite-plugin-federation.

i have the same problem :/

from vite-plugin-federation.

We are facing the same issue.. Can we re-open the issue?

from vite-plugin-federation.

@ruleeeer @sanyuan0704
Someone have an idea about this issue???

from vite-plugin-federation.