Open Moumenh opened 1 year ago
my remote vite.config export default defineConfig({ plugins: [ react(), federation({ name: 'external', filename: 'remoteEntry.js', exposes: { './ui': './src/Button.tsx' }, shared: ["@emotion/react", "@emotion/styled", "@mui/material", "react", "react-dom"] }) ], build: { target: 'esnext', cssCodeSplit: false, minify: false, } })
export default defineConfig({ plugins: [ react(), federation({ name: 'external', filename: 'remoteEntry.js', exposes: { './ui': './src/Button.tsx' }, shared: ["@emotion/react", "@emotion/styled", "@mui/material", "react", "react-dom"] }) ], build: { target: 'esnext', cssCodeSplit: false, minify: false, } })
when my host is using vite it does work but switching to webpack host with this config
`const HtmlWebPackPlugin = require("html-webpack-plugin"); const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies; module.exports = { output: { publicPath: "http://localhost:3020/", },
resolve: { extensions: [".tsx", ".ts", ".jsx", ".js", ".json"], },
devServer: { port: 3020, historyApiFallback: true, },
module: { rules: [ { test: /.m?js/, type: "javascript/auto", resolve: { fullySpecified: false, }, }, { test: /.(css|s[ac]ss)$/i, use: ["style-loader", "css-loader", "postcss-loader"], }, { test: /.(ts|tsx|js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", }, }, ], },
plugins: [ new ModuleFederationPlugin({ name: "host", filename: "remoteEntry.js", remotes: { external: "external@http://127.0.0.1:5001/assets/remoteEntry.js", }, shared: { ...deps, react: { singleton: true, requiredVersion: deps.react, }, "react-dom": { singleton: true, requiredVersion: deps["react-dom"], }, }, }), new HtmlWebPackPlugin({ template: "./src/index.html", }), ], };`
it does not work
having this error
do I need to change something with my webpack config or It is a bug in this release ?
It looks like it's a bug! Would like to know more. Thanks, maintainers!
same here
Can you give me the reproduced repo address? I have no idea what happened.
Versions
Reproduction
my remote vite.config
export default defineConfig({ plugins: [ react(), federation({ name: 'external', filename: 'remoteEntry.js', exposes: { './ui': './src/Button.tsx' }, shared: ["@emotion/react", "@emotion/styled", "@mui/material", "react", "react-dom"] }) ], build: { target: 'esnext', cssCodeSplit: false, minify: false, } })
when my host is using vite it does work but switching to webpack host with this config
`const HtmlWebPackPlugin = require("html-webpack-plugin"); const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
const deps = require("./package.json").dependencies; module.exports = { output: { publicPath: "http://localhost:3020/", },
resolve: { extensions: [".tsx", ".ts", ".jsx", ".js", ".json"], },
devServer: { port: 3020, historyApiFallback: true, },
module: { rules: [ { test: /.m?js/, type: "javascript/auto", resolve: { fullySpecified: false, }, }, { test: /.(css|s[ac]ss)$/i, use: ["style-loader", "css-loader", "postcss-loader"], }, { test: /.(ts|tsx|js|jsx)$/, exclude: /node_modules/, use: { loader: "babel-loader", }, }, ], },
plugins: [ new ModuleFederationPlugin({ name: "host", filename: "remoteEntry.js", remotes: { external: "external@http://127.0.0.1:5001/assets/remoteEntry.js", }, shared: { ...deps, react: { singleton: true, requiredVersion: deps.react, }, "react-dom": { singleton: true, requiredVersion: deps["react-dom"], }, }, }), new HtmlWebPackPlugin({ template: "./src/index.html", }), ], };`
it does not work
having this error![image](https://user-images.githubusercontent.com/63558498/209691652-0e5bc549-7456-4f6e-adf5-1ba862c919f9.png)
do I need to change something with my webpack config or It is a bug in this release ?