typescript - ไม่พบการส่งออก 'render' (นำเข้าเป็น 'render')

'เมื่อฉันสร้างโครงการ vue ด้วย typeScript และ webpack, "ส่งออก 'render' (นําเข้าเป็น '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

ฉันได้รับข้อความแสดงข้อผิดพลาดเดียวกัน

การลบกฎ "tsx" ออกจาก webpack.config.js ของฉันทำให้ปัญหาถูกแก้ไข:

 {
        test: /\.ts$/,
        loader: 'ts-loader',
        options: {
          appendTsSuffixTo: [/\.vue$/],
        },
        exclude: /node_modules/,
      },
/** this part triggered error
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
**/
          {
        test: /\.vue$/,
        loader: 'vue-loader',
      },

คำตอบ #2

ฉันกำลังเผชิญกับปัญหาเดียวกัน ฉันได้แก้ไขมันโดยการเพิ่มตัวเลือก transpileOnly ในไฟล์ webpack.config.js แบบนี้:

{
    test: /\.ts$/,
    exclude: /node_modules/,
    loader: "ts-loader",
    options: {
        appendTsSuffixTo: [/\.vue$/],
        transpileOnly: true,
    },
},

นอกจากนี้ นี่คือแพ็กเกจ npm ที่ฉันกำลังใช้:

• "vue": "^3.5.12",
• "vue-facing-decorator": "^3.0.4",
• "vuex": "^4.1.0"
• "@vue/compiler-sfc": "^3.5.13",
• "ts-loader": "^8.4.0",
• "typescript": "^4.9.5",
• "webpack": "^5.98.0",
• "webpack-cli": "^5.1.4",
• "webpack-dev-server": "^5.2.0",

สำหรับข้อมูลเพิ่มเติม:

• ประสิทธิภาพการสร้าง Webpack - ตัวโหลด TypeScript
• ตัวโหลด TypeScript สำหรับ webpack - transpileOnly