1

I'm trying to setup an ES2015 lib that's added to my other ES2015 projects. I've tried abunch and this is currently where I am: I have ES2015 modules that are transpiled to 5 and then use import in my ES2015 modules in my base project. My Lib just has an index file that exports a test module:

My problem exists in that everything works in the browser, but I have no code hinting in WebStorm when I import, so my lib is not very useful.

Import statement:

import { TestModule } from 'sfl';

Failed Code Hinting:

enter image description here

enter image description here

ES2015 index.js:

export TestModule from './TestModule';

ES2015 TestModule.js:

export default class TestModule {
    constructor() {
        this.test = 'test';
    }

    static logTest(content) {
        window.console.log(content);
    }
}

Which transpiled looks like:

ES5 index.js:

'use strict';
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.TestModule = undefined;

var _TestModule2 = require('./TestModule');

var _TestModule3 = _interopRequireDefault(_TestModule2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

exports.TestModule = _TestModule3.default;

ES5 TestModule.js:

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var TestModule = function () {
    function TestModule() {
        (0, _classCallCheck3.default)(this, TestModule);

        this.test = 'test';
    }

    (0, _createClass3.default)(TestModule, null, [{
        key: 'logTest',
        value: function logTest(content) {
            window.console.log(content);
        }
    }]);
    return TestModule;
}();

exports.default = TestModule;
module.exports = exports['default'];

babelrc:

{
  "presets": ["es2015", "stage-1"],
  "plugins": ["transform-runtime", "add-module-exports"]
}
  • Seems to work fine for me, but I'm running PHPStorm 2016.2. Could you check my repo to see if it fails in your IDE as well? https://github.com/tiemevanveen/webstorm-transpile-test – Tieme Nov 22 '16 at 10:20
  • BTW, you can file an issue here if it keeps failing: https://youtrack.jetbrains.com/issues/WEB – Tieme Nov 22 '16 at 10:25
  • @Tieme, it works with other modules in the same projects, but the lib is imported as a node module, that seems to break the resolving of the module, unless I use the es6 modules in the package. If Import it locally it does resolve in code hinting (but keeps throwing warning in editor) – Jacco Goris Nov 22 '16 at 10:42
  • Weird. ¯\_(ツ)_/¯ Maybe check how other libs are doing that? – Tieme Nov 22 '16 at 11:02
  • @JaccoGoris Did you get any success with this so far? – Simon Sep 22 '17 at 22:49

0 Answers0