Invalid import of variables in compiled code

[jansedlon]

SWC incorrectly imports consts from file. That's interesting because one of them is imported and other two are not.

Input code

import {
    INSTAGRAM_CHECK_PATTERN,
    RESOURCE_FACEBOOK,
    RESOURCE_INSTAGRAM,
    RESOURCE_WEBSITE,
} from '../../../../consts'

const resources = [
    {
        value: RESOURCE_WEBSITE,
        label: 'Webové stránky',
    },
    {
        value: RESOURCE_FACEBOOK,
        label: 'Facebook',
    },
    {
        value: RESOURCE_INSTAGRAM,
        label: 'Instagram',
    },
]

// export default decorated React class component

Compiled code

// About 15 empty lines


var resources = [
    {
        value: RESOURCE_WEBSITE,
        label: 'Webové stránky'
    },
    {
        value: RESOURCE_FACEBOOK,
        label: 'Facebook'
    },
    {
        value: _consts__WEBPACK_IMPORTED_MODULE_6__["RESOURCE_INSTAGRAM"],
        label: 'Instagram'
    }, 
];
var _dec = Object(_validator__WEBPACK_IMPORTED_MODULE_9__["i18n"])();

Definition of constants in compiled code

/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RESOURCE_WEBSITE", function() { return RESOURCE_WEBSITE; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RESOURCE_FACEBOOK", function() { return RESOURCE_FACEBOOK; });
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "RESOURCE_INSTAGRAM", function() { return RESOURCE_INSTAGRAM; });

Config

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "jsx": true,
      "numericSeparator": false,
      "classPrivateProperty": false,
      "privateMethod": false,
      "classProperty": true,
      "functionBind": false,
      "optionalChaining": true,
      "dynamicImport": true,
      "nullishCoalescing": true,
      "decorators": true,
      "decoratorsBeforeExport": true
    },
    "target": "es2015",
    "loose": false,
    "transform": {
      "react": {
        "pragma": "React.createElement",
        "pragmaFrag": "React.Fragment",
        "throwIfNamespace": true,
        "development": false,
        "useBuiltins": false
      },
      "optimizer": {
        "globals": {
          "vars": {
            "__DEBUG__": "true"
          }
        }
      }
    }
  }
}

Expected behavior
Import every variable in a same way. Or correct one.

Version
The version of @swc/core: v1.1.41

[kdy1]

I've tested it, and it seems like the dead code elimination pass considers RESOURCE_WEBSITE as dead. Can you share your code which uses the variable resources ?

[jansedlon]

Sure. What I see here is that RESOURCE_INSTAGRAM is used in const resources as well as in the component Contacts directly.. However RESOURCE_WEBSITE and RESOURCE_FACEBOOK are used in const resources and {resources.map(...)} so these two constants are not used directly

consts.js

// Many constants
export const RESOURCE_WEBSITE = 1
export const RESOURCE_FACEBOOK = 2
export const RESOURCE_INSTAGRAM = 3

websites.jsx

import {
    INSTAGRAM_CHECK_PATTERN,
    RESOURCE_FACEBOOK,
    RESOURCE_INSTAGRAM,
    RESOURCE_WEBSITE,
} from '../../../../consts'

const resources = [
    {
        value: RESOURCE_WEBSITE,
        label: 'Webové stránky',
    },
    {
        value: RESOURCE_FACEBOOK,
        label: 'Facebook',
    },
    {
        value: RESOURCE_INSTAGRAM,
        label: 'Instagram',
    },
]

@i18n()
export default class Contacts extends Component {

    renderWebsites = websites => {
        return websites.map((website, idx) => (
            <div>
                {/* Some code */}
                {resources.map(resource => (<option key={resource.value} value={resource.value}>{resource.label}</option>))}
                <Input
                        type={website.type_id === RESOURCE_INSTAGRAM ? 'text' : 'url'}
                        label={website.type_id === RESOURCE_INSTAGRAM ? t('eventEntity.links.instagramLabel') : t('eventEntity.links.urlTitle')}
                        placeholder={website.type_id === RESOURCE_INSTAGRAM ? t('eventEntity.links.instagramPlaceholder') : t('eventEntity.links.urlPlaceholder')}
                        value={website.value || ''}
                        onChange={ev => this.updateField(idx, 'websites', 'value', ev.target.value)}
                        onBlur={ev => this.blurWebResource(idx, website.type_id, ev.target.value)}
                        maxLength="255"
                        pattern={website.type_id === RESOURCE_INSTAGRAM && INSTAGRAM_CHECK_PATTERN}
                        title={website.type_id === RESOURCE_INSTAGRAM && t('eventEntity.links.instagramTitle')}
                    />
            </div>
        ))
    }

