Element type is invalid: expected a string (for built-in components) or a class/function after webpack build

924 Views Asked by At

I created a simple components library along with Storybook as a playground, used Lerna bootstrap for the symlinks.

This code works fine when I use symlink and Button is rendered:

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

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

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

However after I ran my webpack build and try to get package from node_modules I get this error,

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I don't understand what is wrong with my build process.

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'),
                },
            ],
        }),
    ],
};

Does anyone got a clue what I am missing?

1

There are 1 best solutions below

0
On BEST ANSWER

Found the problem, I was missing in webpack.config output this property:

libraryTarget: 'umd'

Webpack docs