I will first copy and paste my vite.config.ts file and package.json file in my component being pushed to npm and installed along with the package.json of the project installing the package:
vite.config.ts:
```// vite.config.js
import { resolve } from 'path'
import { defineConfig } from 'vite'
import dts from 'vite-plugin-dts';
import react from '@vitejs/plugin-react';
export default defineConfig({
resolve: {
alias: {'@emotion/react': '@emotion/react/jsx-runtime'},
},
plugins: [
react(),
dts({
insertTypesEntry: true,
})
],
build: {
lib: {
// Could also be a dictionary or array of multiple entry points
entry: resolve(__dirname, 'lib/main.js'),
name: 'KSDensityCalendar',
// the proper extensions will be added
fileName: 'ks-density-calendar',
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ['react', 'react-dom', "@mui/material", '@emotion/styled', '@emotion/react', '@mui/icons-material', '@date-fns', 'react/jsx-runtime'],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
react: 'React',
'react-dom': 'ReactDOM',
'@mui/material': '@mui/material',
'@emotion/styled': '@emotion/styled',
'@emotion/react': '@emotion/react',
'@mui/icons-material': '@mui/icons-material',
'@date-fns': '@date-fns',
'react/jsx-runtime': 'react/jsx-runtime'
},
},
},
},
})```
component's package.json:
```{
"name": "@lafarmer28/ks-density-calendar",
"version": "0.1.19",
"description": "A density calendar using MUI material, MUI icons-material, and date-fns with a month view, week view, and day view.",
"type": "module",
"types": "./src/index.d.ts",
"scripts": {
"test": "jest",
"chromatic": "",
"storybook": "",
"build-storybook": "storybook build",
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"author": "Lucas Asher Farmer",
"license": "MIT",
"registry": "",
"dependencies": {
"@emotion/react": "^11.10.6",
"@emotion/styled": "^11.10.6",
"@mui/icons-material": "^5.11.11",
"@mui/material": "^5.11.14",
"date-fns": "^2.29.3"
},
"files": [
"dist"
],
"main": "./dist/ks-density-calendar.js",
"module": "./dist/ks-density-calendar.js",
"exports": {
"import": "./dist/ks-density-calendar.js"
},
"devDependencies": {
"@storybook/addon-essentials": "7.0.6",
"@storybook/addon-interactions": "7.0.6",
"@storybook/addon-links": "7.0.6",
"@storybook/addon-mdx-gfm": "7.0.6",
"@storybook/blocks": "7.0.6",
"@storybook/react": "7.0.6",
"@storybook/react-vite": "7.0.6",
"@storybook/testing-library": "0.1.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
"@types/jest": "^29.5.0",
"@types/node": "^18.15.10",
"@types/react": "^18.0.29",
"@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0",
"chromatic": "^6.17.3",
"jest": "^29.5.0",
"jest-environment-jsdom": "^29.5.0",
"prop-types": "15.8.1",
"storybook": "7.0.6",
"ts-jest": "^29.0.5",
"ts-node": "^10.9.1",
"tslib": "^2.5.0",
"typescript": "4.9.3",
"vite": "^4.2.1",
"vite-plugin-dts": "^2.3.0"
},
"repository": "",
"bugs": {
"url": ""
},
"homepage": "",
"private": false
}```
project's package.json:
````{
"name": "client-app",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc && vite build",
"preview": "vite preview"
},
"dependencies": {
"@emotion/react": "^11.10.5",
"@emotion/styled": "^11.10.5",
"@lafarmer28/ks-density-calendar": "^0.1.15",
"@mui/icons-material": "^5.10.16",
"@mui/material": "^5.10.17",
"@mui/styles": "^5.11.2",
"@mui/x-date-pickers": "^6.2.0",
"@reduxjs/toolkit": "^1.9.1",
"@types/node": "^18.11.16",
"date-fns": "^2.29.3",
"formik": "^2.2.9",
"jwt-decode": "^3.1.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-google-recaptcha-v3": "^1.10.1",
"react-redux": "^8.0.5",
"react-router-dom": "^6.4.5",
"yup": "^0.32.11"
},
"devDependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@types/jest": "^29.2.6",
"@types/react": "^18.0.26",
"@types/react-dom": "^18.0.9",
"@types/testing-library__react": "^10.2.0",
"@vitejs/plugin-react": "^3.0.0",
"jest": "^29.3.1",
"jest-environment-jsdom": "^29.3.1",
"ts-jest": "^29.0.5",
"ts-node": "^10.9.1",
"typescript": "^4.9.3",
"vite": "^4.0.0"
}
}```
I am getting error in the devTools when I render my custom component:
You are loading @emotion/react when it is already loaded. Running multiple instances may cause problems. This can happen if multiple versions are used, or if multiple builds of the same version are used.
Is there something wrong with my configuration of my component that when I import and use it in my project I am loading it more than once? Or is this something with emotion/react at the versions I am using them in MUI?
You are defining emotion in the dependencies of you package component. This means the package brings its own emotion while the app has already an instance of it loaded. This means conflict.
The solution is to move all the dependencies that are listed in extremal array of vite to peer dependencies. If you want to be able to locally work on the component package, you can add them to dev dependencies as well.