Package needs to be installed twice with NPM

[pswai]

What happened

There is a strange issue when installing with NPM that it requires 2 npm i when the repo is clean.

A minimal reproducible example is at https://github.com/pswai/react-spring-lightbox-install-issue

I have tried with Node 12 and 14. They create package-lock.json in slightly different formats but the issue remains.

I have tried with Yarn also. With Yarn the yarn.lock file is consistent. However, when attempting that with my actual project repo, my unit test suites fail for places using Lightbox. I don't have the error message at hand but I can provide if it helps.

Tested environment

NodeJS: 12.12.0 / 14.16.0
NPM: 6.11.3 / 6.14.11

Step to reproduce

1. Remove node_modules folder if exists.
2. Run npm i.
3. Notice that package-lock.json is changed. (diff is attached)
4. Necessary packages are not installed.
5. Run npm i again.
6. Notice that package-lock.json is changed back.

Changes to package-lock.json after the first run

{
  "name": "spring-lightbox-issue",
  "version": "1.0.0",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
    "@babel/runtime": {
      "version": "7.14.0",
      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.0.tgz",
      "integrity": "sha512-JELkvo/DlpNdJ7dlyw/eY7E0suy5i5GQH+Vlxaq1nsNJ+H7f4Vtv3jMeCEgRhZZQFXTjldYfQgv2qmM6M1v5wA==",
      "requires": {
        "regenerator-runtime": "^0.13.4"
      }
    },
-    "@react-spring/animated": {
-      "version": "npm:@tim-soft/react-spring-animated@9.0.0-beta.33",
-      "resolved": "https://registry.npmjs.org/@tim-soft/react-spring-animated/-/react-spring-animated-9.0.0-beta.33.tgz",
-      "integrity": "sha512-fXPywLQOWciayrq6nbdl+bAngZxNDDC7ZNigOvYv6Gfhqr9RNNQ0Nkn71bTomjQ4YKRlXjz9gcjzwKS/cW10gA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "@react-spring/shared": "9.0.0-beta.33",
-        "tiny-invariant": "^1.0.4"
-      }
-    },
-    "@react-spring/core": {
-      "version": "npm:@tim-soft/react-spring-core@9.0.0-beta.34",
-      "resolved": "https://registry.npmjs.org/@tim-soft/react-spring-core/-/react-spring-core-9.0.0-beta.34.tgz",
-      "integrity": "sha512-12DdLwQNgq+bFLGlcEaqUqe3tdqchZipbMb2F9H4jYfSIieQ8hQHRQvunS88j3EOMBKv9fdT8NTCZ0Br1Hd4Wg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "@react-spring/animated": "npm:@tim-soft/react-spring-animated@9.0.0-beta.33",
-        "@react-spring/shared": "9.0.0-beta.33",
-        "use-memo-one": "^1.1.0"
-      }
-    },
-    "@react-spring/shared": {
-      "version": "9.0.0-beta.33",
-      "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.0.0-beta.33.tgz",
-      "integrity": "sha512-oGalrGtIg7ZMn9VW5PzLFMDAa8vH5V0XIeC4WFk7JB4hBfhxx6yzPwjMxSJfRrt/Q+WuS2cPoR5qN0RpH+fJOA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "tiny-invariant": "^1.0.4"
-      }
-    },
-    "@react-spring/web": {
-      "version": "npm:@tim-soft/react-spring-web@9.0.0-beta.36",
-      "resolved": "https://registry.npmjs.org/@tim-soft/react-spring-web/-/react-spring-web-9.0.0-beta.36.tgz",
-      "integrity": "sha512-9qhvnJ/VkIeG59jTB4KgYvq5MH6qW/cPxylnORZlwHjNTA4WWtGB8CO08HDgIEoF6f5VaHWs3QIlthgsiN++Jg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "@react-spring/animated": "npm:@tim-soft/react-spring-animated@9.0.0-beta.33",
-        "@react-spring/core": "npm:@tim-soft/react-spring-core@9.0.0-beta.34",
-        "@react-spring/shared": "9.0.0-beta.33"
-      }
-    },
    "react-spring-lightbox": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/react-spring-lightbox/-/react-spring-lightbox-1.5.0.tgz",
      "integrity": "sha512-/MzmJ3cNuFTVvn4A5MG4HQXWxnfGVyZ9FHwFnJvsKLr/X1Vp6iw1ojFBFrrJegoEC2tVzWZ1UK4GJLul/dBMfw==",
      "requires": {
        "@babel/runtime": "^7.12.13",
-        "@react-spring/web": "npm:@tim-soft/react-spring-web@9.0.0-beta.36",
        "react-use-gesture": "9.0.4"
      }
    },
    "react-use-gesture": {
      "version": "9.0.4",
      "resolved": "https://registry.npmjs.org/react-use-gesture/-/react-use-gesture-9.0.4.tgz",
      "integrity": "sha512-G0sbQY+HSm2gSVIlD+LE1unpVpG7YZRTr8TI72vo0Nu1lecJtvjbcY3ZLonEZLTtODJgLL6nBllMRXyy0bRSQA=="
    },
    "regenerator-runtime": {
      "version": "0.13.7",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-    },
-    "tiny-invariant": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
-      "integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
-    },
-    "use-memo-one": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz",
-      "integrity": "sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ=="
    }
  }
}

[tim-soft]

I suspect this may have something to do with the aliased+repackaged @tim-soft/react-spring@beta.34

