Quiero crear un componente personalizado y compilarlo con un paquete web.
// paquetes/boton/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'), }, }, };construye el componente pero cuando quiero importarlo desde node_modules recibí un error
// Aplicación.js
import React from 'react'; import Button from '@custom/button'; const App = () => { return <Button /> }Error: el tipo de elemento no es válido: esperaba una cadena (para componentes integrados) o una clase/función (para componentes compuestos) pero obtuvo: objeto.
Cambié el paquete webpack a rollup y resolvió mi problema
//resumen.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;