How to avoid .js file created along with .tsx files on build when using federation plugin #600
Unanswered
Vasanth-ExtendaRetail
asked this question in
Q&A
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Thanks for the great work you guys done.
Let's come to the issue I'm facing.
Whenever I build my app, TSX files are transformed into JS files and placed next to the TSX file. I don't want this behavior. I have tried to control it with noEmit flag. if I do it noEmit: true, my module federation is not working properly.
Can you guys help me to resolve the issue?
Host: CRA with Webpack
Remote: Vite app with the below config.
App template: React + Typescript + swc
tsconfig.json
{ "compilerOptions": { "target": "ESNext", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "module": "ESNext", "moduleResolution": "Node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": false, "jsx": "react-jsx", "noFallthroughCasesInSwitch": true, }, "include": ["src"], "references": [{ "path": "./tsconfig.node.json" }] }
tsconfig.node.json
{ "compilerOptions": { "composite": true, "skipLibCheck": true, "module": "ESNext", "moduleResolution": "Node", "allowSyntheticDefaultImports": true, "strict": true }, "include": ["vite.config.ts"] }
vite.config.ts
`///
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import federation from "@originjs/vite-plugin-federation";
// https://vitejs.dev/config/
export default defineConfig({
build: {
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
},
preview: {
port: 3001,
},
server: {
port: 3003,
},
plugins: [
react(),
federation({
name: "vite_app",
filename: "remoteEntry.js",
exposes: {
"./ExposedApp": "./src/App.tsx",
},
shared: ["react", "react-dom"],
}),
],
test: {
environment: "jsdom",
include: ["**/*.test.tsx"],
globals: true,
},
});
`
Beta Was this translation helpful? Give feedback.
All reactions