جاوااسکریپت - کامپوننت ریاکت تایپاسکریپت صادر نمیشود

چند سؤال مرتبط وجود دارد، اما هیچکدام از آنها کمکی نمیکنند...

من میخواهم برخی از کامپوننتهای React را از یک کتابخانه TypeScript که قصد دارم آن را در npm منتشر کنم، صادر کنم.

من از npm link برای تست آن به صورت محلی قبل از انتشار استفاده میکنم.

ساختار کتابخانه به این صورت است:

src/components/index.ts:

export { default as SomeComponent } from './SomeComponent';

src/کامپوننتها/SomeComponent.tsx:

import * as React from 'react';
import '../styles.css';

const SomeComponent: React.FC = () => {
  return <div className="ts-component">test</div>;
};

export default SomeComponent

tsconfig.json:

{
    "compilerOptions": {
      "target": "es6",
      "module": "commonjs",
      "rootDir": "./src/components",
      "outDir": "./dist",
      "declaration": true,
      "sourceMap": true,
      "jsx": "react",
      "baseUrl": "./src",
    },
    "include": ["./src"]
  }

package.json:

{
  "name": "ts-lib-test",
  "version": "1.0.0",
  "description": "dsfsdf",
  "main": "src/components/index.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "peerDependencies": {
    "@types/react": "^18.2.15",
    "@types/react-dom": "^18.2.7",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^5.1.6"
  },
  "devDependencies": {
    "css-loader": "^6.8.1",
    "style-loader": "^3.3.3",
    "ts-loader": "^9.4.4",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/components/index.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    library: 'ts-lib-test',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.json'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

src/styles.css:

.ts-component {
    width: 100px;
    height: 100px;
    margin: 1rem;
    background-color: red;
}

من کتابخانه را با npx webpack میسازم و سپس با npm link لینک میکنم، سپس پروژه مصرفکننده به این صورت به نظر میرسد:

import './App.css'
import { SomeComponent } from 'ts-lib-test'

function App() {
  return (
    <div className='App'>
      {'This is where the test component goes:'}
      <SomeComponent />
    </div>
  )
}

export default App

این سادهترین نسخهای است که توانستم بسازم و نمیتوانم آن را اجرا کنم. وقتی پروژه را شروع میکنم، این را دریافت میکنم

export 'SomeComponent' (imported as 'SomeComponent') was not found in 'ts-lib-test' (module has no exports)

آیا دارم این را برای خودم سختتر از آنچه باید باشد، میکنم؟ این را به ChatGPT نشان دادم و گفت که باید کار کند، که طبق هر پست مرتبط در SO که پیدا میکنم نیز درست است... آیا نباید این کار را با تایپاسکریپت انجام دهم؟ آیا بهتر است مستقیماً از create-react-library استفاده کنم؟ دوست دارم اگر ممکن باشد نوع خواص (prop types) را برای کامپوننتهایم تعریف کنم. از این موضوع خیلی عصبانی و خسته شدهام...

پاسخ شماره ۱

شما در حال صادر و وارد کردن آن به صورت اشتباه هستید.

1. وقتی از صادر کردن پیشفرض استفاده میکنید فقط استفاده کنید

  import SomeComponent from 'ts-lib-test';

2. وقتی میخواهید از صادرات نامگذاریشده استفاده کنید، باید آن را به این روش صادر کنید

 export {SomeComponent};