Turn NextJs project to NPM package

Question

Hope y'all doing good - I have been struggling with this error for 3 days. I basically created a nextJs project and coded some components, (some of them include imports from other folders ), and I published it in NPM Here's the error : " Module parse failed: Unexpected token (193:11) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders "

here's the project's tsConfig :

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

And here's my NextConfig :

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = nextConfig;

here's package.json:

{
  "name": "atikdev-npm-pages",
  "version": "1.0.5",
  "description": "Description of your private package",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/[my_username]/[my_repo].git"
  },
  "author": "Yassine Atik",
  "license": "MIT",
  "dependencies": {
    "@hookform/resolvers": "^3.3.2",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-progress": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-tabs": "^1.0.4",
    "@react-pdf/renderer": "^3.1.12",
    "@types/node": "20.6.3",
    "@types/react": "18.2.22",
    "@types/react-dom": "18.2.7",
    "@types/react-slick": "^0.23.10",
    "aos": "^2.3.4",
    "autoprefixer": "10.4.16",
    "axios": "^1.5.1",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.0.0",
    "encoding": "^0.1.13",
    "eslint": "8.50.0",
    "eslint-config-next": "^13.4.5",
    "firebase": "^10.4.0",
    "generate-password": "^1.7.0",
    "libphonenumber-js": "^1.10.48",
    "lodash": "^4.17.21",
    "lucide-react": "^0.287.0",
    "material-react-table": "^2.0.3",
    "moment": "^2.29.4",
    "next": "^13.4.5",
    "next-redux-wrapper": "^8.1.0",
    "next-video": "^0.9.0",
    "postcss": "8.4.30",
    "react": "18.2.0",
    "react-country-flag": "^3.1.0",
    "react-dom": "18.2.0",
    "react-drag-drop-files": "^2.3.10",
    "react-flags-select": "^2.2.3",
    "react-hook-form": "^7.47.0",
    "react-international-phone": "^3.1.2",
    "react-phone-input-2": "^2.15.1",
    "react-public-ip": "^1.0.0",
    "react-redux": "^8.1.3",
    "react-responsive-modal": "^6.4.2",
    "react-scroll": "^1.9.0",
    "react-slick": "^0.29.0",
    "redux": "^4.2.1",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.2",
    "sass": "^1.62.0",
    "sharp": "^0.32.6",
    "styled-components": "^6.0.8",
    "swiper": "^11.0.4",
    "tailwind-merge": "^1.14.0",
    "tailwind-scrollbar-hide": "^1.1.7",
    "tailwindcss": "3.3.3",
    "tailwindcss-animate": "^1.0.7",
    "typescript": "5.0.4",
    "zod": "^3.22.4",
    "zustand": "^4.4.1"
  },
  "devDependencies": {
    "@svgr/webpack": "^8.1.0",
    "@tailwindcss/typography": "^0.5.10",
    "@types/aos": "^3.0.4",
    "@types/lodash": "^4.14.199",
    "@types/react-scroll": "^1.8.10",
    "@typescript-eslint/eslint-plugin": "^5.53.0",
    "@typescript-eslint/parser": "^5.53.0",
    "eslint": "^8.35.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.8.4"
  }
}

I installed the package in a new nextJs project, and when I import some of the components , i face the error message.

Please help, I can share my new project's NextConfig + tsConfig

I think it's something to do with the configuration, because i already tried to publish a button component in NPM and it worked just fine, but this time this project has some dependencies like ShadCn...