Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
5 tasks done
twt898xu opened this issue Apr 12, 2024 · 9 comments · Fixed by #356
Closed
5 tasks done

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

twt898xu opened this issue Apr 12, 2024 · 9 comments · Fixed by #356

Comments

@twt898xu
Copy link
Contributor

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

  • Follow our Code of Conduct
  • Read the Contributing Guide.
  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
  • The provided reproduction is a minimal reproducible of the bug.
Copy link

stackblitz bot commented Apr 12, 2024

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

@wjw020206
Copy link

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

@twt898xu
Copy link
Contributor Author

@wjw020206 you can downgrade to v0.17.0

@wjw020206
Copy link

@wjw020206 you can downgrade to v0.17.0

alright, thank you very much

@wjw020206
Copy link

wjw020206 commented Apr 18, 2024

@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
Copy link
Contributor Author

you can remove the default() and try again

@wjw020206
Copy link

wjw020206 commented Apr 19, 2024

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
Copy link
Contributor Author

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
Copy link

wjw020206 commented Apr 19, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants