vue-meteor
vue-meteor copied to clipboard
Meteor.js 1.9.2 [vue-component] Error while compiling in tag <style> using lang scss TemplatingTools is not defined
I don't use scss, but I got the following error when run the project with Meteor.js 1.9.2. It worked fine with Meteor 1.9.
[vue-component] Error while compiling in tag <style> using lang scss: Can't find handler for lang 'scss', did you install it?
[vue-component] Error while compiling in tag <style> using lang scss TemplatingTools is not defined
ReferenceError: TemplatingTools is not defined
at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:256:15)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
at packages/vue-component/plugin/vue-compiler.js:57:34
at /Users/sven/.meteor/packages/akryum_vue-component/.0.15.2.7g3qva.ld59w++os+web.browser+web.browser.legacy+web.cordova/plugin.vue-component.os/npm/node_modules/meteor/vue-component/node_modules/async/dist/async.js:3110:16
at replenish (/Users/sven/.meteor/packages/akryum_vue-component/.0.15.2.7g3qva.ld59w++os+web.browser+web.browser.legacy+web.cordova/plugin.vue-component.os/npm/node_modules/meteor/vue-component/node_modules/async/dist/async.js:1011:17)
at /Users/sven/.meteor/packages/akryum_vue-component/.0.15.2.7g3qva.ld59w++os+web.browser+web.browser.legacy+web.cordova/plugin.vue-component.os/npm/node_modules/meteor/vue-component/node_modules/async/dist/async.js:1016:9
at Object.eachLimit$1 (/Users/sven/.meteor/packages/akryum_vue-component/.0.15.2.7g3qva.ld59w++os+web.browser+web.browser.legacy+web.cordova/plugin.vue-component.os/npm/node_modules/meteor/vue-component/node_modules/async/dist/async.js:3196:24)
at VueCompo.processFilesForTarget (packages/vue-component/plugin/vue-compiler.js:41:11)
at __bottom_mark__ (/tools/utils/parse-stack.js:69:14)
at /tools/isobuild/compiler-plugin.js:210:27
at Object.enterJob (/tools/utils/buildmessage.js:388:12)
at /tools/isobuild/compiler-plugin.js:197:22
at Function.time (/Users/sven/.meteor/packages/meteor-tool/.1.9.2.109vys5.g4p2++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/tool-env/tools/tool-env/profile.ts:284:12)
at /tools/isobuild/compiler-plugin.js:196:15
at Function._.each._.forEach (/Users/sven/.meteor/packages/meteor-tool/.1.9.2.109vys5.g4p2++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/underscore/underscore.js:191:9)
at CompilerPluginProcessor.runCompilerPlugins (/tools/isobuild/compiler-plugin.js:186:7)
at ClientTarget._runCompilerPlugins (/tools/isobuild/bundler.js:1125:22)
at /tools/isobuild/bundler.js:850:34
at Object.enterJob (/tools/utils/buildmessage.js:388:12)
at ClientTarget.make (/tools/isobuild/bundler.js:844:18)
at /tools/isobuild/bundler.js:3183:14
at /tools/isobuild/bundler.js:3334:25
at Array.forEach (<anonymous>)
at /tools/isobuild/bundler.js:3288:14
at Object.capture (/tools/utils/buildmessage.js:283:5)
at bundle (/tools/isobuild/bundler.js:3164:31)
at /tools/isobuild/bundler.js:3109:32
at Slot.withValue (/Users/sven/.meteor/packages/meteor-tool/.1.9.2.109vys5.g4p2++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/dev_bundle/lib/node_modules/@wry/context/lib/context.js:73:29)
at Object.withCache (/Users/sven/.meteor/packages/meteor-tool/.1.9.2.109vys5.g4p2++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/fs/tools/fs/files.ts:1650:39)
at Object.bundle (/tools/isobuild/bundler.js:3109:16)
at /tools/runners/run-app.js:572:24
at Function.run (/Users/sven/.meteor/packages/meteor-tool/.1.9.2.109vys5.g4p2++os.osx.x86_64+web.browser+web.browser.legacy+web.cordova/mt-os.osx.x86_64/tools/tool-env/tools/tool-env/profile.ts:289:14)
at bundleApp (/tools/runners/run-app.js:571:34)
at AppRunner._runOnce (/tools/runners/run-app.js:613:35)
at AppRunner._fiber (/tools/runners/run-app.js:919:28)
at /tools/runners/run-app.js:401:12
I get this error even if I do not use sass
@SvenWangChina @shailee-m solution for SASS/SCSS:
meteor add akryum:vue-sass
If you are using LESS in project:
meteor add akryum:vue-less
Same for Stylus:
meteor add akryum:vue-stylus
@mrauhu Thanks for the update. I already tried it but it doesn't build vue-sass as well.
@shailee-m maybe you need to separate SCSS and Vue.
Because, I don't use the <style lang="scss"></style>
tag inside Vue components, and all works like a charm.
Example directory structure of Meteor project
client/
main.js // import '/imports/startup/client';
main.scss // @import "../imports/ui/styles/index";
main.html // <head><!-- meta tags --></head><body><div id="app></div></body>
Necessary Meteor packages
akryum:vue-component
akryum:vue-sass
fourseven:scss
I got the same error ReferenceError: TemplatingTools is not defined
when I changed
<script>
to
<script lang="ts">
in a .vue file.
Changing it back made the error disappear.
Looks like I won't be able to convert to Typescript until this is sorted.
at /tools/runners/run-app.js:401:12
[vue-component] Error while compiling in tag <script> using lang ts: Can't find handler for lang 'ts', did you install it?
vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined
ReferenceError: TemplatingTools is not defined
at throwCompileError (packages/vue-component/plugin/utils.js:200:15)
at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:81:13)
at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18)
at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12)
at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12)
at packages/vue-component/plugin/vue-compiler.js:57:34
I would recommend becoming a sponsor of @Akryum so he can focus more time on Meteor + Vue work. He has a lot of projects to support, so your support for Meteor + Vue can help ❤️I'm a sponsor and when I had an issue a couple versions ago, I got to chat with @Akryum and he made some updates to fix a bug. This SCSS issue doesn't impact my projects. If you can find other people with this issue, you could team up with them as sponsors and that would give this issue more visibility. Also if you can track down the cause of the issue in the code and submit a PR, that would be helpful as well. Just click the Sponsor button in Github for more info, or here is a direct link if you've never sponsored before: https://github.com/sponsors/Akryum
@mullojo Thanks for the post, and I get that Guillaume needs sponsors for vue-meteor, I realise he's got a ton on his hands. But just the very minimal involvement would have been nice. I offered to do a PR some time ago and laid out all the reasons, but never got a reply. The same for a couple of bugs, which I gave up on and closed, because nobody ever appeared. However this is not actually a rant, I'm just pointing out that minimal involvement from somebody would surely pay dividends. Right now I'm not in a position to sponsor anyone, as I really don't know if I'll be in a job soon, but I feel sure more people would get involved in helping if there was minimal encouragement from the powers that be.
SOLVED MY PROBLEM ABOVE
I got the same error
ReferenceError: TemplatingTools is not defined
when I changed<script>
to<script lang="ts">
in a .vue file.Changing it back made the error disappear.
Looks like I won't be able to convert to Typescript until this is sorted.
at /tools/runners/run-app.js:401:12 [vue-component] Error while compiling in tag <script> using lang ts: Can't find handler for lang 'ts', did you install it? vue-component] Error while compiling in tag <script> using lang ts TemplatingTools is not defined ReferenceError: TemplatingTools is not defined at throwCompileError (packages/vue-component/plugin/utils.js:200:15) at VueComponentTagHandler.getResults (packages/vue-component/plugin/tag-handler.js:81:13) at compileTags (packages/vue-component/plugin/vue-compiler.js:532:18) at compileOneFileWithContents (packages/vue-component/plugin/vue-compiler.js:541:12) at VueCompo.compileOneFile (packages/vue-component/plugin/vue-compiler.js:140:12) at packages/vue-component/plugin/vue-compiler.js:57:34
SOLUTION was that maybe I should have RTFM.
If you go to the Language packages paragraph of the vue-component package page on Atmosphere there are several supporting language packages both for <script>
and for <style>
One of these is a typescript package by Nathan Reid.
After installing it I had to simplify my tsconfig.json a bit as it appears the package is slightly out of date (no actual harm in that), but it solved the problem using <script lang="ts">
Any updates on this? vue-stylus does not work right now.
EDIT: It works, but I'm having troubles importing stylus files to .vue files.
I don't know anything about vue-stylus, but did you install the akryum:vue-stylus package?
@sangyoo91 the Stylus was unmaintained a long time, my opinion is use the SASS (SCSS).
I got the same error like the title says except that it's complaining about 'less'.
[vue-component] Error while compiling in tag <style> using lang less: Can't find handler for lang 'less', did you install it?
[vue-component] Error while compiling in tag <style> using lang less TemplatingTools is not defined
Does somebody have an idea? The weird thing is that I don't even use 'less' in my style tags. I use them like this:
<style scoped></style>
@devrobinkroeker probably it's in your node_modules/
.
You can create the .vueignore
file with content:
node_modules
See: https://github.com/meteor-vue/vue-meteor/blob/00ba505ad9aa5a8d53b30d4570ae83b0ca393936/packages/vue-component/README.md#ignore-files
@mrauhu Thank you very much! I had to add the .vueignore file and change the version of Vue to [email protected]
.
In my case "packages/vue-component/plugin/utils.js:200:15: TemplatingTools is not defined
"
did appear when I was doing stupid typo mistake like:
data() {
return {
counter:0,
links = [,,,] // should be links: [,,,,]
}
}
How "TemplatingTools" is related to my coding error! took me a-while to catch that...
meteor add akryum:vue-sass
no longer seems to work. I've created a question here with more info.
https://stackoverflow.com/questions/70507131/installing-dart-sass-node-sass-into-a-meteor-vue-project
@mrauhu thanks! I had the same issue and this worked perfectly for me
Had similar issue, spent few hours dealing with it. Finally figured out that I forgot to add .vueignore file with 'node_modules/' inside, as per documentation, because without it, the builder went through source files of packages and when encountered .vue files, tried to compile them.. Thus, requesting me to install scss even though I do not use it.. :-)