p is not iterable

[topmaxz]

看起来似乎和 #17 #14 是类似的

package.json

"dependencies": {
    "axios": "^0.27.2",
    "core-js": "^3.24.1",
    "echarts": "^5.3.3",
    "face-api.js": "^0.22.2",
    "gsap": "^3.10.4",
    "html2canvas": "^1.4.1",
    "jsencrypt": "^3.2.1",
    "jsonp": "^0.2.1",
    "lodash": "^4.17.21",
    "moment": "2.29.4",
    "natives": "^1.1.6",
    "normalize.css": "8.0.1",
    "qiniu-js": "^3.4.1",
    "screenfull": "^6.0.2",
    "v-click-outside-x": "^3.7.1",
    "videojs-contrib-hls": "^5.15.0",
    "view-design": "^4.7.0",
    "vite-plugin-require": "^1.0.5",
    "vue": "^2.7.10",
    "vue-awesome-swiper": "^3.1.3",
    "vue-clipboard2": "^0.3.3",
    "vue-grid-layout": "^2.4.0",
    "vue-localstorage": "^0.6.2",
    "vue-router": "^3.6.5",
    "vue-typed-mixins": "^0.2.0",
    "vue-upload-component": "^2.8.22",
    "vue-video-player": "^5.0.2",
    "vuedraggable": "^2.24.3",
    "vuelidate": "^0.7.7",
    "vuex": "^3.6.2",
    "webrtc-adapter": "^8.1.1",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@originjs/vite-plugin-commonjs": "^1.0.3",
    "@typescript-eslint/eslint-plugin": "^5.37.0",
    "@typescript-eslint/parser": "^5.37.0",
    "@vitejs/plugin-vue2": "^2.0.0",
    "@vue/cli-service": "~5.0.8",
    "@vue/eslint-config-standard": "^8.0.1",
    "@vue/eslint-config-typescript": "^11.0.0",
    "@vue/runtime-dom": "latest",
    "eslint": "^8.23.1",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^6.0.1",
    "eslint-plugin-vue": "^9.4.0",
    "postcss": "^8.4.16",
    "typescript": "^4.8.3",
    "vite": "^3.1.1"
  }

vite.config.js

import { defineConfig } from 'vite'
import path from 'path'
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
import vue from '@vitejs/plugin-vue2'
import vitePluginRequire from 'vite-plugin-require'

// https://vitejs.dev/config/
export default defineConfig({
  define: {
    'process.env': process.env,
  },
  resolve: {
    alias: [
      {
        find: /^~assets/,
        replacement: path.resolve(__dirname, 'src/assets'),
      },
      {
        find: '@',
        replacement: path.resolve(__dirname, 'src'),
      },
      {
        find: 'root',
        replacement: path.resolve(__dirname, 'src'),
      },
      {
        find: 'common',
        replacement: path.resolve(__dirname, 'src/common'),
      },
      {
        find: 'assets',
        replacement: path.resolve(__dirname, 'src/assets'),
      },
      {
        find: 'static',
        replacement: path.resolve(__dirname, 'public/static'),
      },
      {
        find: 'vue$',
        replacement: path.resolve(__dirname, 'vue/dist/vue.js'),
      },
    ],
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
  },
  plugins: [vue(), viteCommonjs(), vitePluginRequire()],
  base: '/',
  server: {
    strictPort: false,
    port: 8080,
    proxy: {
      '/swagger': {
        target: 'http://192.168.3.116:10702/@api',
        ws: true,
        changeOrigin: true,
      },
      '/home': {
        target: 'http://192.168.3.116:10702',
        ws: true,
        changeOrigin: true,
      },
      '/api-zd-web': {
        target: 'http://192.168.3.116:10702',
        ws: true,
        changeOrigin: true,
      },
    },
  },
  build: {},
})

在.vue中使用require('a' + b + '.svg')等按需加载

静态资源都在src/assets下，其他模块或组件在类似src/UserHome/Index.vue路径下

请问有解决方法吗？谢谢！

[wangzongming]

提供一个最小复现案例我看一下。

[topmaxz]

有点麻烦，我已经把所有字符串模版改为字符拼接的形式了，还是出这个错误，期间还有不支持的: BinaryExpression 组成类型 MemberExpression这个错误

[wangzongming]

提供一个复现案例，我本地不报这个错误，我不知道你是怎么写的导致这个错误。

[Agendum]

@wangzongming I am not sure why you cannot repro this, but it is consistent. The issue starts with this vite-plugin-require code here:

newCode = code;
if (fileRegex.test(id)) {
    plugins = /(.vue)$/.test(id) ? [require("vue-loader")] : ["jsx"];
    ast_1 = parser.parse(code, {
        sourceType: "module",
        plugins: plugins

The root of the problem is [require("vue-loader")] is returning [null]. Then when this gets passed deep into babel:

function hasPlugin(plugins, expectedConfig) {
  const [expectedName, expectedOptions] = typeof expectedConfig === "string" ? [expectedConfig, {}] : expectedConfig;
  const expectedKeys = Object.keys(expectedOptions);
  const expectedOptionsIsEmpty = expectedKeys.length === 0;
  return plugins.some(p => {
    if (typeof p === "string") {
      return expectedOptionsIsEmpty && p === expectedName;
    } else {
      const [pluginName, pluginOptions] = p; // BOOM
      if (pluginName !== expectedName) {
        return false;
      }

See the "BOOM" line. You can produce the JavaScript error as such:

const p = null;
const [pluginName, pluginOptions] = p;

The question is why is require("vue-loader") returns null for so many people, especially when there is a package dependency on it.

[kissmoment]

怎么解决的

[wangzongming]

怎么解决的

不清楚怎么能复现这个问题。你可以尝试给复现一个最小案例。

[eleven-net-cn]

似乎这是一个必现的问题，项目中有 .vue 文件，即使我没有使用 require 语法，也一样会报此错误，@Agendum 提供的信息比较有价值，建议从他提供的代码位置往下看看

[eleven-net-cn]

Here it is: https://github.com/eleven-net-cn/vite-require-plugin-error

[wangzongming]

@eleven-net-cn 感谢你提供的案例，我已经知道到为什么会提示这个错误了。因为有的 @babel/parser 版本只支持传入的 plugins 配置为二维数组形式。我这就修复。

[wangzongming]

@eleven-net-cn @Agendum @kissmoment @topmaxz The issue has been fixed. Please update to 1.0.10