javascript - Typescript React-komponent kommer inte att exporteras

Det finns några relaterade frågor, men ingen av dem hjälper...

Jag vill exportera några React-komponenter från ett TypeScript-bibliotek (som jag tänker publicera på npm).

Jag använder npm link för att testa det lokalt innan jag publicerar.

Biblioteksstrukturen ser ut så här:

src/components/index.ts:

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

src/components/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;
}

Jag bygger biblioteket med npx webpack och länkar sedan med npm link, och sedan ser det konsumerande projektet ut så här:

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

Detta är den mest förenklade versionen jag kunde göra, och jag kan inte få detta att fungera. När jag startar projektet får jag

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

Gör jag det här svårare för mig själv än det borde vara? Jag visade detta för ChatGPT och det sa att det borde fungera, vilket också stämmer enligt varje relevant SO-inlägg jag kan hitta... Bör jag inte göra detta med TypeScript? Bör jag helt enkelt använda create-react-library istället? Jag skulle vilja definiera prop-typer för mina komponenter om möjligt. Jag håller på att slita mitt hår över detta...

Svar #1

Du exporterar och importerar det fel.

1. När du använder standardexporten, använd bara

  import SomeComponent from 'ts-lib-test';

2. När du vill använda de namngivna exporterna behöver du exportera det på detta sätt

 export {SomeComponent};