I've set up a React component in an npm package called 'share-sheet'. This component is managed by webpack with the following configuration:
webpack.config.js
...
output: {
path: path.join(__dirname, '/dist'),
filename: 'bundle.js'
},
entry: path.join(__dirname, 'src/index')
...
package.json
...
"main": "dist/bundle.js",
...
index.js
import FancyButton from 'components/FancyButton'
import FancyHellicopter from 'components/FancyHellicopter'
console.log(`my fancy button component: ${FancyButton}`)
module.exports = { FancyButton, FancyHellicopter }
On the other hand, I also have a web app that uses webpack and is configured like this:
app.js
import _ from 'lodash'
import sharesheet from 'share-sheet'
console.log(_) // outputs the lodash object correctly.
console.log(sharesheet) // outputs empty object.
console.log(sharesheet.FancyButton) // outputs undefined.
When running app.js, the lines inside the share-sheet's index.js file are printed correctly in the console. However, within app.js itself, the sharesheet object remains empty. It seems that the object exported at module.exports is not being returned when importing the share-sheet module. What could be causing this issue?