ES6 import/export modules

Question

I have the following file structure:

src
  ...
  ListBox
    index.js
    ListBox.jsx
    ListBoxItem.jsx
  ...
  index.js

where

src/ListBox/ListBox.jsx

class ListBox extends React.Component {
  ...
}

export default ListBox

src/ListBox/ListBoxItem.jsx

class ListBoxItem extends React.Component {
  ...
}

export default ListBoxItem

src/ListBox/index.js

export { default as ListBox } from './ListBox'
export { default as ListBoxItem } from './ListBoxItem'

src/index.js

import ... from '...'
import { ListBox, ListBoxItem } from './ListBox'

export {
  ...
  ListBox,
  ListBoxItem
}

I'm using webpack as a bundler and here is an error

As you can see webpack is trying to find ListBox module in src/ListBox/index.jsx instead of src/ListBox/ListBox.jsx. If I change export { default as ListBox } from './ListBox' to export { default as ListBox } from './ListBox.jsx' it works. It is the same with ListBoxItem.

Here is my webpack.config.js

module.exports = (env) => {
const config = {
    devServer: {
        contentBase: path.join(__dirname, 'docs'),
        historyApiFallback: true,
        hot: true
    },
    devtool: env.development ? 'cheap-module-eval-source-map' : false,
    entry: {
        bundle: [
            'babel-polyfill',
            './docs/index.jsx'
        ]
    },
    output: {
        path: path.join(__dirname, 'docs'),
        filename: '[name].min.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                exclude: [
                    path.resolve(__dirname, 'node_modules')
                ],
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            minimize: env.production,
                            sourceMap: env.development
                        }
                    }, {
                        loader: 'postcss-loader',
                        options: {
                            plugins: [
                                autoprefixer({
                                    browsers: ['last 2 versions']
                                })
                            ],
                            sourceMap: env.development ? 'inline' : false
                        }
                    }, {
                        loader: 'less-loader',
                        options: {
                            sourceMap: env.development,
                            sourceMapContents: env.development
                        }
                    }
                ]
            },
            {
                test: /\.(?:jsx?)$/,
                use: 'babel-loader',
                exclude: [
                    path.resolve(__dirname, 'node_modules'),
                    /.*example\.jsx$/
                ]
            },
        ]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            minChunks: (module) => {
                return module.context && module.context.indexOf('node_modules') !== -1;
            }
        }),
        new HtmlWebpackPlugin({
            template: 'docs/index.html'
        }),
    ],
    resolve: {
        alias: {
            ui: path.resolve(__dirname, './src')
        },
        extensions: ['.js', '.jsx']
    }
};

return config

};

Answer 1

Looks like the error is due to your syntax in src/ListBox/index.js, as the error is saying that's the thing that's failing to build. Looking at your example, you may be exporting incorrectly:

// src/ListBox/index.js

export { default as ListBox } from './ListBox'
export { default as ListBoxItem } from './ListBoxItem'

Try changing to

// src/ListBox/index.js

import ListBox from './ListBox'
import ListBoxItem from './ListBoxItem'

export { ListBox, ListBoxItem }

I know there's an export...from syntax, but I could not find an example of doing that from multiple sources. You could try just removing the 'default' from your lines, but my example will work as well if slightly more verbose.

Answer 2

If you look closely at the error message, you can read that webpack expects ListBox\index.jsx, while you called it ListBox\index.js. You can either fix it by renaming your file or to adjust your webpack configuration so that it accepts .js, you can do that by adjusting your resolve directive.

resolve: {... extensions: ['.js','.jsx'] }