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

[z-zeechung]

在next项目中通过如下方式导入了veaury：

/*next.config.mjs*/
import webpack from "webpack";
import { createRequire } from 'module';

export default nextConfig;

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
      const require = createRequire(import.meta.url);

      config.module.rules = [{
        test: /\.vue$/,
        use: ['vue-loader']
      }].concat(config.module.rules)

      config.plugins.push(new (require('veaury/webpack/VeauryVuePlugin')))
      ...
      return config;
  }
  ...
}

创建如下vue文件：

// test.vue
<template>

</template>

<script>

</script>

编译时报错：

 ⨯ ./app/test.vue
At least one <template> or <script> is required in a single file component.

恳请大佬指导应如何配置

[devilwjp]

@z-zeechung 错误提示的很清楚啦，template或者script内部不能空啊

[z-zeechung]

没用，随便往里写了点啥，报一样的错

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

[devilwjp]

@z-zeechung 你提供一个示例项目给我

[z-zeechung]

https://github.com/z-zeechung/demo

[z-zeechung]

不是veaury的问题。是我未正确配置vue-loader，目前已解决。为nextjs项目配置vue-loader时，各组件的版本十分关键，在此提供一份可用的配置，以俟参阅。配置适用于webpack5与vue2 package.json：

{
...
"dependencies": {
    "vue-loader": "^15.11.1",
    "vue-template-compiler": "^2.7.16",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^5.0.4",
    "webpack-merge": "^4.1.2",
   ...
}
"devDependencies":{
    "webpack": "^5.93.0",
    ...
}
}

next.config.js：

export const nextConfig = {
webpack(config) {
// vue-loader应置于config.module.rules最前面
    config.module.rules = [{
      test: /\.vue$/,
      loader: 'vue-loader'
    }].concat(config.module.rules)
const { VueLoaderPlugin } = require('vue-loader')

    config.plugins.push(new VueLoaderPlugin())
...
}
}

假如是next.config.mjs，可通过如下方式使用require函数：

import { createRequire } from 'module';
const require = createRequire(import.meta.url);

vue-loader15是最后一个支持vue2的版本，存在一个bug。修复方式如下：

• 打开vue-loader/lib/plugin-webpack5.js
• 将常量const ruleSetCompile更改为如下内容：

  const ruleSetCompiler = new RuleSetCompiler([
  new BasicMatcherRulePlugin('test', 'resource'),
  new BasicMatcherRulePlugin('mimetype'),
  new BasicMatcherRulePlugin('dependency'),
  new BasicMatcherRulePlugin('include', 'resource'),
  new BasicMatcherRulePlugin('exclude', 'resource', true),
  new BasicMatcherRulePlugin('conditions'),
  new BasicMatcherRulePlugin('resource'),
  new BasicMatcherRulePlugin('resourceQuery'),
  new BasicMatcherRulePlugin('resourceFragment'),
  new BasicMatcherRulePlugin('realResource'),
  new BasicMatcherRulePlugin('issuer'),
  new BasicMatcherRulePlugin('compiler'),
  new BasicMatcherRulePlugin("issuerLayer"),    // 新增
  ...objectMatcherRulePlugins,
  new BasicEffectRulePlugin('type'),
  new BasicEffectRulePlugin('sideEffects'),
  new BasicEffectRulePlugin('parser'),
  new BasicEffectRulePlugin('resolve'),
  new BasicEffectRulePlugin('generator'),
  new BasicEffectRulePlugin("layer"),    // 新增
  new UseEffectRulePlugin()
  ])

[devilwjp]

@z-zeechung

1. veaury不支持vue2，不能配置vue2的vue-loader
2. 不需要自行配置vue-loader，veaury的webpack plugin会自动配置
3. 之所以不能运行是因为veaury的webpack plugin对于nextjs的webpack配置不兼容，属于一个bug
4. 即便vue-loader配置正确，veaury仍然不能在nextjs中正常运行，也属于一个bug

关于SSR的使用问题，将在收费版本中得到解决