iles using a named export from vue/transformer-sfc that does not exist

[jmegs]

• I have read the troubleshooting section before opening an issue.
• I have tried upgrading iles and vite.

Description 📖

iles using a named export from vue/transformer-sfc that does not exist

Dependencies Info

iles v0.9.5 | vite v4.5.1

- iles@0.9.5
- typescript@5.3.3
- vue-tsc@1.8.27

Logs 📜

If not providing a reproduction:

Output

$ DEBUG=iles:* npm run dev

> iles-app@0.0.0 dev
> iles dev --open

file:///Users/jmeguerian/Code/tmp/iles-app/node_modules/iles/dist/node/chunk-IMB7AIW2.js:63
import { shouldTransformRef, transformRef } from "vue/compiler-sfc";
                             ^^^^^^^^^^^^
SyntaxError: The requested module 'vue/compiler-sfc' does not provide an export named 'transformRef'
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:132:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:214:5)
    at async ModuleLoader.import (node:internal/modules/esm/loader:329:24)
    at async executeCommand (file:///Users/jmeguerian/Code/tmp/iles-app/node_modules/iles/dist/node/cli.js:25:30)

Node.js v21.1.0

[ohuu]

I'm seeing the same thing.

[ohuu]

It looks like transformRef was removed in vue 3.4. See line 15 here

My nasty hack of a workaround is to fiddle my package-lock to force vue 3.3.

It seems from this commit (lines 73-78) that shouldTransformRef is hardcoded to return false, suggesting that this functionality is no longer needed and we can remove all references to transformRef in iles?

[ElMassimo]

Thanks for reporting, I'll remove usage of transformRef in the next release.

---

The reactivityTransform proposal has been removed in Vue 3.4, but it's usable through a third-party plugin.

I think the reactivity transform remains a nicer dialect when using script setup, especially once Vue introduced the ability for watch to receive a getter, which addressed some of the DX concerns such as having to use $$().

However, it's better to let the user make that decision on their own (custom Vite plugins can be added easily in iles.config.ts).

[therealshark]

Do you have an ETA? Right now a fresh iles instance is broken right after install. I tried to massage my package lock into working but was less successful than @ohuu

This also fixes #242

[ohuu]

Hey @ElMassimo I'd really like to contribute to Iles, maybe this would be a good issue to tackle but I'd need some onboarding to the project. Is there any docs which would help me to setup a dev environment so I can start working on it?

[ElMassimo]

Hi Oliver! That would be great! 😃

I haven't written an onboarding guide to the project itself, but typically all you need is a modern Node version (20, for example), and pnpm to install dependencies for the entire project.

Building packages can be done by running pnpm run build inside each package, or pnpm run dev to keep a daemon running to rebuild the package as you change the source code.

[peterstnsz]

Hey folks, have the same issue would love to see some workaround examples. Not sure how to approach package-lock to force vue 3.3? Unless there are more elegant solutions...

Ninja edit:
As per Pinegrow/pg-iles-vuetify#1 (comment) Adding this to package.json works, thank you!

"pnpm": {
    "overrides": {
      "vue": "3.3",
      "vite": "4.4"
    }
  }

[dreaquil]

Hi, I seem to have the same issue but pinning vue to 3.3 and vite to 4.4 did not resolve the issue. I'm getting the following:

`file:///frontend/node_modules/iles/dist/node/chunk-IMB7AIW2.js:63
import { shouldTransformRef, transformRef } from "vue/compiler-sfc";
^^^^^^^^^^^^
SyntaxError: The requested module 'vue/compiler-sfc' does not provide an export named 'transformRef'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:171:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:254:5)
at async ModuleLoader.import (node:internal/modules/esm/loader:475:24)
at async executeCommand (file:///frontend/node_modules/iles/dist/node/cli.js:37:23)

Node.js v22.2.0'`

I also tried pinning vue/compiler-sfc to 3.3 but that didn't help.

Here's my package.json:

{
  "name": "proj",
  "version": "0.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/",
    "build:static": "iles build",
    "dev:static": "iles dev"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^6.5.2",
    "@fortawesome/free-solid-svg-icons": "^6.5.2",
    "@fortawesome/vue-fontawesome": "^3.0.8",
    "@stripe/stripe-js": "^4.2.0",
    "@vueuse/core": "^10.11.0",
    "axios": "^1.7.2",
    "culori": "^4.0.1",
    "daisyui": "^4.12.10",
    "echarts": "^5.5.1",
    "iles": "^0.9.5",
    "lodash": "^4.17.21",
    "lodash.debounce": "^4.0.8",
    "marked": "^13.0.3",
    "mixpanel-browser": "^2.55.0",
    "pinia": "^2.1.7",
    "shepherd.js": "^13.0.1",
    "simple-analytics-vue": "^3.0.2",
    "vue": "3.3",
    "vue-currency-input": "^3.1.0",
    "vue-echarts": "^7.0.0-beta.0",
    "vue-router": "^4.3.3",
    "vue-shepherd": "^3.0.0",
    "vue3-google-login": "^2.0.29",
    "webfontloader": "^1.6.28"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.8.0",
    "@types/culori": "^2.1.1",
    "@vitejs/plugin-vue": "4.5.0",
    "@vue/eslint-config-prettier": "^9.0.0",
    "autoprefixer": "^10.4.19",
    "eslint": "^8.57.0",
    "eslint-plugin-vue": "^9.23.0",
    "postcss": "^8.4.38",
    "prettier": "^3.2.5",
    "tailwindcss": "^3.4.4",
    "vite": "4.4",
    "vite-plugin-vue-devtools": "^7.3.1"
  }
}

Any thoughts?

[TechAkayy]

Does pinning by way of using resolutions/overrides in your package.json help? For eg, https://github.com/Pinegrow/pg-iles-vuetify/blob/main/package.json#L68

You might have to delete your node_modules and reinstall.

[dreaquil]

Thanks @TechAkayy! That seems to have partially resolved it. Haven't gotten iles working yet but I suspect it's likely something with my config though.

[TechAkayy]

Do you have an iles.config.ts file. What errors are you facing with regards to configuration.