Vue is undefined with vue2 #28361

dante01yoon · 2023-11-19T08:00:07Z

dante01yoon
Nov 19, 2023

Greetings.

I get exception errors with Vue2 + webpack.

I have multiple entry points in my webpack.config.js,

And this is how my config.js look like

module.exports = function (env = {}, { outputPath } = {}) {
  return {
    entry: {
      ...entries,
    },
    mode: 'development',
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
        },
        {
          test: /\.ts$/,
          loader: 'ts-loader',
          options: {
            appendTsSuffixTo: [/\.vue$/],
          },
        },
        {
          test: /\.css$/,
          use: ['vue-style-loader', 'css-loader'],
        },
        {
          test: /.less$/,
          use: ['vue-style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
        },
        {
          test: /\.s[ac]ss$/,
          use: ['style-loader', 'css-loader', 'sass-loader'],
        },
        {
          test: /\.html$/,
          use: 'raw-loader',
          include: [withModuleDir('assets')],
        },
        {
          test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
          type: 'asset',
          parser: {
            dataUrlCondition: {
              maxSize: 10 * 1024,
            },
          },
          generator: {
            filename: 'images/[base]',
          },
        },
        {
          test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
          type: 'asset',
          generator: {
            filename: 'files/[base]',
          },
        },
      ],
    },
    plugins: [
      new VueLoaderPlugin(),
      new ProvidePlugin({
        process: 'process/browser',
      }),
    ],
    output:  {
          path: "./custom/output/dist"
          filename: '[name].js',
          chunkFilename: 'module.[name].js',
          clean: true,
    },
  };
};

and this is how my cypress.config.ts looks like

import { defineConfig } from "cypress";
import * as webpackConfig from "./webpack/webpack.app.config";

export default defineConfig({
  retries: {
    runMode: 2,
  },
  env: {
    apiUrl: "http://localhost:3001",
    mobileViewportWidthBreakpoint: 414,
    coverage: false,
    codeCoverage: {
      url: "http://localhost:3001/__coverage__",
      exclude: "cypress/**/*.*",
    },
    defaultPassword: process.env.SEED_DEFAULT_USER_PASSWORD,
  },

  component: {
    specPattern: "src/components/**/*.cy.{js,jsx,ts,tsx}",
    supportFile: "cypress/support/component.ts",
    devServer: {
      framework: "vue",
      bundler: "webpack",
      webpackConfig
    }
  },
});

I don't think commands.js, component.js would cause this problem, however, it looks like below

// commands.js
Cypress.Commands.add('getByTestId', (selector, ...args) => {
  return cy.get(`[data-testid=${selector}]`, ...args)
})

Cypress.Commands.add('getByTestIdLike', (selector, ...args) => {
  return cy.get(`[data-test*=${selector}]`, ...args)
})

// component.js
import "./commands";
import { mount } from 'cypress/vue2'

declare global {
  namespace Cypress {
    interface Chainable {
      mount: typeof mount
    }
  }
}

Cypress.Commands.add('mount', mount);

To resolve this issue, I had to add cdn to load Vue manually in my component-index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Components App</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  </head>
  <body>
    <div 
      data-cy-root
    ></div>
  </body>
</html>

How can I deal with problem without install Vue manually?

BTW, this is how my test code looks like.

import InputButton from './input-button.vue'

describe('<InputButton />', () => {
  it('renders', () => {
    cy.mount(InputButton)
  })
})

"vue": "^2.7.14",
"@cypress/webpack-dev-server": "^3.7.0",
"cypress": "^13.5.1",
"webpack": "^5.88.2",
"webpack-cli": "^5.1.4"

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Vue is undefined with vue2 #28361

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Vue is undefined with vue2 #28361

Uh oh!

Uh oh!

dante01yoon Nov 19, 2023

Replies: 0 comments

dante01yoon
Nov 19, 2023