CODEWITHSUNDEEP
javascriptreactjswebpackecmascript-6
Adam
Adam

Reputation: 3518

After transpilation of an ES6 module with webpack, module not exported

I have developed a small package available here

In the src version I have an export statement:

export class Select extends React.Component {
    render() {
        return (
         ...the component
        )
    }
}

When I use this component in this form, I can import it like so:

import {Select} from 'select-react-redux';

However, after I bundle the package with webpack to the lib directory, I get an output file, which I would expect to have the same content as the original file, but ES5 instead of ES6.

The bundled file contains: var Select = exports.Select = function (_React$Component) {} which means that the Select component should be available to me, but it isn't.

Any help will be much appreciated.

Upvotes: 1

Views: 174

Answers (3)

Adam
Adam

Reputation: 3518

Thank you for your answers. They are both correct but they didn't resolve the issue for me. I spent two days to trying to resolve the issue and I am certain that this is a webpack issue. Using the same source files but using babel to compile them modules are exported correctly.

babel src/ -d lib/

Also I went with export option like this, in the root of the lib folder in the index.js file. This way it will be more modular when I add more components

import {Select} from './Select';
export {Select as Select};

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

You export statements should be any of the following

export default class Select extends React.Component {
    render() {
        return (
         ...the component
        )
    }
}

//import 

import Select from 'select-react-redux'

or

class Select extends React.Component {
        render() {
            return (
             ...the component
            )
        }
    }

export {
   Select,
}

//import
import {Select} from 'select-react-redux'

Hope this helps!

Upvotes: 1

yadhu
yadhu

Reputation: 15632

In package.json, I see that your package's entry point is defined as:

"main": "src/index.js",

Since you've ES6 code in src/index.js you will need an appropriate loader to use the package as it is. But checking through your webpack configs I found that you already have transpiled code in lib/index.js. So you need to specify your packages entry point as:

"main": "lib/index.js"

Upvotes: 1

Related Questions