Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

how i can use export default and require (webpack2) #2631

Closed
arshtepe opened this issue Jun 10, 2016 · 9 comments

Comments

Projects
None yet
5 participants
@arshtepe
Copy link

commented Jun 10, 2016

t.js:

export default class {

}

index.js:

const cls = require("./t");

export default class PreferenceOmitDialogCondition extends cls {

}

i know that i can require("./t").default , but i have many old code and it difficult change.

@TheLarkInn TheLarkInn added the question label Jun 10, 2016

@TheLarkInn

This comment has been minimized.

Copy link
Member

commented Jun 10, 2016

Is there a reason you are opposed to using:

import cls from './t';

export default class PreferenceOmitDialogCondition extends cls {

}
@arshtepe

This comment has been minimized.

Copy link
Author

commented Jun 11, 2016

@TheLarkInn I know but i have very very big project and can not change it, and i need compatibility . Is exists solution ?

@also

This comment has been minimized.

Copy link
Contributor

commented Jun 11, 2016

Can you change t.js? If you want to use CommonJS require, you'll want to also use CommonJS exports. This will allow you to require('./t'):

t.js:

module.exports = class {
}

Otherwise, using Babel and a plugin like add-module-exports could help.

@arshtepe

This comment has been minimized.

Copy link
Author

commented Jun 13, 2016

@also I can't change t.js it is as blackbox. This plugin not work on this code:
LinkUtils.js

export default class {
    static getObjectParamsFromUrl() {
       ...code
    }
}

RouterHashParams:

import LinkUtils from "./common/LinkUtils";
export default class RouterHashParams {

    constructor() {
        let linkParams = LinkUtils.getObjectParamsFromUrl();
    }
}

because after build i have:
RouterHashParams:

var __WEBPACK_IMPORTED_MODULE_2__common_LinkUtils__ = __webpack_require__(28);
    class RouterHashParams {

        constructor() {
//"a" overridden by  exports["default"]
            let linkParams = __WEBPACK_IMPORTED_MODULE_2__common_LinkUtils__["a" /* default */].getObjectParamsFromUrl();
           ....

in LinkUtils exports["a"] overridden by module.exports = exports["default"]

/* harmony default export */ exports["a"] = class {
        static getObjectParamsFromUrl() { 
            }
   ...
module.exports = exports["default"]; // <<<<<<<<<------- override exports
@arshtepe

This comment has been minimized.

Copy link
Author

commented Jun 13, 2016

Why after build i have exports["a"] and exports["default"] ?

@sokra

This comment has been minimized.

Copy link
Member

commented Jun 15, 2016

Don't mix babel es6 module handling with webpacks. webpack allows to mix CommonJs and ES6 modules this way:

// es6.js
import something from "./commonjs";

export default "xyz";
export var abc = "abc";
// commonjs.js
var xyz = require("./es6").default;
var abc = require("./es6").abc;

module.exports = "something";

Don't use the add-module-exports plugin.

PS: exports.a is used instead of exports.default when a es6 module is only imported via es6 imports. webpack mangles the export names.

@arshtepe

This comment has been minimized.

Copy link
Author

commented Jun 16, 2016

@sokra Yes, i know, but how i can solve this problem if i have code as #2631 (comment) and i cannot change him ?

@sokra

This comment has been minimized.

Copy link
Member

commented Jun 16, 2016

The code is wrong. Change it.

@arshtepe arshtepe closed this Jul 21, 2016

jiangfengming pushed a commit to wallstreetcn/webpack-and-spa-guide that referenced this issue Dec 2, 2016

@earksiinni

This comment has been minimized.

Copy link

commented Jan 13, 2017

I'm having a related problem. I have a module that looks like this (note, I'm using Babel's transform-class-properties plugin, hence the class properties syntax):

import { observable } from 'mobx';

class AppStateStore {
  @observable firstName = 'hi';
  @observable lastName = '';
  @observable phoneNumber = '';
  @observable mail = '';
  @observable city = '';
  @observable referralCode = '';
  @observable backgroundCheckOk = false;

  constructor() {}
}

let appStateStore = new AppStateStore();

//module.exports = appStateStore;
export default appStateStore;

Then I shim the module using ProvidePlugin like so:

plugins: [
  new webpack.ProvidePlugin({
    'app.state': 'stores/app_state.js'
  })
]

Then when I call app.state, I get an object that has a property called default that has all of the properties like firstName, lastName, etc. But that's wrong, there shouldn't be any property called default. app.state should simply point to the instance that I created.

On the other hand, when I use commonJS-style exporting (i.e., module.exports = appStateStore), it works perfectly.

What gives?

samouri added a commit to Automattic/wp-calypso that referenced this issue Oct 11, 2017

Do not use add-module-exports:
sokra says not to: webpack/webpack#2631 (comment)
it breaks b/c tries to insert

exports['default'] = module;

samouri added a commit to Automattic/wp-calypso that referenced this issue Oct 11, 2017

Do not use add-module-exports. Also remove react-hot-loader
sokra says not to: webpack/webpack#2631 (comment)
it breaks b/c tries to insert

exports['default'] = module;

samouri added a commit to Automattic/wp-calypso that referenced this issue Oct 20, 2017

Do not use add-module-exports. Also remove react-hot-loader
sokra says not to: webpack/webpack#2631 (comment)
it breaks b/c tries to insert

exports['default'] = module;

samouri added a commit to Automattic/wp-calypso that referenced this issue Oct 20, 2017

Do not use add-module-exports. Also remove react-hot-loader
sokra says not to: webpack/webpack#2631 (comment)
it breaks b/c tries to insert

exports['default'] = module;

samouri added a commit to Automattic/wp-calypso that referenced this issue Oct 20, 2017

Do not use add-module-exports. Also remove react-hot-loader
sokra says not to: webpack/webpack#2631 (comment)
it breaks b/c tries to insert

exports['default'] = module;

samouri added a commit to Automattic/wp-calypso that referenced this issue Oct 20, 2017

include getLocaleSlug in default export
disable es6 modues for client build

Do not use add-module-exports.  Also remove react-hot-loader

sokra says not to: webpack/webpack#2631 (comment)
it breaks b/c tries to insert

exports['default'] = module;

samouri added a commit to Automattic/wp-calypso that referenced this issue Oct 22, 2017

include getLocaleSlug in default export
disable es6 modues for client build

Do not use add-module-exports.  Also remove react-hot-loader

sokra says not to: webpack/webpack#2631 (comment)
it breaks b/c tries to insert

exports['default'] = module;

dmsnell added a commit to Automattic/wp-calypso that referenced this issue Nov 4, 2017

Do not use add-module-exports. Also remove react-hot-loader
sokra says not to: webpack/webpack#2631 (comment)
it breaks b/c tries to insert

exports['default'] = module;

dmsnell added a commit to Automattic/wp-calypso that referenced this issue Nov 13, 2017

Update imports/exports to use destructuring properly
Do not use add-module-exports.  Also remove react-hot-loader

sokra says not to: webpack/webpack#2631 (comment)
it breaks b/c tries to insert

exports['default'] = module;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.