Error importing single file component

[CodingItWrong]

Bug Report

• Version: 1.10.3
• Platform: macOS
• Expected behavior: can import a single-file component into a unit test to test it
• Actual behavior: receive the error:

./src/components/HelloWorld.vue
Module build failed: TypeError: Cannot read property 'vue' of undefined
 @ ./cypress/integration/HelloWorld_spec.js 2:0-61 5:22-32

• Workaround: lock the version of @cypress/webpack-preprocessor to ^1.1.3

Minimum reproducible test case project

[bahmutov]

Not sure where this is coming from, this repo seems to work with preprocessor 2.0.1 just fine. I added a package lock just in case. Here is my list of modules in this repos just in case

$ npm ls --depth 1
cypress-vue-unit-test@0.0.0-development /Users/gleb/git/cypress-vue-unit-test
├─┬ @cypress/webpack-preprocessor@2.0.1
│ ├── babel-core@6.26.0
│ ├── babel-loader@7.1.4
│ ├── babel-preset-env@1.6.0
│ ├── babel-preset-react@6.24.1
│ ├── bluebird@3.5.0
│ ├── debug@3.1.0
│ ├── lodash.clonedeep@4.5.0
│ └── webpack@4.6.0
├─┬ axios@0.18.0
│ ├── follow-redirects@1.4.1
│ └── is-buffer@1.1.6
├─┬ babel-plugin-transform-object-rest-spread@6.26.0
│ ├── babel-plugin-syntax-object-rest-spread@6.13.0
│ └── babel-runtime@6.26.0
├─┬ ban-sensitive-files@1.9.2
│ ├── bluebird@3.5.1
│ ├── check-more-types@2.24.0
│ ├── debug@3.1.0 deduped
│ ├── ggit@2.4.2
│ ├── lazy-ass@1.6.0
│ ├── pluralize@7.0.0
│ ├── ramda@0.25.0
│ └── update-notifier@2.3.0
├─┬ common-tags@1.7.2
│ └── babel-runtime@6.26.0 deduped
├─┬ css-loader@0.28.11
│ ├── babel-code-frame@6.26.0
│ ├── css-selector-tokenizer@0.7.0
│ ├── cssnano@3.10.0
│ ├── icss-utils@2.1.0
│ ├── loader-utils@1.1.0
│ ├── lodash.camelcase@4.3.0
│ ├── object-assign@4.1.1
│ ├── postcss@5.2.18
│ ├── postcss-modules-extract-imports@1.2.0
│ ├── postcss-modules-local-by-default@1.2.0
│ ├── postcss-modules-scope@1.1.0
│ ├── postcss-modules-values@1.3.0
│ ├── postcss-value-parser@3.3.0
│ └── source-list-map@2.0.0
├─┬ cypress@2.1.0
│ ├── @cypress/listr-verbose-renderer@0.4.1
│ ├── @cypress/xvfb@1.1.3
│ ├── @types/blob-util@1.3.3
│ ├── @types/bluebird@3.5.18
│ ├── @types/chai@4.0.8
│ ├── @types/chai-jquery@1.1.35
│ ├── @types/jquery@3.2.16
│ ├── @types/lodash@4.14.87
│ ├── @types/minimatch@3.0.1
│ ├── @types/mocha@2.2.44
│ ├── @types/sinon@4.0.0
│ ├── @types/sinon-chai@2.7.29
│ ├── bluebird@3.5.0 deduped
│ ├── chalk@2.1.0
│ ├── check-more-types@2.24.0 deduped
│ ├── commander@2.11.0
│ ├── common-tags@1.4.0
│ ├── debug@3.1.0 deduped
│ ├── extract-zip@1.6.6
│ ├── fs-extra@4.0.1
│ ├── getos@2.8.4
│ ├── glob@7.1.2
│ ├── is-ci@1.0.10
│ ├── is-installed-globally@0.1.0
│ ├── lazy-ass@1.6.0 deduped
│ ├── listr@0.12.0
│ ├── lodash@4.17.4
│ ├── minimist@1.2.0
│ ├── progress@1.1.8
│ ├── ramda@0.24.1
│ ├── request@2.81.0
│ ├── request-progress@0.3.1
│ ├── supports-color@5.1.0
│ ├── tmp@0.0.31
│ ├── url@0.11.0
│ └── yauzl@2.8.0
├─┬ dependency-check@3.1.0
│ ├── builtins@2.0.0
│ ├── debug@3.1.0 deduped
│ ├── detective@5.1.0
│ ├── is-relative@1.0.0
│ ├── minimist@1.2.0
│ ├── read-package-json@2.0.13
│ └── resolve@1.7.1
├─┬ deps-ok@1.4.0
│ ├── check-more-types@2.24.0 deduped
│ ├── debug@3.1.0 deduped
│ ├── lazy-ass@1.6.0 deduped
│ ├── lodash@4.17.5
│ ├── minimist@1.2.0
│ ├── q@2.0.3
│ ├── quote@0.4.0
│ └── semver@5.5.0
├─┬ git-issues@1.3.1
│ ├── abs@1.3.12
│ ├── bug-killer@4.4.4
│ ├── clp@3.2.1
│ ├── couleurs@5.2.1
│ ├── git-url-parse@4.2.1
│ ├── gry@4.3.1
│ ├── is-there@4.4.3
│ ├── le-table@4.2.2
│ └── request@2.81.0 deduped
├─┬ github-post-release@1.13.1
│ ├── am-i-a-dependency@1.1.2
│ ├── bluebird@3.5.0 deduped
│ ├── check-more-types@2.24.0 deduped
│ ├── commit-closes@1.0.1
│ ├── common-tags@1.4.0
│ ├── debug@3.0.0
│ ├── github@9.2.0
│ ├── github-url-from-git@1.5.0
│ ├── lazy-ass@1.6.0 deduped
│ ├── new-public-commits@1.3.1
│ ├── parse-github-repo-url@1.4.0
│ ├── pluralize@6.0.0
│ ├── ramda@0.24.1
│ ├── simple-changelog@1.1.3
│ └── simple-commit-message@3.3.1
├─┬ license-checker@18.0.0
│ ├── chalk@0.5.1
│ ├── debug@2.6.9
│ ├── mkdirp@0.3.5
│ ├── nopt@2.2.1
│ ├── read-installed@4.0.3
│ ├── semver@5.5.0 deduped
│ ├── spdx@0.5.1
│ ├── spdx-correct@2.0.4
│ ├── spdx-satisfies@0.1.3
│ └── treeify@1.1.0
├─┬ mocha@5.1.1
│ ├── browser-stdout@1.3.1
│ ├── commander@2.11.0
│ ├── debug@3.1.0 deduped
│ ├── diff@3.5.0
│ ├── escape-string-regexp@1.0.5
│ ├── glob@7.1.2 deduped
│ ├── growl@1.10.3
│ ├── he@1.1.1
│ ├── minimatch@3.0.4
│ ├── mkdirp@0.5.1
│ └── supports-color@4.4.0
├─┬ nsp@3.2.1
│ ├── chalk@2.4.0
│ ├── cli-table2@0.2.0
│ ├── cvss@1.0.2
│ ├── https-proxy-agent@2.2.1
│ ├── inquirer@3.3.0
│ ├── nodesecurity-npm-utils@6.0.0
│ ├── semver@5.5.0 deduped
│ ├── wreck@12.5.1
│ └── yargs@9.0.1
├─┬ pre-git@3.17.1
│ ├── bluebird@3.5.1
│ ├── chalk@2.3.2
│ ├── check-more-types@2.24.0 deduped
│ ├── conventional-commit-message@1.1.0
│ ├── cz-conventional-changelog@2.1.0
│ ├── debug@3.1.0 deduped
│ ├── ggit@2.4.2 deduped
│ ├── inquirer@3.3.0
│ ├── lazy-ass@1.6.0 deduped
│ ├── require-relative@0.8.7
│ ├── shelljs@0.8.1
│ ├── simple-commit-message@4.0.3 deduped
│ ├── validate-commit-msg@2.14.0
│ └── word-wrap@1.2.3
├─┬ prettier-standard@8.0.1
│ ├── @sheerun/eslint-config-standard@10.2.1
│ ├── babel-eslint@8.2.3
│ ├── babel-runtime@6.26.0 deduped
│ ├── chalk@2.4.0
│ ├── core-js@2.5.5
│ ├── eslint@4.19.1
│ ├── find-up@2.1.0
│ ├── get-stdin@5.0.1
│ ├── glob@7.1.2 deduped
│ ├── ignore@3.3.7
│ ├── indent-string@3.2.0
│ ├── lodash.memoize@4.1.2
│ ├── loglevel-colored-level-prefix@1.0.0
│ ├── messageformat@1.1.1
│ ├── minimist@1.2.0
│ ├── prettier@1.9.2
│ ├── prettier-eslint@8.8.1
│ ├── regenerator-runtime@0.11.1
│ └── rxjs@5.5.10
├─┬ semantic-release@15.1.7
│ ├── @semantic-release/commit-analyzer@5.0.3
│ ├── @semantic-release/error@2.2.0
│ ├── @semantic-release/github@4.2.11
│ ├── @semantic-release/npm@3.2.4
│ ├── @semantic-release/release-notes-generator@6.0.10
│ ├── aggregate-error@1.0.0
│ ├── chalk@2.4.0
│ ├── cosmiconfig@4.0.0
│ ├── debug@3.1.0 deduped
│ ├── env-ci@1.7.1
│ ├── execa@0.10.0
│ ├── get-stream@3.0.0
│ ├── git-log-parser@1.2.0
│ ├── git-url-parse@9.0.0
│ ├── hook-std@0.4.0
│ ├── hosted-git-info@2.6.0
│ ├── lodash@4.17.5 deduped
│ ├── marked@0.3.19
│ ├── marked-terminal@2.0.0
│ ├── p-locate@2.0.0
│ ├── p-reduce@1.0.0
│ ├── read-pkg-up@3.0.0
│ ├── resolve-from@4.0.0
│ ├── semver@5.5.0 deduped
│ └── yargs@11.0.0
├─┬ simple-commit-message@4.0.3
│ ├── am-i-a-dependency@1.1.2 deduped
│ ├── check-more-types@2.24.0 deduped
│ ├── debug@3.1.0 deduped
│ ├── ggit@2.4.2 deduped
│ ├── hr@0.1.3
│ ├── inquirer@0.12.0
│ ├── inquirer-confirm@0.2.2
│ ├── largest-semantic-change@1.1.0
│ ├── lazy-ass@1.6.0 deduped
│ ├── semver@5.5.0 deduped
│ └── word-wrap@1.2.3 deduped
├─┬ standard@11.0.1
│ ├── eslint@4.18.2
│ ├── eslint-config-standard@11.0.0
│ ├── eslint-config-standard-jsx@5.0.0
│ ├── eslint-plugin-import@2.9.0
│ ├── eslint-plugin-node@6.0.1
│ ├── eslint-plugin-promise@3.7.0
│ ├── eslint-plugin-react@7.7.0
│ ├── eslint-plugin-standard@3.0.1
│ └── standard-engine@8.0.1
├── vue@2.5.16
├─┬ vue-loader@14.2.2
│ ├── consolidate@0.14.5
│ ├── hash-sum@1.0.2
│ ├── loader-utils@1.1.0 deduped
│ ├── lru-cache@4.1.2
│ ├── postcss@6.0.21
│ ├── postcss-load-config@1.2.0
│ ├── postcss-selector-parser@2.2.3
│ ├── prettier@1.9.2 deduped
│ ├── resolve@1.7.1 deduped
│ ├── source-map@0.6.1
│ ├── vue-hot-reload-api@2.3.0
│ ├── vue-style-loader@4.1.0
│ └── vue-template-es2015-compiler@1.6.0
├── vue-router@3.0.1
├─┬ vue-template-compiler@2.5.16
│ ├── de-indent@1.0.2
│ └── he@1.1.1 deduped
└── vuex@3.0.1

Is this a problem you can recreate in this repo? Even after removing node_modules and reinstalling?

[CodingItWrong]

Yes, I just retried and was able to reproduce it. Just to double-check, did you check out commit ffd2d0b first, as the test repo readme described?

Here are the steps that can reproduce a failure for me:

# git co ffd2d0b
# rm -fr node_modules/
# yarn install
# yarn cypress

If that's working on your end, then it's probably something else unique to my end, so we don't need to worry about it since I have a workaround.

[bahmutov]

Ok, I can recreate your problem, and it seems this is due to webpack 3.x in your project. The cypress preprocessor 2.x already assumes webpack 4.x, https://github.com/cypress-io/cypress-webpack-preprocessor#compatibility

I should detect or warn better in this case!

[CodingItWrong]

Cool—I think detecting or warning would be good, especially because both Vue-CLI Webpack templates are still using Webpack 3:

• https://github.com/vuejs-templates/webpack/blob/develop/template/package.json#L117
• https://github.com/vuejs-templates/webpack-simple/blob/master/template/package.json#L34

Thanks for your help!

[bahmutov]

Agree, a pull request to update would be huge

[bahmutov]

🎉 This issue has been resolved in version 1.10.5 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