Versions
- originjs: v1.0.6
- node: v16.7.0
Detail
[vite]: Rollup failed to resolve import "semver" from "virtual:__federation_fn_import".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
error during build:
Error: [vite]: Rollup failed to resolve import "semver" from "virtual:__federation_fn_import".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at onRollupWarning (/Users/alpha/Alpha/test-app/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:43253:19)
at onwarn (/Users/alpha/Alpha/test-app/node_modules/.pnpm/[email protected]/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:43037:13)
at Object.onwarn (/Users/alpha/Alpha/test-app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:23003:13)
at ModuleLoader.handleResolveId (/Users/alpha/Alpha/test-app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:22347:26)
at ModuleLoader.resolveDynamicImport (/Users/alpha/Alpha/test-app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:22401:26)
at processTicksAndRejections (node:internal/process/task_queues:96:5)
at async /Users/alpha/Alpha/test-app/node_modules/.pnpm/[email protected]/node_modules/rollup/dist/shared/rollup.js:22305:32
I am using pnpm workspace to create two apps. Here the vite.config.ts
- app with error when building
import { resolve } from 'path';
import { readdirSync } from 'fs';
import detect from 'detect-port';
import { defineConfig, UserConfigExport } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import federation from '@originjs/vite-plugin-federation';
import pkg from './package.json';
export default async function config(): Promise<UserConfigExport> {
const port = await detect(8000);
const items = readdirSync(resolve(__dirname, 'src'));
return defineConfig({
server: {
port,
},
plugins: [
reactRefresh(),
federation({
name: 'cryptocurrencyApp',
filename: 'remoteEntry.js',
exposes: {
'./App': './src/App',
},
shared: {
react: {
eager: true,
requiredVersion: pkg.dependencies.react,
},
'react-dom': {
eager: true,
import: false,
requiredVersion: pkg.dependencies['react-dom'],
},
'react-router-dom': {
eager: true,
import: false,
requiredVersion: pkg.dependencies['react-router-dom'],
},
'@chakra-ui/react': {
eager: true,
import: false,
requiredVersion: pkg.dependencies['@chakra-ui/react'],
},
},
}),
],
resolve: {
alias: items.map((item) => {
if (/\.(t|j)sx?$/.test(item)) {
const name = item.replace(/\.(t|j)sx?$/, '');
return {
find: name,
replacement: `/src/${name}`,
};
} else {
return {
find: item,
replacement: `/src/${item}`,
};
}
}),
},
build: {
target: 'esnext',
},
});
}{
"name": "@apps/microapp",
"version": "0.0.0",
"license": "MIT",
"main": "dist",
"scripts": {
"start": "vite",
"build": "tsc && vite build",
"serve": "vite preview --port 8000 --strictPort"
},
"dependencies": {
"@chakra-ui/react": "^1.7.2",
"@emotion/react": "^11.7.0",
"@emotion/styled": "^11.6.0",
"@libs/rc-component": "workspace:^0.0.1",
"@libs/rc-utils": "workspace:^0.0.1",
"framer-motion": "^5.3.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.0.2"
},
"devDependencies": {
"@originjs/vite-plugin-federation": "^1.0.6",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@vitejs/plugin-react-refresh": "^1.3.6",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"vite": "^2.6.14"
}
}import { resolve } from 'path';
import { readdirSync } from 'fs';
import detect from 'detect-port';
import { defineConfig, UserConfigExport } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import federation from '@originjs/vite-plugin-federation';
import pkg from './package.json';
export default async function config(): Promise<UserConfigExport> {
const port = await detect(3000);
const items = readdirSync(resolve(__dirname, 'src'));
return defineConfig({
server: {
port,
},
optimizeDeps: {
exclude: ['cryptocurrency'],
},
plugins: [
reactRefresh(),
federation({
remotes: {
cryptocurrency: 'http://localhost:8000/assets/remoteEntry.js',
},
shared: {
react: {
eager: true,
singleton: true,
requiredVersion: pkg.dependencies.react,
},
'react-dom': {
eager: true,
singleton: true,
requiredVersion: pkg.dependencies['react-dom'],
},
'react-router-dom': {
eager: true,
singleton: true,
requiredVersion: pkg.dependencies['react-router-dom'],
},
'@chakra-ui/react': {
eager: true,
singleton: true,
requiredVersion: pkg.dependencies['@chakra-ui/react'],
},
},
}),
],
resolve: {
alias: items.map((item) => {
if (/\.(t|j)sx?$/.test(item)) {
const name = item.replace(/\.(t|j)sx?$/, '');
return {
find: name,
replacement: `/src/${name}`,
};
} else {
return {
find: item,
replacement: `/src/${item}`,
};
}
}),
},
build: {
target: 'esnext',
},
});
}{
"name": "mainapp",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"start": "vite",
"build": "tsc && vite build",
"serve": "vite preview"
},
"dependencies": {
"@chakra-ui/react": "^1.7.2",
"@emotion/react": "^11.7.0",
"@emotion/styled": "^11.6.0",
"@libs/core-utils": "workspace:^0.0.1",
"@libs/rc-component": "workspace:^0.0.1",
"@libs/rc-utils": "workspace:^0.0.1",
"eventemitter3": "^4.0.7",
"framer-motion": "^5.3.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-hook-form": "^7.20.5",
"react-router-dom": "^6.0.2"
},
"devDependencies": {
"@originjs/vite-plugin-federation": "^1.0.6",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@vitejs/plugin-react-refresh": "^1.3.6",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^8.0.3",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.27.1",
"eslint-plugin-react-hooks": "^4.3.0",
"vite": "^2.6.14"
}
}{
"name": "test-app",
"version": "0.0.1",
"private": true,
"scripts": {
"nx-monorepo": "npx add-nx-to-monorepo",
"affected:dep-graph": "nx affected:dep-graph",
"prepare": "husky install",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"@nrwl/cli": "^13.2.3",
"@nrwl/tao": "^13.2.3",
"@nrwl/workspace": "^13.2.3",
"@storybook/addon-actions": "^6.4.7",
"@storybook/addon-controls": "^6.4.7",
"@storybook/addon-docs": "^6.4.7",
"@storybook/addon-essentials": "^6.4.7",
"@storybook/addon-links": "^6.4.7",
"@storybook/react": "^6.4.7",
"@types/detect-port": "^1.3.1",
"@typescript-eslint/eslint-plugin": "^5.5.0",
"@typescript-eslint/parser": "^5.5.0",
"detect-port": "^1.3.0",
"eslint": "^8.4.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-prettier": "^4.0.0",
"husky": "^7.0.4",
"lint-staged": "^12.1.2",
"prettier": "^2.5.1",
"storybook-addon-package-json": "^2.0.0",
"tslib": "^2.3.1",
"typescript": "^4.5.2"
}
}
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
