Блог

Я создал простую библиотеку компонентов вместе со сборником рассказов в качестве игровой площадки, использовал Lerna bootstrap для символических ссылок.

Этот код отлично работает, когда я использую символическую ссылку, и Button отображается:

 import React from 'react';
import { Button } from '@ui-core/core';

export default {
    title: 'Button',
    component: Button,
};

export const Emoji = () => (
    <Button text={'dsad1'}>
    </Button>
);
  

Однако после того, как я запустил свою сборку webpack и попытался получить пакет из node_modules
Я получаю эту ошибку,

Недопустимый тип элемента: ожидаемая строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: не определено. Вероятно, вы забыли экспортировать свой компонент из файла, в котором он определен, или, возможно, перепутали импорт по умолчанию и именованный импорт.

Я не понимаю, что не так с моим процессом сборки.

webpack.config.js

 const path = require('path');
const CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    entry: './src/index.js',
    devtool: 'source-map',
    mode: 'development',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'build/dist'),
    },
    module: {
        rules: [
            {
                test: /.(js|jsx)$/,
                exclude: /node_modules/,
                use: [{
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react"
                        ]
                    }
                }]
            }
        ]
    },
    plugins: [
        new CopyPlugin({
            patterns: [
                {
                    from: path.resolve(__dirname, 'package.json'),
                    to: path.resolve(__dirname, 'build'),
                },
            ],
        }),
    ],
};
  

Кто-нибудь понял, чего мне не хватает?

Обнаружена проблема, в webpack.config мне не хватало output этого свойства:

 libraryTarget: 'umd'
  

Документы Webpack