I want to create custom component and build with webpack
// packages/button/src/index.js
import React from 'react';
function Button({ href }) {
return <a href={href}>Test</a>;
}
export default Button;
// webpack.config.js
const path = require('path');
const entries = {
button: {
import: '/packages/button/src/index.js',
filename: './button/dist/button.js',
},
};
module.exports = {
entry: { ...entries },
output: {
filename: '[name].js',
path: __dirname + '/packages',
asyncChunks: true,
libraryTarget: 'umd',
globalObject: 'this',
},
mode: 'production',
module: {
rules: [
{
test: /\.less$/,
use: [
{
loader: 'css-loader',
},
{
loader: 'less-loader',
options: {
lessOptions: {
strictMath: true,
},
},
},
],
},
{
test: /\.m?js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-react'],
},
},
resolve: {
fullySpecified: false,
},
},
{
test: /\.m?js/,
resolve: {
fullySpecified: false,
},
},
],
},
optimization: {
splitChunks: {
chunks: 'async',
minSize: 20000,
minRemainingSize: 0,
minChunks: 1,
maxAsyncRequests: 30,
maxInitialRequests: 30,
enforceSizeThreshold: 50000,
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
},
default: {
minChunks: 2,
priority: -20,
reuseExistingChunk: true,
},
},
},
},
resolve: {
alias: {
Styles: path.resolve(__dirname, '/shared/styles'),
},
},
};
it builds component but when I want to import it from node_modules I got error
// App.js
import React from 'react';
import Button from '@custom/button';
const App = () => {
return <Button />
}
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
I have switched bundler from webpack to rollup and it solved my issue
//rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
const packages = ['button', 'select'];
const COMMON = {
external: ['react', 'react-dom'],
plugins: [
resolve({ extensions: ['.jsx', '.js', '.tsx'] }),
postcss({
minimize: true,
modules: true,
use: {
sass: null,
stylus: null,
less: { javascriptEnabled: true },
},
}),
babel({
extensions: ['.jsx', '.js', '.tsx'],
exclude: 'node_modules/**',
presets: ['@babel/preset-env', '@babel/preset-react'],
}),
commonjs(),
],
};
const ENTRIES = packages.map((pkg) => ({
input: `./packages/${pkg}/src/index.js`,
output: {
file: `./packages/${pkg}/dist/index.js`,
exports: 'default',
format: 'cjs',
},
...COMMON,
}));
export default ENTRIES;