Coincidentally I just started the upgrade to the official and stable @react-spring/web@9.2.1 here #35

It's mostly working but have a few things left to fix, the apis changed quite a bit between these two releases.

When this is done (hopefully soon) i'll publish a new release and see if this is still an issue

[pswai]

@tim-soft Thanks for the quick response and taking your time to work on this! Yes I believe your suspicion is right. Let me know if I can be any help on this :)

[tim-soft]

@pswai I just released react-spring-lightbox@1.6.0 using @react-spring/web@9.2.1 , can you give this new version a try?

[pswai]

@tim-soft Thanks for the fix, the installation issue is now fixed.

However I run into an error during runtime, this is the stacktrace. I'll do some investigation on my side as well.

react-spring-shared.esm.js?d4c7:439

Uncaught TypeError: createStringInterpolator$1 is not a function
    at createInterpolator (react-spring-shared.esm.js?d4c7:439)
    at new AnimatedString (react-spring-animated.esm.js?75f6:87)
    at Function.create (react-spring-animated.esm.js?75f6:93)
    at SpringValue._set (react-spring-core.esm.js?926a:1207)
    at SpringValue._prepareNode (react-spring-core.esm.js?926a:922)
    at eval (react-spring-core.esm.js?926a:1711)
    at Array.forEach (<anonymous>)
    at each (react-spring-shared.esm.js?c5af:33)
    at prepareSprings (react-spring-core.esm.js?926a:1709)
    at eval (react-spring-core.esm.js?926a:1678)
    at Array.forEach (<anonymous>)
    at each (react-spring-shared.esm.js?c5af:33)
    at getSprings (react-spring-core.esm.js?926a:1667)
    at eval (react-spring-core.esm.js?926a:2176)
    at Array.forEach (<anonymous>)
    at each (react-spring-shared.esm.js?c5af:33)
    at useTransition (react-spring-core.esm.js?926a:2087)
    at J (index.es.js?eff7:1)
    at renderWithHooks (react-dom.development.js?61bb:14803)
    at mountIndeterminateComponent (react-dom.development.js?61bb:17482)
    at beginWork (react-dom.development.js?61bb:18596)
    at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:188)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:237)
    at invokeGuardedCallback (react-dom.development.js?61bb:292)
    at beginWork$1 (react-dom.development.js?61bb:23203)
    at performUnitOfWork (react-dom.development.js?61bb:22154)
    at workLoopSync (react-dom.development.js?61bb:22130)
    at performSyncWorkOnRoot (react-dom.development.js?61bb:21756)
    at eval (react-dom.development.js?61bb:11089)
    at unstable_runWithPriority (scheduler.development.js?3069:653)
    at runWithPriority$1 (react-dom.development.js?61bb:11039)
    at flushSyncCallbackQueueImpl (react-dom.development.js?61bb:11084)
    at flushSyncCallbackQueue (react-dom.development.js?61bb:11072)
    at scheduleUpdateOnFiber (react-dom.development.js?61bb:21199)
    at updateContainer (react-dom.development.js?61bb:24373)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js?61bb:24774)
    at Object.render (react-dom.development.js?61bb:24840)
    at renderReactElement (index.tsx?8abf:473)
    at doRender (index.tsx?8abf:719)
    at _callee2$ (index.tsx?8abf:360)
    at tryCatch (runtime.js?96cf:63)
    at Generator.invoke [as _invoke] (runtime.js?96cf:293)
    at Generator.eval [as next] (runtime.js?96cf:118)
    at asyncGeneratorStep (asyncToGenerator.js?a954:3)
    at _next (asyncToGenerator.js?a954:25)
    at eval (asyncToGenerator.js?a954:32)
    at new Promise (<anonymous>)
    at eval (asyncToGenerator.js?a954:21)
    at render (index.js:425)
    at Router.subscription [as sub] (index.tsx?8abf:318)

This was running with

react, react-dom 16.13.1
node 12.12.0
react-spring-lightbox 1.6.0
nextjs ^9.5.5

The call site looks like this

<Lightbox
  isOpen={show}
  onPrev={gotoPrevious}
  onNext={gotoNext}
  images={images.map((image) => ({
    src: image.large,
    alt: productName,
  }))}
  currentIndex={currentImageIndex}
  style={{ background: 'rgba(0,0,0,0.6)' }}
  onClose={() => setShow(true)}
  singleClickToZoom
/>

[dineshpannu]

I think I'm getting a similar issue in 1.6.0.

Around this code:
t=function(e){ if(r) switch(e.key){ case"ArrowLeft":c(); break; case"ArrowRight": s(); break; case"Escape": i(); break; default: e.preventDefault() } };

[tim-soft]

@dineshpannu can you repro in a code sandbox? you wouldn't happen to be passing undefined for onNext/onPrev props?

@pswai can you repro in a codesandbox?

[pswai]

@dineshpannu can you repro in a code sandbox? you wouldn't happen to be passing undefined for onNext/onPrev props?

@pswai can you repro in a codesandbox?

No it works perfectly on codesandbox 🤔 I'll continue to investigate

[pswai]

@tim-soft Interestingly I could not repro in code sandbox, let me try setting up a minimal repo for it.

[tim-soft]

fwiw the docs site is running nextjs 10
https://timellenberger.com/libraries/react-spring-lightbox

and you can check out the configs in that repo here https://github.com/tim-soft/next-portfolio