-
Notifications
You must be signed in to change notification settings - Fork 240
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Bug: ReferenceError: Vue is not defined - Missing exports declaration ? #2462
Comments
We already have the module export, it's on the very first line in your screenshot. I thought the bundler would look there - it certainly should. What version of webpack are you using? I wonder if an old webpack version does not respect the top level Line 8 in 844f508
|
Hi @lmiller1990 and thanks for your reply, I alredy saw the module export and that's why I kept this line in my screenshot. As you said, clearly, I'm using an almost up-to-date stack here, I completely agree with you that I'm aware this looks in a sense like a Edit: After checking more thoroughly in |
What does your project have for I'm hesitant to merge this until we understand the core issue. This package has millions of downloads for week - it's not really ideal to merge a quick fix for one person's project, until we actually understand what's going on. |
Hi @lmiller1990, Sure, I clearly understand your point of view and wasn't expecting a quick fix. Let's hope we can find out what happens here... Our project has no Edit: I tried to get as much information as possible by delving inside Webpack directly. I'm now almost sure current behaviour is what I wrote at the end of my comment yesterday ! At first, if you look in official Webpack documentation it is stated that This seems to be confirmed inside the Webpack concept note about module resolution. And finally, I tried to delve deeper in source code and found that the package which resolves for For my personal case here, the resolve request is made with the That's all I've found for now... I don't know how other builders are working internally however so once again, I can't tell if adding this line in I hope this will be of interest for you to better understand what happens in my case for sure, but I think also for all the people who are using |
Just a little word to say that I just edited my last comment... passing too much time on it made me miss the fact that I'd like to make one or two more tests on my side to see why the Also wanted to say that I'll soon be on summer break, so if I don't reply for a certain time, please don't consider the issue as stalled... I hope to finish my tests beforehand but have some other obligations so I'm not sure I'll be able to do them... Thanks again for your valuable replies. |
No problem, will leave this open. We can merge webpack specific code as long as we are confident it won't break other bundlers, webpack is still the most widely used bundler. I know webpack often overreaches and does some weird things, mainly because it was doing that before any of these standards really existed. Let me know if you need any more info or if you are ready for a review - if we could just try the patch against some other popular tool chains / boilerplates, that'd be fine. |
Hi @lmiller1990 and thanks for your understanding and time on this issue. I couldn't resist to make all the tests I wanted before my leave... here's what I've found and some other proposals that could perhaps better suit depending on your experience with all the tools chains out there... So, with a current version of To summarize, my personal problem comes from the fact that My first proposal was indeed to include "exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./dist/vue-test-utils.cjs.js",
"module": "./dist/vue-test-utils.esm-bundler.mjs",
"import": "./dist/vue-test-utils.esm-bundler.mjs",
"browser": "./dist/vue-test-utils.browser.js",
"require": "./dist/vue-test-utils.cjs.js",
"default": "./dist/vue-test-utils.cjs.js"
},
"./package.json": "./package.json"
}, However, the main reason in the end is that "exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./dist/vue-test-utils.cjs.js",
"import": "./dist/vue-test-utils.esm-bundler.mjs",
"require": "./dist/vue-test-utils.cjs.js",
"browser": "./dist/vue-test-utils.browser.js",
"default": "./dist/vue-test-utils.cjs.js"
},
"./package.json": "./package.json"
}, This second proposal could perhaps be safer and would makes more sense in all cases... except if I miss some use cases, I suppose an IIFE is only used in pure browser context without using modern bundling technologies ? And eventually, what can also be done as a safety net is to nest multiple conditions in the "exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./dist/vue-test-utils.cjs.js",
"import": "./dist/vue-test-utils.esm-bundler.mjs",
"webpack": {
"module": "./dist/vue-test-utils.esm-bundler.mjs"
},
"browser": "./dist/vue-test-utils.browser.js",
"require": "./dist/vue-test-utils.cjs.js",
"default": "./dist/vue-test-utils.cjs.js"
},
"./package.json": "./package.json"
}, This last possibility can be mixed with the second one if you prefer: "exports": {
".": {
"types": "./dist/index.d.ts",
"node": "./dist/vue-test-utils.cjs.js",
"import": "./dist/vue-test-utils.esm-bundler.mjs",
"webpack": {
"require": "./dist/vue-test-utils.cjs.js"
},
"browser": "./dist/vue-test-utils.browser.js",
"require": "./dist/vue-test-utils.cjs.js",
"default": "./dist/vue-test-utils.cjs.js"
},
"./package.json": "./package.json"
}, So after all those tests and thinking about it, I'd personally propose to take the second option (switching Just take your time to think about it and tell how you feel, I'll happily open a PR when coming back from my break in case you think one is worth considering... |
Second options seems the best imo - what to make a PR? |
Describe the bug
Hello, I'm kind of reopening #234 here as I'm having some trouble upgrading a software to Vue3 which was running completely fine in Vue 2 with Karma test runner and Vue Test Utils V1.x latest version.
Once everything is updated, unit tests can't run anymore and a
ReferenceError: Vue is not defined
is thrown.I tried to follow what was written in this post and investigate the different possibilities and found that the easiest way around was to simply add a "module" exports inside the
package.json
of VTU like this:Is there a good reason not to declare the module exports type here ? I'm not an expert at all in bundling so I don't know if there could be some bad side effects... If not, could it be inserted here ? I'm O.K. to create a simple PR with this if needed...
To give more information on the first reply that was given by @lmiller1990 at that time,
Karma
bundles the unit tests, the project source code and its test runner usingWebpack
then executes the result inside a browser directly and not using node and JSDom as lots of "modern" test runners do. Thetarget
parameter inside webpack config file is set to default (sobrowserslist
orweb
).Thanks in advance ;-)
The text was updated successfully, but these errors were encountered: