导出“渲染”（导入为“渲染”）未找到错误

Question

`当我使用 typeScript 和 webpack 构建 vue 项目时，“未找到导出‘渲染’（导入为‘渲染’）错误”困扰着我。这是完整的错误代码。

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"
  }
}

请帮助我

我在网上搜索解决这个问题，但找不到合适的答案。`

Answer 1

我有同样的错误消息。

从我的 webpack.config.js 中删除“tsx”规则解决了问题：

 {
        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',
      },