Getting this error: At least one <template> or <script> is required in a single file component.

After installing the vue/compat package and vue/compiler-sfc, (all necessary changes to just start fixing the compilation errors on mode 2), I am getting one compilation error from vue-loader.

Module Error (from ./node_modules/vue-loader/dist/index.js): At least one <template> or <script> is required in a single file component.

Even though all my components are structured the same way and correctly, and all worked in vue 2 before trying the migration method to migrate to Vue 3.

What would be the cause of this issue and how can I fix this error?

For reference, this is the current state of my vue.config.js file:

/* eslint-disable global-require */
// eslint-disable-next-line @typescript-eslint/no-var-requires
const webpack = require('webpack');

module.exports = {
  configureWebpack: (config) => {
    const defaultConfig = {
      plugins: [
        new webpack.IgnorePlugin({
          resourceRegExp: /^\.\/locale$/,
          contextRegExp: /moment$/,
        }),
      ],
      resolve: {
        alias: {
          vue: '@vue/compat',
        },
      },
      module: {
        rules: [
          {
            test: /\.vue$/,
            loader: 'vue-loader',
            options: {
              compilerOptions: {
                compatConfig: {
                  MODE: 2,
                },
              },
            },
          },
          {
            test: /\.js$/,
            exclude: /node_modules[\\/](?!(overlayscrollbars-vue)[\\/]).*/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: [
                    '@babel/preset-env',
                  ],
                  plugins: [
                    '@babel/plugin-syntax-dynamic-import',

                  ],
                },
              },
            ],
          },
        ],
      },
    };
    // eslint-disable-next-line no-param-reassign
    config = { ...defaultConfig };
    return config;
  },
  css: {
    loaderOptions: {
      sass: {
        // options here will be passed to sass-loader
        additionalData: `
          @use '@/styles/helpers' as *;
        `,
        implementation: require('sass'),
      },
    },
  },
};

Thank you.

vuejs / vue-loader

Getting this error: At least one <template> or <script> is required in a single file component. #2036