CODEWITHSUNDEEP
javascriptnpmwebpackrequire
Mabedan
Mabedan

Reputation: 907

how to import a webpack submodule?

in my setup, I have a react component as part of an npm package called 'share-sheet'. It's managed by webpack as such:

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 have a webapp, which also uses webpack, which is setup as such:

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.

Once I run the app.js, the lines inside the share-sheet's index.js get printed correctly in the console, but once inside the app.js itself, the sharesheet is an empty object. So somehow the object exported at module.exports doesn't get returned once the share-sheet module is imported. what is wrong exactly ?

Upvotes: 1

Views: 3047

Answers (1)

Otis Chou
Otis Chou

Reputation: 36

It's because webpack doesn't know the exporting strategy of 'share-sheet' package. Configuring output.libraryTarget to commonjs2 should solve the problem.

webpack.config.js

...
output: {
  path: path.join(__dirname, '/dist'),
  filename: 'bundle.js',
  libraryTarget: 'commonjs2' // <----------
},
entry: path.join(__dirname, 'src/index')
...

You can find more informations about building library with webpack in here.

Upvotes: 2

Related Questions