Vue3+TypeScript+Webpack构建报错：export 'render'未找到求助

完整错误信息 #

export 'render' (imported as 'render') was not found in './Menu.vue?vue&type=template&id=55cdf198&ts=true' (possible exports: __esModule)
 @ ./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/dist/index.js??ruleSet[1].rules[8].use[0]!./client/views/pages/App.vue?vue&type=script&lang=js 5:0-36 32:10-14
 @ ./client/views/pages/App.vue?vue&type=script&lang=js 1:0-185 1:0-185 1:186-360 1:186-360
 @ ./client/views/pages/App.vue 2:0-54 3:0-49 3:0-49 8:49-55
 @ ./client/views/index.js 8:0-34 9:22-25

webpack.config.js 配置 #

const { VueLoaderPlugin } = require("vue-loader");

const {PROJECT_NAME, BASE_DIR, SERVICE_STATUS} = require('./Global');

module.exports = {
  name: PROJECT_NAME,
  mode: SERVICE_STATUS,
  devtool: 'eval',

  entry: {
    app: [`${BASE_DIR}/client/views/index.js`]
  },

  module: {
    rules: [{
      test: /\.vue?$/,
      loader: 'vue-loader',
    },{
      test: /\.ts$/,
      loader: 'ts-loader'
    },{
      test: /\.(js|jsx)?$/,
      loader: 'babel-loader',
    }, {
      test: /\.css$/,
      use: ['vue-style-loader', 'css-loader']
    }, {
      test: /\.(jpe?g|png|gif|svg|ttf|eot|woff|woff2)$/i,
      use: [{
        loader:'url-loader',
        options:{
          limit:8192,
          fallback:require.resolve('file-loader')
        }
      }]
    }],
  },

  plugins: [new VueLoaderPlugin()],

  output: {
    path: `${BASE_DIR}/client/build`,   // __dirname: webpack.config.js 파일이 위치한 경로
    filename: 'bundle.js'
  },
}

package.json 配置 #

{
  "dependencies": {
    "@babel/cli": "7.19.3",
    "@babel/core": "7.19.3",
    "appstore": "^1.5.0",
    "babel-loader": "8.2.5",
    "connect-history-api-fallback": "^2.0.0",
    "css-loader": "6.7.1",
    "express": "4.18.1",
    "express-http-proxy": "^1.6.3",
    "file-loader": "6.2.0",
    "fs": "0.0.1-security",
    "new-line": "^1.1.1",
    "pg": "8.8.0",
    "ts-loader": "^9.4.2",
    "url-loader": "4.1.1",
    "vue": "3.2.40",
    "vue-loader": "^17.0.0",
    "vue-router": "4.1.5",
    "vue-style-loader": "4.1.3",
    "vue3-sfc-loader": "^0.8.4",
    "webpack": "5.74.0",
    "webpack-cli": "4.10.0"
  },
  "scripts": {
    "prod": "set NODE_ENV=production&&node ./server/modules/web/server.js",
    "dev": "set NODE_ENV=development&&node ./server/modules/web/Server.js",
    "windows-prod": "set NODE_ENV=production&&node ./server/modules/web/server.js",
    "windows-dev": "set NODE_ENV=development&&node ./server/modules/web/server.js",
    "linux-prod": "export NODE_ENV=production&&node ./server/modules/web/server.js",
    "linux-dev": "export NODE_ENV=development&&node ./server/modules/web/server.js",
    "webpack-build": "webpack",
    "webpack-build-watch": "webpack --watch"
  }
}

解决步骤 #

1. 安装Vue模板编译依赖
   Vue3的vue-loader依赖@vue/compiler-sfc编译单文件组件模板，当前依赖缺失，执行安装：

   npm install @vue/compiler-sfc --save-dev
   

2. 修改babel-loader规则，排除Vue模板产物
   避免babel-loader误处理Vue模板编译后的文件，在webpack配置的babel-loader规则中添加exclude：

   {
     test: /\.(js|jsx)?$/,
     loader: 'babel-loader',
     exclude: /node_modules|vue&type=template/ // 新增此行
   }
   

3. 配置TypeScript支持Vue
   在项目根目录创建/修改tsconfig.json，添加Vue类型支持：

   {
     "compilerOptions": {
       "target": "ESNext",
       "module": "ESNext",
       "moduleResolution": "node",
       "strict": true,
       "jsx": "preserve",
       "esModuleInterop": true,
       "skipLibCheck": true,
       "forceConsistentCasingInFileNames": true,
       "types": ["vue"]
     },
     "include": ["client/**/*.ts", "client/**/*.vue"]
   }
   

4. 确保Vue组件使用TypeScript语法
   单文件组件的script标签需声明lang="ts"，并使用Vue3的defineComponent定义组件：

   <script lang="ts">
   import { defineComponent } from 'vue';
   
   export default defineComponent({
     // 组件逻辑
   });
   </script>
   

5. 清理缓存并重新构建
   删除旧依赖和缓存，重新安装后执行构建：

   rm -rf node_modules package-lock.json
   npm install
   npm run webpack-build
   

内容的提问来源于stack exchange，提问作者박준식