0

I'm building a component library to be imported in an React app. I want to expose these components so that they can be dynamically imported in the app.

What I tried:

lib > index.js

export const Component1 = import(/* webpackChunkName: "components/Component1" */ './components/Component1')
export const Component2 = import(/* webpackChunkName: "components/Component2" */ './components/Component2')

lib > webpack.config.js

entry: path.resolve('src/index.js'),
output: {
    path: path.resolve('build'),
    filename: 'index.js',
    chunkFilename: '[name].js',
    library: 'lib',
    libraryTarget: 'umd'
},

Build result

80.13 KB  build/index.js
69.68 KB  build/components/Component1.js
12.4 KB   build/components/Component2.js

What I want to achieve:

app > index.js

import('lib/components/Component1').then(module => {
    console.log(module) // Empty object so far
})

How am I suppose to export the components so that they are available one by one? Or is there another way?

untemps
  • 165
  • 2
  • 11
  • From your build result output it looks like that's exactly what you achieved? What am I missing? Do you not have a `components` directory with both components in it? You might need to set the `libraryExport: default` option in your config as well. https://webpack.js.org/configuration/output/#output-libraryexport – Chase DeAnda Oct 06 '17 at 21:00
  • I've got the components in the output but they are not available when I want to retrieve them in the app. However I'll try to set the libraryExport option. – untemps Oct 07 '17 at 20:44

1 Answers1

0

Finally I succeeded to achieve what I meant by using the configuration defined here: https://github.com/webpack/webpack/tree/master/examples/multi-part-library

I'm not asynchronously importing the components anymore but set different entries in the webpack config instead.

untemps
  • 165
  • 2
  • 11