interact.js icon indicating copy to clipboard operation
interact.js copied to clipboard

dev-tools/babel-plugin-prod causes errors with latest version (1.10.17)

Open semiaddict opened this issue 3 years ago • 2 comments

When using interact.js v1.10.17 with babel and webpack, all seems to work fine in development, but errors occur in production due to the use of the "dev-tools/babel-plugin-prod" babel plugin.

I can't reproduce this in online tools such as JSFilddle, so I'm attaching a reproduction example: interactjs-test.zip

To make it easier to see the errors, the reproduction adds the "dev-tools/babel-plugin-prod" plugin in development mode.

Expected behavior

No errors occur and dragging works.

Actual behavior

Errors occur and no interaction is possible. Since this only happens in production, errors messages are not very helpful, but here are stack traces anyway:

In Firefox:

Uncaught TypeError: r is null
    init webpack:///./node_modules/@interactjs/utils/browser.prod.js?:7
    initScope webpack:///./node_modules/@interactjs/core/scope.prod.js?:21
    init webpack:///./node_modules/@interactjs/core/scope.prod.js?:21
    <anonymous> webpack:///./node_modules/@interactjs/interact/index.prod.js?:6
    node_modules interactjs/interact/index.prod.js@http://localhost:8080/bundle.js:316
    __webpack_require__ http://localhost:8080/bundle.js:1066
    fn http://localhost:8080/bundle.js:1266
    <anonymous> webpack:///./node_modules/@interactjs/auto-start/index.prod.js?:2
    node_modules interactjs/auto-start/index.prod.js@http://localhost:8080/bundle.js:107
    __webpack_require__ http://localhost:8080/bundle.js:1066
    fn http://localhost:8080/bundle.js:1266
    <anonymous> webpack:///./src/index.js?:2
    js http://localhost:8080/bundle.js:811
    __webpack_require__ http://localhost:8080/bundle.js:1066
    <anonymous> http://localhost:8080/bundle.js:2139
    <anonymous> http://localhost:8080/bundle.js:2141
bundle.js line 558 > eval:7:641

In Chrome:

bundle.js:1069 Uncaught TypeError: Cannot read properties of null (reading 'prototype')
    at Object.init (browser.prod.js:7:681)
    at initScope (scope.prod.js:21:3292)
    at Scope.init (scope.prod.js:21:1391)
    at eval (index.prod.js:6:251)
    at ./node_modules/@interactjs/interact/index.prod.js (bundle.js:316:1)
    at __webpack_require__ (bundle.js:1066:33)
    at fn (bundle.js:1266:21)
    at eval (index.prod.js:2:81)
    at ./node_modules/@interactjs/auto-start/index.prod.js (bundle.js:107:1)
    at __webpack_require__ (bundle.js:1066:33)
init @ browser.prod.js:7
initScope @ scope.prod.js:21
init @ scope.prod.js:21
eval @ index.prod.js:6
./node_modules/@interactjs/interact/index.prod.js @ bundle.js:316
__webpack_require__ @ bundle.js:1066
fn @ bundle.js:1266
eval @ index.prod.js:2
./node_modules/@interactjs/auto-start/index.prod.js @ bundle.js:107
__webpack_require__ @ bundle.js:1066
fn @ bundle.js:1266
eval @ index.js:2
./src/index.js @ bundle.js:811
__webpack_require__ @ bundle.js:1066
(anonymous) @ bundle.js:2139
(anonymous) @ bundle.js:2141

It sort of seems like domObjects is not initialized.

System configuration

interact.js version: 1.10.17 Browser name and version: Chrome (105.0.5195.127) and Firefox (104.0.2) Operating System: Windows 10

semiaddict avatar Sep 19 '22 18:09 semiaddict

I just tested with older versions, and this issue seems to go back to version 1.10.15. It is not present in 1.10.14.

semiaddict avatar Sep 20 '22 05:09 semiaddict

I'm having the same issue with the babel plugin.

davbrito avatar Nov 17 '22 17:11 davbrito