Next.js Discord

Discord Forum

Turn NextJs project to NPM package

Unanswered
atikYassine posted this in #help-forum
Open in Discord
atikYassineOP
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 ), -the project structure is in the 2nd pic- and I published it in NPM, 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;


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

1 Reply

atikYassineOP
My new project's tsconfig file :
{
  "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": {
      "@/*": [
        "./*"
      ],
      "@components/*": [
        "./app/components/*"
      ],
      "@assets/*": [
        "./app/assets/*"
      ],
      "@styles/*": [
        "./app/styles/*"
      ]
    },
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}


My new project's Next.Config :
/** @type {import('next').NextConfig} */
const config = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ]
      }
    ]
  }
};

module.exports = config;