unplugin / unplugin-icons

🤹 Access thousands of icons as components on-demand universally.
https://www.npmjs.com/package/unplugin-icons
MIT License
3.65k stars 131 forks source link

An issue for vue2(<2.7) compiler with "transpile is not a function" #355

Closed twt898xu closed 2 months ago

twt898xu commented 2 months ago

Describe the bug

when I use the latest version (0.18.5) with my vue2 product, it doesn't work it will throw a "transpile is not a function" error I found a problem in the code

this code on src/core/compilers/vue2.ts file

const transpile = (await importModule('vue-template-es2015-compiler'))
    .default

I think we don't need the .default. because the importModule method has parsed it

Reproduction

https://stackblitz.com/edit/unplugin-unplugin-icons-3xjrzc?file=main.ts

System Info

System:
    OS: macOS 14.4
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 77.65 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 14.21.3 - ~/.nvm/versions/node/v14.21.3/bin/node
    npm: 6.14.18 - ~/.nvm/versions/node/v14.21.3/bin/npm
    bun: 0.8.1 - ~/.bun/bin/bun
  Browsers:
    Chrome: 123.0.6312.123
    Edge: 123.0.2420.81
    Safari: 17.4

Used Package Manager

npm

Validations

stackblitz[bot] commented 2 months ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.

wjw020206 commented 2 months ago

I also encountered this problem. Is there any good solution at this stage?

twt898xu commented 2 months ago

@wjw020206 you can downgrade to v0.17.0

wjw020206 commented 2 months ago

@wjw020206 you can downgrade to v0.17.0

alright, thank you very much

wjw020206 commented 2 months ago

@wjw020206 you can downgrade to v0.17.0

hi. I tried to use v0.17.0 but there were new problems, Prompt error: Typerror: Require (...). Default is not a function

module.exports = function unplugin() {
  return [
    require('unplugin-auto-import/webpack').default({
      imports: ['vue', 'vue-router', 'pinia'],
      eslintrc: {
        enabled: true
      },
      dts: 'src/typings/auto-imports.d.ts'
    }),
    require('unplugin-vue-components/webpack').default({
      dts: 'src/typings/components.d.ts',
      resolvers: [require('unplugin-icons/resolver').default()] // The error appears in this line
    }),
    require('unplugin-icons/webpack').default({
      compiler: 'vue2',
      scale: 1,
      defaultClass: 'inline-block',
      autoInstall: true
    })
  ];
};
twt898xu commented 2 months ago

you can remove the default() and try again

wjw020206 commented 2 months ago

you can remove the default() and try again

I tried it, the problem changed,Prompt error: Typerror: Require (...). Default is not a function

module.exports = function unplugin() {
  return [
    require('unplugin-auto-import/webpack').default({
      imports: ['vue', 'vue-router', 'pinia'],
      eslintrc: {
        enabled: true
      },
      dts: 'src/typings/auto-imports.d.ts'
    }),
    require('unplugin-vue-components/webpack').default({
      dts: 'src/typings/components.d.ts',
      resolvers: [require('unplugin-icons/resolver')]
    }),
    require('unplugin-icons/webpack').default({ // The error appears in this line
      compiler: 'vue2',
      scale: 1,
      defaultClass: 'inline-block',
      autoInstall: true
    })
  ];
};

This is the dependence I used in my current project

{
 "dependencies": {
    "core-js": "^3.36.1",
    "pinia": "^2.1.7",
    "vue": "2.7.16",
    "vue-router": "3.6.5"
  },
  "devDependencies": {
    "@babel/core": "^7.24.4",
    "@babel/eslint-parser": "^7.24.1",
    "@iconify-json/ep": "^1.1.15",
    "@vue/cli-plugin-babel": "5.0.8",
    "@vue/cli-plugin-eslint": "5.0.8",
    "@vue/cli-plugin-router": "5.0.8",
    "@vue/cli-service": "5.0.8",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.24.1",
    "husky": "^9.0.11",
    "lint-staged": "^15.2.2",
    "prettier": "^3.2.5",
    "sass": "^1.74.1",
    "sass-loader": "^14.1.1",
    "unplugin-auto-import": "^0.17.5",
    "unplugin-icons": "^0.17.0",
    "unplugin-vue-components": "^0.26.0",
    "vue-cli-plugin-pinia": "~0.2.4",
    "vue-template-compiler": "^2.7.16"
  }
}
twt898xu commented 2 months ago

same as above, you don't need the default()

like

module.exports = function unplugin() {
  return [
    require('unplugin-auto-import/webpack').default({
      imports: ['vue', 'vue-router', 'pinia'],
      eslintrc: {
        enabled: true
      },
      dts: 'src/typings/auto-imports.d.ts'
    }),
    require('unplugin-vue-components/webpack').default({
      dts: 'src/typings/components.d.ts',
      resolvers: [require('unplugin-icons/resolver')()]
    }),
    require('unplugin-icons/webpack')({ // The error appears in this line
      compiler: 'vue2',
      scale: 1,
      defaultClass: 'inline-block',
      autoInstall: true
    })
  ];
};
wjw020206 commented 2 months ago

same as above, you don't need the default()

like

module.exports = function unplugin() {
  return [
    require('unplugin-auto-import/webpack').default({
      imports: ['vue', 'vue-router', 'pinia'],
      eslintrc: {
        enabled: true
      },
      dts: 'src/typings/auto-imports.d.ts'
    }),
    require('unplugin-vue-components/webpack').default({
      dts: 'src/typings/components.d.ts',
      resolvers: [require('unplugin-icons/resolver')()]
    }),
    require('unplugin-icons/webpack')({ // The error appears in this line
      compiler: 'vue2',
      scale: 1,
      defaultClass: 'inline-block',
      autoInstall: true
    })
  ];
};

Thank you very much, the problem is solved.