    render = () => {
        const { websites } = this.props
        return (
            <Fragment>
                {websites && this.renderWebsites(websites)}
           </Fragment>
        )
    }
}

[jansedlon]

If you need anything else, tell me. However I don't want to share any implementation details since it's a company's closed source application

[kdy1]

@jansedlon It's enough. Thanks!

[kdy1]

I've failed to reproduce it.

Log

➜  swc git:(issue-763) ✗ cd ./tests/projects 
➜  projects git:(issue-763) npm i -g @swc/core

> @swc/core@1.1.41 install /usr/local/lib/node_modules/@swc/core
> node scripts/install.js || (npm install neon-cli && neon build --release)

Thank you for using swc ( https://github.com/swc-project/swc ): super-fast javascript and typescript compiler 

The project needs your help! Please consider supporting swc on Open Collective: 
> https://opencollective.com/swc 

Downloading binary from https://github.com/swc-project/node-swc/releases/download/v1.1.41/darwin-x64-72.node
=========================================================================================================================================================================================================

+ @swc/core@1.1.41
updated 1 package in 12.431s
➜  projects git:(issue-763) swc ./issue-763/input.js 
'use strict';
Object.defineProperty(exports, '__esModule', {
    value: true
});
exports.default = void 0;
var _consts = require('../../../../consts');
function _assertThisInitialized(self) {
    if (self === void 0) {
        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
    }
    return self;
}
function _classCallCheck(instance, Constructor) {
    if (!(instance instanceof Constructor)) {
        throw new TypeError('Cannot call a class as a function');
    }
}
function _defineProperty(obj, key, value) {
    if (key in obj) {
        Object.defineProperty(obj, key, {
            value: value,
            enumerable: true,
            configurable: true,
            writable: true
        });
    } else {
        obj[key] = value;
    }
    return obj;
}
function _getPrototypeOf(o) {
    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
        return o.__proto__ || Object.getPrototypeOf(o);
    };
    return _getPrototypeOf(o);
}
function _inherits(subClass, superClass) {
    if (typeof superClass !== 'function' && superClass !== null) {
        throw new TypeError('Super expression must either be null or a function');
    }
    subClass.prototype = Object.create(superClass && superClass.prototype, {
        constructor: {
            value: subClass,
            writable: true,
            configurable: true
        }
    });
    if (superClass) _setPrototypeOf(subClass, superClass);
}
function _possibleConstructorReturn(self, call) {
    if (call && (_typeof(call) === 'object' || typeof call === 'function')) {
        return call;
    }
    return _assertThisInitialized(self);
}
function _setPrototypeOf(o, p) {
    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
        o.__proto__ = p;
        return o;
    };
    return _setPrototypeOf(o, p);
}
var _typeof = function(obj) {
    return obj && obj.constructor === Symbol ? 'symbol' : typeof obj;
};
var resources = [
    {
        value: _consts.RESOURCE_WEBSITE,
        label: 'Webové stránky'
    },
    {
        value: _consts.RESOURCE_FACEBOOK,
        label: 'Facebook'
    },
    {
        value: _consts.RESOURCE_INSTAGRAM,
        label: 'Instagram'
    }, 
];
var Contacts = function(Component) {
    'use strict';
    _inherits(Contacts, Component);
    function Contacts() {
        _classCallCheck(this, Contacts);
        var _this;
        _this = _possibleConstructorReturn(this, _getPrototypeOf(Contacts).apply(this, arguments));
        _defineProperty(_assertThisInitialized(_this), 'renderWebsites', function(websites) {
            return websites.map(function(website, idx) {
                return React.createElement('div', null, resources.map(function(resource) {
                    return React.createElement('option', {
                        key: resource.value,
                        value: resource.value
                    }, resource.label);
                }));
            });
        });
        _defineProperty(_assertThisInitialized(_this), 'render', function() {
            var _props = _this.props, websites = _props.websites;
            return React.createElement(Fragment, null, websites && _this.renderWebsites(websites));
        });
        return _this;
    }
    return Contacts;
}(Component);
exports.default = Contacts;

I'll investigate further

[jansedlon]

I'll try to reproduce it as well.

[jansedlon]

@kdy1 I was able to reproduce it. You can find it here
https://github.com/jansedlon/swc-bug

[jansedlon]

It's happening only if I import those constants. If I declare them in a same file, it's okay.

[kdy1]

@jansedlon Thanks a lot!!

In my experience, finding a bug and creating minimal reproduction for it is really hard.

[jansedlon]

@kdy1 Haha, yeah, that's, true. I feel bad for just issuing a bug and let you do all the work so I try to help you as much as I can 😅

[jansedlon]

I forgot to add there a .swcrc file, it's fixed now.

[swc-bot]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.