Reputation: 3159
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?
Upvotes: 0
Views: 1024
Reputation: 3159
Found the problem, I was missing in webpack.config output
this property:
libraryTarget: 'umd'
Upvotes: 2