styled_default is not a function

Current behavior: I have an application that's running perfectly on the server and the build is passing, And the application is starting without any problem. On a local environment I am facing an issue with launching the application.

The Application is React and the engine is Vite.

After installing all the packages, I ran the application using npm run dev, and this is the output from the console(the application is not starting)

TypeError: styled_default is not a function at chunk-XNBTMZUM.js?v=59cc3289:26:26

After a research I've notice that there is a duplicated @emotion/styled libs:

npm ls @emotion/styled highscalefrontend@0.0.0 C:\Users\User\WebstormProjects\HighScaleNewFrontend +-- @emotion/styled@11.11.0 +-- @mui/lab@5.0.0-alpha.153 | +-- @emotion/styled@11.11.0 deduped | -- @mui/system@5.14.18 | +-- @emotion/styled@11.11.0 deduped | -- @mui/styled-engine@5.14.18 | -- @emotion/styled@11.11.0 deduped -- @mui/material@5.14.18 -- @emotion/styled@11.11.0 deduped

Can you please help me figure why is it happening?

To reproduce:

I think this is a local issue so i cannot help you with reproduce it.

Expected behavior:

The application to run.

Environment information:

Package.json

{
  "name": "bla",
  "private": false,
  "version": "0.0.0",
  "type": "module",
  "homepage": "./",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "@emotion/cache": "^11.11.0",
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@hookform/resolvers": "^3.3.2",
    "@mui/icons-material": "^5.14.18",
    "@mui/lab": "^5.0.0-alpha.153",
    "@mui/material": "^5.14.18",
    "@reduxjs/toolkit": "^1.9.7",
    "apexcharts": "^3.44.0",
    "axios": "^1.6.2",
    "date-fns": "^2.30.0",
    "i": "^0.3.7",
    "i18next": "^23.7.6",
    "lodash": "^4.17.21",
    "npm": "^10.2.4",
    "numeral": "^2.0.6",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-apexcharts": "^1.4.1",
    "react-dom": "^18.2.0",
    "react-helmet-async": "^1.3.0",
    "react-hook-form": "^7.48.2",
    "react-i18next": "^13.5.0",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.19.0",
    "react-spinners": "^0.13.8",
    "react-stomp-hooks": "^2.1.0",
    "react-terminal-ui": "^1.1.0",
    "redux-persist": "^6.0.0",
    "simplebar-react": "^3.2.4",
    "stylis": "^4.3.0",
    "stylis-plugin-rtl": "^2.1.1",
    "yup": "^1.3.2"
  },
  "devDependencies": {
    "@faker-js/faker": "^8.3.1",
    "@iconify/react": "^4.1.1",
    "@types/react": "^18.2.37",
    "@types/react-dom": "^18.2.15",
    "@vitejs/plugin-react": "^4.2.0",
    "eslint": "^8.53.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.4",
    "vite": "^5.0.0"
  }
}

Dockerfile:


FROM node:20.9.0-alpine AS build
WORKDIR /app
RUN npm i -g npm@10.2.4
COPY ./package*.json ./
RUN npm install
COPY . .
RUN npm run build
FROM nginx:1.25.2-alpine

COPY --from=build /app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]

NPM and Node versions:

> npm -v
10.2.4
> node -v
v20.9.0

emotion-js / emotion

styled_default is not a function #3209