Meteor.js 1.9.2 [vue-component] Error while compiling in tag <style> using lang scss TemplatingTools is not defined

Question

Meteor.js 1.9.2 [vue-component] Error while compiling in tag <style> using lang scss TemplatingTools is not defined

SvenWangChina opened this issue 4 years ago · comments

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

Shailee Mehta · Answer 1 · Wed Mar 04 2020 02:29:49 GMT+0800 (China Standard Time)

I get this error even if I do not use sass

mrauhu · Answer 2 · Fri Mar 06 2020 19:44:24 GMT+0800 (China Standard Time)

@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

Shailee Mehta · Answer 3 · Wed Mar 11 2020 18:17:54 GMT+0800 (China Standard Time)

@mrauhu Thanks for the update. I already tried it but it doesn't build vue-sass as well.

mrauhu · Answer 4 · Wed Mar 11 2020 18:34:55 GMT+0800 (China Standard Time)

@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

mwarren2 · Answer 5 · Tue Apr 14 2020 23:45:00 GMT+0800 (China Standard Time)

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

Bob · Answer 6 · Mon Apr 27 2020 05:20:58 GMT+0800 (China Standard Time)

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

mwarren2 · Answer 7 · Mon Apr 27 2020 17:04:12 GMT+0800 (China Standard Time)

@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.

mwarren2 · Answer 8 · Wed May 06 2020 22:04:36 GMT+0800 (China Standard Time)

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">

Sang Yoo Kim · Answer 9 · Thu Aug 27 2020 22:04:20 GMT+0800 (China Standard Time)

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.

mwarren2 · Answer 10 · Thu Aug 27 2020 22:12:10 GMT+0800 (China Standard Time)

I don't know anything about vue-stylus, but did you install the akryum:vue-stylus package?

mrauhu · Answer 11 · Thu Aug 27 2020 22:13:37 GMT+0800 (China Standard Time)

@sangyoo91 the Stylus was unmaintained a long time, my opinion is use the SASS (SCSS).

Deleted user · Answer 12 · Fri Sep 04 2020 19:55:38 GMT+0800 (China Standard Time)

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>

mrauhu · Answer 13 · Fri Sep 04 2020 20:39:22 GMT+0800 (China Standard Time)

@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

Deleted user · Answer 14 · Mon Sep 07 2020 19:26:27 GMT+0800 (China Standard Time)

@mrauhu Thank you very much! I had to add the .vueignore file and change the version of Vue to vue@2.6.12.

dominique klutz · Answer 15 · Mon Nov 08 2021 11:19:47 GMT+0800 (China Standard Time)

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...

Michael · Answer 16 · Tue Dec 28 2021 20:33:06 GMT+0800 (China Standard Time)

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

mariyammamir · Answer 17 · Tue Feb 07 2023 21:47:42 GMT+0800 (China Standard Time)

@mrauhu thanks! I had the same issue and this worked perfectly for me

Victor Blagomir · Answer 18 · Sat Jun 17 2023 08:12:45 GMT+0800 (China Standard Time)

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.. :-)