Meteor Packages Undefined When Using Yarn in React Example

Question

Meteor Packages Undefined When Using Yarn in React Example

stolinski opened this issue 7 years ago · 10 comments

Not sure if this is an issue with the React example in the repo or with the lib.
Steps to reproduce.

Clone Repo
cd in to examples/react
yarn
meteor

Seeing lots of things as undefined

Uncaught TypeError: _this._launchConnection is not a function
    at new ClientStream (browser.js:46)
    at new Connection (livedata_connection.js:86)
    at Object.DDP.connect (namespace.js:64)
    at client_convenience.js (client_convenience.js:48)
    at fileEvaluate (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353)
    at require (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:248)
    at client.js (client.js:1)
    at fileEvaluate (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353)
    at require (modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:248)
    at ddp-client.js?hash=a547928b29e722e419948bbc25e954f2c268a1c3:2381
ClientStream @ browser.js:46
Connection @ livedata_connection.js:86
DDP.connect @ namespace.js:64
client_convenience.js @ client_convenience.js:48
fileEvaluate @ modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353
require @ modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:248
client.js @ client.js:1
fileEvaluate @ modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:353
require @ modules-runtime.js?hash=9f9bb5e055614ddf4eb3e743737b7a5b3cfd9d34:248
(anonymous) @ ddp-client.js?hash=a547928b29e722e419948bbc25e954f2c268a1c3:2381
(anonymous) @ ddp-client.js?hash=a547928b29e722e419948bbc25e954f2c268a1c3:2388
ddp.js?hash=dae39f35e2956c6df4d8b9963eea38371d546176:14 Uncaught TypeError: Cannot read property 'DDP' of undefined
    at ddp.js?hash=dae39f35e2956c6df4d8b9963eea38371d546176:14
    at ddp.js?hash=dae39f35e2956c6df4d8b9963eea38371d546176:23

If you then run with npm install instead, everything works fine.

Answer 1 · 2018-05-26T18:52:40.000Z

#22 Looks like same problem caused by @babel/runtime and babel-loader.

Answer 2 · 2018-05-26T23:40:50.000Z

Def not the same issue as #22. This will happen with a React Example in this repo as is with no modifications.

It more resembles #9 where the errors you see are the exact same.

Only happens with yarn, running npm install fixes.

Answer 3 · 2018-05-27T00:11:53.000Z

Npm locks the version in lock file, yarn creates a new one with the latest version of ‘@babel/runtime’. As I experienced same in my project, the latest version of that runtime library breaks the bundle. Somehow Meteor bundler doesn’t inject package scripts into the HTML when latest version of that library installed. And Meteor bundler also uses babelrc with its builtin babel, then this causes it messes up. The workaround can be embed your own configuration into webpack configuration.
This can be related to Meteor’s bundler, so I will still investigate the reason.

Answer 4 · 2018-05-27T02:19:54.000Z

I'm not getting the same errors from this that I am from the other issue. I'm running yarn with the older versions of the bundler and babel and it's giving me these errors. Not the same errors as the other issue.

…

On Sat, May 26, 2018, 6:11 PM Arda TANRIKULU ***@***.***> wrote: Npm locks the version in lock file, yarn creates a new one with the latest version of ‘’. As I experienced same in my project, the latest version of that runtime library breaks the bundle. Somehow Meteor bundler doesn’t inject package scripts into the HTML when latest version of that library installed. This can be related to Meteor’s bundler, so I will still investigate the reason. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#21 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAo2xxERyXqVS1SmRfwsYgg3H5Qopmzvks5t2e9KgaJpZM4UOHYQ> .

Answer 5 · 2018-05-27T02:24:36.000Z

I can do a screencast if you want me to illustrate how they are different and how to reproduce if that helps. On Sat, May 26, 2018, 8:19 PM Scott Tolinski <scotttolinski@gmail.com> wrote:

…

I'm not getting the same errors from this that I am from the other issue. I'm running yarn with the older versions of the bundler and babel and it's giving me these errors. Not the same errors as the other issue. On Sat, May 26, 2018, 6:11 PM Arda TANRIKULU ***@***.***> wrote: > Npm locks the version in lock file, yarn creates a new one with the > latest version of ‘’. As I experienced same in my project, the latest > version of that runtime library breaks the bundle. Somehow Meteor bundler > doesn’t inject package scripts into the HTML when latest version of that > library installed. > This can be related to Meteor’s bundler, so I will still investigate the > reason. > > — > You are receiving this because you authored the thread. > Reply to this email directly, view it on GitHub > <#21 (comment)>, > or mute the thread > <https://github.com/notifications/unsubscribe-auth/AAo2xxERyXqVS1SmRfwsYgg3H5Qopmzvks5t2e9KgaJpZM4UOHYQ> > . >

Answer 6 · 2018-05-27T02:40:28.000Z

I never meant that the errors are same, but the reason is probably same. As I said before, yarn installs the latest version just by looking into package.json while npm looks into package-lock for exact version.

Answer 7 · 2018-05-28T22:29:54.000Z

But yarn is adding "babel-loader": "^7.1.4" not "babel-loader@^8.0.0-beta" like in the other issue.

Answer 8 · 2018-06-03T18:16:48.000Z

Could you try to run the following command and try again?

meteor update babel-compiler ecmascript modules

I think this issue is not related meteor-webpack, but Meteor's own packages.
meteor/meteor#9905

Answer 9 · 2018-06-03T19:03:31.000Z

Have you tried the reproduction steps? I was able to reproduce this several times with your own demo repo.

…

On Sun, Jun 3, 2018, 12:18 PM Arda TANRIKULU ***@***.***> wrote: Closed #21 <#21>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#21 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAo2x4o8c6-7RvCMK-BQC6Ul49u0ZNb6ks5t5ChygaJpZM4UOHYQ> .

Answer 10 · 2018-06-03T19:46:19.000Z

Yes, I did. And after I updated the specified packages, it was disappeared.
So, I also updated the packages in ‘react’ example then pushed it in the last commit.
That’s why, I suggested you to update your project or clone like I did to solve this issue.
If you clone the repo again, you will see that it is solved.