[vite + typescript + pnpm] npm publish 후 다른 프로젝트에서 install 했을 때, 모듈을 찾을 수 없다는 에러

 

pnpm publish를 한 뒤, 다른 프로젝트에서 방금 올린 npm 컴포넌트를 설치해서 쓰려고 하였으나...

 

 

이렇게 모듈을 찾을 수 없다는 에러메시지와 함께 import해서 사용할 수가 없었다.

 

 

node_modules 폴더엔 이렇게 예쁘게 깔려있는데... 왜일까?

타입에러인가.. 여러가지를 고쳐보다가 package.json에 아래 두 줄을 추가해서 해결할 수 있었다...

 

아래 "main"에 있는 경로가 중요한 것 같다. 해당 파일은 node_modules > pnpm i로 설치한 모듈 > dist > index.es.js 파일명과 같다.

기존에 잘 동작하던 npm 라이브러리는 그냥 index.js로 배포되어서, 혹시 cjs, ems, es... 같은 확장자가 중요한 건가 했는데 그건 아닌 듯 싶다.

 

해결

// package.json

{
  "name": "@nuua/wuua-ui-system",
  "version": "0.1.0",
  "main": "dist/index.es.js", // 추가!!
  "types": "dist/index.d.ts", // 추가!!
  "author": "blah blah",
  "license": "ISC",
  "files": [
    "dist"
  ],
  "dependencies": {...}
  ...
}

 

 

 

참고

// vite.config.ts



import * as path from 'path';
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import viteTsconfigPaths from 'vite-tsconfig-paths';
import svgr from 'vite-plugin-svgr';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [
    react(),
    dts({ insertTypesEntry: true }), // 새로 추가
    viteTsconfigPaths(),
    svgr(),
  ],
  server: {
    port: 3000,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },

  build: {
    lib: {
      entry: path.resolve(__dirname, './src/index.tsx'),
      name: 'blah blah',
      formats: ['es', 'cjs'],
      fileName: (format) => `index.${format}.js`,
    },
    rollupOptions: {
      external: ['react'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          'styled-components': 'styled',
        },
        banner: '"use client";',
        interop: 'compat',
      },
    },
    commonjsOptions: {
      esmExternals: ['react'],
    },
  },
});

 

// tsconfig.json



{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "types": ["vite/client", "vite-plugin-svgr/client"],
    // "allowJs": false,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    // "isolatedModules": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "rootDir": "src",
    "declaration": true,
    "declarationDir": "dist",
    "typeRoots": ["node_modules/@types", "@types"],
    "noEmit": true, // 자동js 생성막기
    "noEmitOnError": true // ts파일 에러 시 js파일 생성X
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"],
  "exclude": ["node_modules", "dist"],
  "outDir": "dist"
}

 

 

 

 

https://stackoverflow.com/questions/41243421/npm-publish-node-js-module-and-yet-can-not-find-module-after-npm-install