webpack 5 with babel build not exporting functions - npm

Question

I am trying to build and publish a react component to npm. I am using webpack 5 with babel. The build succeeds, but when I try use the component it is aparent that the component is not being exported as I get the following error in the console:
Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Check your code at App.js:41.
at App
My project structure looks like this:
- src/
- components/
- MyComponent.js
- styles/
- MyComponent.css
- index.js
- .babelrc
- package.json
- webpack.config.js
MyComponent.js contains the following:
import '../styles/MyComponent.css'
export default function MyComponentFunction() {
return (
<h1>Hello</h1>
)
}
My index.js file contains the following:
import MyComponentFunction from './components/MyComponent'
export default {
MyComponentFunction
}
My .babelrc file contains the following:
{
"presets": ["#babel/preset-env","#babel/preset-react" ]
}
My webpack.config.js contains the following:
const path = require('path')
module.exports = {
output: {
path: path.join(__dirname, '/dist'),
filename: 'index.bundle.js',
libraryTarget: 'umd'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: {
loader:'babel-loader',
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
],
exclude: /node_modules/
}
]
}
}
And my package.json (which includes lots of unused libraries) contains the following:
{
"name": "my-component",
"version": "0.0.1",
"description": "A react component ...",
"main": "dist/index.bundle.js",
"scripts": {
"build": "webpack --mode production",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
...
},
"keywords": [
],
"author": "<Author>",
"license": "MIT",
"bugs": {
"url": "<github repo>"
},
"homepage": "<github repo>#readme",
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/plugin-proposal-export-default-from": "^7.18.10",
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-env": "^7.19.4",
"#babel/preset-react": "^7.18.6",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"eslint-webpack-plugin": "^3.2.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.74.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"#react-three/drei": "^9.36.0",
"#react-three/fiber": "^8.8.10",
"react": "^18.2.0",
"three": "^0.145.0"
},
"peerDependencies": {
"react": "^18.2.0"
}
}
Why can I not import my component after it has been published? Which i'm trying to do like so:
import {MyComponentFunction} from 'my-component'
function App() {
return (
<>
<MyComponentFunction></MyComponentFunction>
</>
);
}

Answer 1

The reason you are facing this issue is that you have named the package as an exact match for this. The name must be unique.