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
Closed

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

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

Comments

@arshtepe
Copy link

@arshtepe arshtepe 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
Copy link
Member

@TheLarkInn TheLarkInn commented Jun 10, 2016

Is there a reason you are opposed to using:

import cls from './t';

export default class PreferenceOmitDialogCondition extends cls {

}

@arshtepe
Copy link
Author

@arshtepe arshtepe 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
Copy link
Contributor

@also also 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
Copy link
Author

@arshtepe arshtepe 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
Copy link
Author

@arshtepe arshtepe commented Jun 13, 2016

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

@sokra
Copy link
Member

@sokra sokra 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
Copy link
Author

@arshtepe arshtepe 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
Copy link
Member

@sokra sokra 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
Copy link

@earksiinni earksiinni 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
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
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
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
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
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
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
Labels
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
5 participants