search

emberjs / ember.js

Ember.js - A JavaScript framework for creating ambitious web applications
https://emberjs.com
MIT License
22.47k stars 4.21k forks source link

TemplateCompiler `cannot read property 'visitor' of undefined` #19724

Open stefanpenner opened 3 years ago

stefanpenner commented 3 years ago

I'm currently diagnosing an issue that cropped up with the recent ember-canary/ember-beta's (todays), it may not be a bug with Ember.js itself, but rather some other part of our default system that is now getting tripped up.

Stack Strace:

TypeError: Cannot read property 'visitor' of undefined
    at preprocess (/private/var/folders/9n/_xy74rdd4m3063fr5kqdl5vc000mw4/T/embroider/cb03bb/packages/router/node_modules/ember-source/vendor/ember/ember-template-compiler.js:12246:42)
    at normalize (/private/var/folders/9n/_xy74rdd4m3063fr5kqdl5vc000mw4/T/embroider/cb03bb/packages/router/node_modules/ember-source/vendor/ember/ember-template-compiler.js:12906:15)
    at precompileJSON (/private/var/folders/9n/_xy74rdd4m3063fr5kqdl5vc000mw4/T/embroider/cb03bb/packages/router/node_modules/ember-source/vendor/ember/ember-template-compiler.js:5402:47)
    at precompile (/private/var/folders/9n/_xy74rdd4m3063fr5kqdl5vc000mw4/T/embroider/cb03bb/packages/router/node_modules/ember-source/vendor/ember/ember-template-compiler.js:5435:31)
    at Object.precompile (/private/var/folders/9n/_xy74rdd4m3063fr5kqdl5vc000mw4/T/embroider/cb03bb/packages/router/node_modules/ember-source/vendor/ember/ember-template-compiler.js:19197:37)
    at NodeTemplateCompiler.precompile (/Users/spenner/src/embroider-build/embroider/packages/core/src/template-compiler-common.js:71:36)
    at NodeTemplateCompiler.compile (/Users/spenner/src/embroider-build/embroider/packages/core/src/template-compiler-common.js:87:47)
    at NodeTemplateCompiler.compile (/Users/spenner/src/embroider-build/embroider/packages/core/src/template-compiler-node.js:23:25)
    at Object.hbsLoader (/Users/spenner/src/embroider-build/embroider/packages/hbs-loader/src/index.js:9:16)
    at LOADER_EXECUTION (/Users/spenner/src/embroider-build/embroider/node_modules/loader-runner/lib/LoaderRunner.js:132:14)
stefanpenner commented 3 years ago

It appears the deprecated ember-cli-template-lint is not compatible with ember-source 4x. Specifically because one of it's plugins's constructor is now being interpreted as a plugin most likely due to https://github.com/glimmerjs/glimmer-vm/commit/28652d4ea214f1c7bf0251d4b4b23853d9f0a787 and possibly https://github.com/emberjs/ember.js/commit/bbb62dde664772ae5ce75b460ce878ed758747cd

Now it seems pretty reasonable that a deprecated plugin causes a failure, but it isn't clear yet if this effects non-deprecated plugins, and also the debugging of this wasn't ideal.

I'll dig in some more..

stefanpenner commented 3 years ago

Ok. Solution: Ensure your template compiler plugins follow the new form only.

In my case, ember-cli-template-lint's plugins where simply incompatible with the new plugin form introduced by https://github.com/glimmerjs/glimmer-vm/commit/28652d4ea214f1c7bf0251d4b4b23853d9f0a787, and required upgrading to ember-template-lint. Given that ember-cli-template-lint is deprecated, in this scenario it is likely perfectly reasonable solution.

That being said, the debugging on this is quite sub-optimal, and I although I hope folks running into this problem at helped by this issue, i suspect (assuming the above is a reasonable change) that better detection of the failure mode could go a long way. Specifically https://github.com/glimmerjs/glimmer-vm/blob/ef92c497c3d921af22b38a54eac1445c204c3370/packages/%40glimmer/syntax/lib/parser/tokenizer-event-handlers.ts#L447 could detect a return value without { visitor() { } } and provide throw an actionable error

chriskrycho commented 3 years ago

@stefanpenner thank you for the write-up; I will be fixing a bunch of addons with this issue over the next few weeks, I expect. I’ll report them here as I find them so that the community has a resource to know what to update!

Confirmed

Fixed

Not yet fixed

Sooner™

Unconfirmed

npendery commented 2 years ago

Hey @stefanpenner im trying to upgrade our app and keep getting this error with no helpful stack trace and error report. Any suggestions on what I should do next? Here is the error report (with removed app name and source):

=================================================================================

ENV Summary:

  TIME: Wed Jan 05 2022 13:46:20 GMT-0700 (Mountain Standard Time)
  TITLE: ember
  ARGV:
  - ~/.nvm/versions/node/v12.22.6/bin/node
  - app/node_modules/.bin/ember
  - server
  - --host
  - 0.0.0.0
  EXEC_PATH: ~/.nvm/versions/node/v12.22.6/bin/node
  TMPDIR: /var/folders/yk/kptk04814qb3jhq5tzl81qgc0000gn/T
  SHELL: /bin/zsh
  PATH:
  - /var/folders/yk/kptk04814qb3jhq5tzl81qgc0000gn/T/yarn--1641415527409-0.7370864348357087
  - app/node_modules/.bin
  - ~/.config/yarn/link/node_modules/.bin
  - ~/.nvm/versions/node/v12.22.6/libexec/lib/node_modules/npm/bin/node-gyp-bin
  - ~/.nvm/versions/node/v12.22.6/lib/node_modules/npm/bin/node-gyp-bin
  - ~/.nvm/versions/node/v12.22.6/bin/node_modules/npm/bin/node-gyp-bin
  - ~/.nvm/versions/node/v12.22.6/bin
  - ~/.rbenv/shims
  - /usr/local/bin
  - /usr/bin
  - /bin
  - /usr/sbin
  - /sbin
  - ~/.rvm/bin
  PLATFORM: darwin x64
  FREEMEM: 34713600
  TOTALMEM: 34359738368
  UPTIME: 6915947
  LOADAVG: 7.25048828125,6.36767578125,4.509765625
  CPUS:
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  - Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz - 2400
  ENDIANNESS: LE
  VERSIONS:
  - ares: 1.17.2
  - brotli: 1.0.9
  - cldr: 37.0
  - http_parser: 2.9.4
  - icu: 67.1
  - llhttp: 2.1.3
  - modules: 72
  - napi: 8
  - nghttp2: 1.41.0
  - node: 12.22.6
  - openssl: 1.1.1l
  - tz: 2019c
  - unicode: 13.0
  - uv: 1.40.0
  - v8: 7.8.279.23-node.56
  - zlib: 1.2.11

ERROR Summary:

  - broccoliBuilderErrorStack: TypeError: Cannot read property 'visitor' of undefined
    at preprocess (app/node_modules/ember-source/dist/ember-template-compiler.js:11823:40)
    at normalize (app/node_modules/ember-source/dist/ember-template-compiler.js:12458:15)
    at precompileJSON (app/node_modules/ember-source/dist/ember-template-compiler.js:5257:47)
    at precompile (app/node_modules/ember-source/dist/ember-template-compiler.js:5290:31)
    at Object.precompile (app/node_modules/ember-source/dist/ember-template-compiler.js:18461:37)
    at TemplateCompiler.processString (app/node_modules/ember-cli-htmlbars/lib/template-compiler-plugin.js:68:55)
    at Object.processString (app/node_modules/ember-cli-htmlbars/node_modules/broccoli-persistent-filter/lib/strategies/persistent.js:45:36)
    at runMicrotasks (<anonymous>:null:null)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at invoke (app/node_modules/ember-cli-htmlbars/node_modules/broccoli-persistent-filter/lib/index.js:84:12)

  - code: [undefined]
  - codeFrame: Cannot read property 'visitor' of undefined
  - errorMessage: app/templates/application.hbs: Cannot read property 'visitor' of undefined
        in /var/folders/yk/kptk04814qb3jhq5tzl81qgc0000gn/T/broccoli-99032Wpf3w6If5mQl/out-847-colocated_template_processor
        at TemplateCompiler
  - errorType: Template Compiler Error
  - location:
    - column: [undefined]
    - file: app/templates/application.hbs
    - line: [undefined]
    - treeDir: /var/folders/yk/kptk04814qb3jhq5tzl81qgc0000gn/T/broccoli-99032Wpf3w6If5mQl/out-847-colocated_template_processor
  - message: app/templates/application.hbs: Cannot read property 'visitor' of undefined
        in /var/folders/yk/kptk04814qb3jhq5tzl81qgc0000gn/T/broccoli-99032Wpf3w6If5mQl/out-847-colocated_template_processor
        at TemplateCompiler
  - name: Error
  - nodeAnnotation: [undefined]
  - nodeName: TemplateCompiler
  - originalErrorMessage: Cannot read property 'visitor' of undefined
  - stack: TypeError: Cannot read property 'visitor' of undefined
    at preprocess (app/node_modules/ember-source/dist/ember-template-compiler.js:11823:40)
    at normalize (app/node_modules/ember-source/dist/ember-template-compiler.js:12458:15)
    at precompileJSON (app/node_modules/ember-source/dist/ember-template-compiler.js:5257:47)
    at precompile (app/node_modules/ember-source/dist/ember-template-compiler.js:5290:31)
    at Object.precompile (app/node_modules/ember-source/dist/ember-template-compiler.js:18461:37)
    at TemplateCompiler.processString (app/node_modules/ember-cli-htmlbars/lib/template-compiler-plugin.js:68:55)
    at Object.processString (app/node_modules/ember-cli-htmlbars/node_modules/broccoli-persistent-filter/lib/strategies/persistent.js:45:36)
    at runMicrotasks (<anonymous>:null:null)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at invoke (app/node_modules/ember-cli-htmlbars/node_modules/broccoli-persistent-filter/lib/index.js:84:12)

=================================================================================
SergeAstapov commented 2 years ago

@npendery could you please check if you still have ember-cli-template-lint installed? If not, what version of ember-template-lint you have? (I believe you should be on v3 to make things work)

npendery commented 2 years ago

@SergeAstapov no ember-cli-template-lint and latest ember-template-lint. I tried both v4 and v3 of ember-template-lint

SergeAstapov commented 2 years ago

@npendery I've seen this issue multiple times and various projects/addons and it always was resolved with ember-template-lint upgrade.

Couple things come to my mind:

hope it helps!

npendery commented 2 years ago

@SergeAstapov I tried all of that (as well as yarn cache clean) with no avail 😞

If you think of anything else, im all ears. Thanks for the feedback, really appreciate it!

JenLyndle commented 2 years ago

@stefanpenner I am facing this same issue too when trying to upgrade from 3.28 to 4. I replaced ember-cli-template-lint with ember-template-lint and made sure the htmlbars version I have as a direct dependency is the latest. Howewer, I do have dependencies relying on an older version of htmlbars and am not sure if that's the issue. All the direct dependencies am using have been upgraded to their corresponding latest versions

├─┬ @ember/test-helpers@2.6.0 │ └── ember-cli-htmlbars@5.7.2 ├─┬ @html-next/vertical-collection@2.1.0 │ └── ember-cli-htmlbars@3.1.0 ├─┬ ember-cli-clipboard@0.16.0 │ └── ember-cli-htmlbars@5.7.2 ├── ember-cli-htmlbars@6.0.1 ├─┬ ember-cli-nouislider@1.2.1 │ └── ember-cli-htmlbars@4.5.0 ├─┬ ember-concurrency@2.2.0 │ └── ember-cli-htmlbars@5.7.2 ├─┬ ember-css-transitions@2.1.1 │ └── ember-cli-htmlbars@5.7.2 ├─┬ ember-keyboard@6.0.4 │ └── ember-cli-htmlbars@5.7.2 ├─┬ ember-math-helpers@2.18.0 │ └── ember-cli-htmlbars@6.0.1 deduped ├─┬ ember-moment@9.0.1 │ └── ember-cli-htmlbars@5.7.2 ├─┬ ember-notify@6.0.2 │ └── ember-cli-htmlbars@5.7.2 ├─┬ ember-power-calendar@0.16.5 │ ├─┬ ember-assign-helper@0.3.0 │ │ └── ember-cli-htmlbars@4.5.0 │ ├── ember-cli-htmlbars@4.5.0 │ └─┬ ember-element-helper@0.5.5 │ └── ember-cli-htmlbars@5.7.2 ├─┬ ember-power-select@5.0.3 │ ├─┬ ember-assign-helper@0.4.0 │ │ └── ember-cli-htmlbars@6.0.1 deduped │ ├─┬ ember-basic-dropdown@4.0.2 │ │ ├── ember-cli-htmlbars@6.0.1 deduped │ │ └─┬ ember-maybe-in-element@2.0.3 │ │ └── ember-cli-htmlbars@5.7.2 │ ├── ember-cli-htmlbars@6.0.1 deduped │ ├─┬ ember-concurrency-decorators@2.0.3 │ │ └── ember-cli-htmlbars@4.5.0 │ └─┬ ember-text-measurer@0.6.0 │ └── ember-cli-htmlbars@4.5.0 ├─┬ ember-tooltips@3.5.1 │ ├── ember-cli-htmlbars@5.7.2 │ └─┬ ember-in-element-polyfill@1.0.1 │ └── ember-cli-htmlbars@5.7.2 ├─┬ ember-truncate@3.0.0 │ ├── ember-cli-htmlbars@5.7.2 │ └─┬ ember-singularity-mixins@4.0.0 │ ├── ember-cli-htmlbars@5.7.2 │ └─┬ ember-singularity@2.0.0 │ └── ember-cli-htmlbars@5.7.2 ├─┬ ember-wormhole@0.6.0 │ └── ember-cli-htmlbars@5.7.2 └─┬ liquid-fire@0.33.1 └── ember-cli-htmlbars@5.7.2 @runspired mentioned this issue could be a result of requiring implicit-this, so I replaced all the code in the file with a simple 'hello world' and I still see it. PFA the error log for my latest build attempt. Please let me know if I can help in any way! error.dump.83a26557dc69a3bf29a2e16c64960d5e.log

JenLyndle commented 2 years ago

@npendery I finally managed to figure out what was causing the ember 4 build to fail for me. Due to some reason, using ember-cp-validations library was breaking the code. Removing it and all related code helped the build to succeed. Need to go back and figure out how to get around the problem. Just wanted to give you a heads up in case you are using this library.

chriskrycho commented 2 years ago

In general, you should start by identifying any dependencies who in turn depend on old versions of ember-cli-htmlbars (or its predecessors) and either upgrade your dependencies to versions which have newer dependencies, or go open PRs which do the upgrade on the dependencies' dependencies (DEPENDENCIEEEEES) to get them up to date. That may not fix it immediately, but it's likely to help.

JenLyndle commented 2 years ago

@chriskrycho I did that too. I removed libraries and associated code where the htmlbars version was not > 5.x.x. That did not help. The ember-cp-validations library I pulled out does not have any dependency on ember-cli-htmlbars or ember-cli-template-lint. But removing that helped in the build. Am not sure why yet.

npendery commented 2 years ago

Great, thanks @JenLyndle! Ill look into why that helps too

JenLyndle commented 2 years ago

To make sure that my other dependencies were not causing this, I created a brand new ember application and installed ember-cp-validations. I ran ember build then and got the following deprecation and error:

WARNING: [DEPRECATION] [DEPRECATION] Usage of the Ember Global is deprecated. You should import the Ember module or the specific API instead.

See https://deprecations.emberjs.com/v3.x/#toc_ember-global for details.

Usages of the Ember Global may be caused by an outdated ember-cli-babel dependency. The following steps may help:

Important

In order to avoid repeatedly showing the same deprecation messages, no further deprecation messages will be shown for usages of the Ember Global until ember-cli-babel is upgraded to v7.26.6 or above.

To see all instances of this deprecation message, set the EMBER_GLOBAL_DEPRECATIONS environment variable to "all", e.g. EMBER_GLOBAL_DEPRECATIONS=all ember test.

Details

Prior to v7.26.6, ember-cli-babel sometimes transpiled imports into the equivalent Ember Global API, potentially triggering this deprecation message indirectly, even when you did not observe these deprecated usages in your code.

The following outdated versions are found in your project:

Environment: development cleaning up... Template Compiler Error (TemplateCompiler) in ember-quickstart/templates/application.hbs

Cannot read properties of undefined (reading 'visitor')

Stack Trace and Error Report: /var/folders/7l/54hcgmcj5px90x_b3n2lkss00000gn/T/error.dump.230e7976d87f3c46c3e6cfa1b4b3edcb.log

loganrosen commented 2 years ago

@JenLyndle The issue with ember-cp-validations is most likely due to the deprecation that was cleaned up in #19429 for disallowing legacy class-based AST plugins. It looks like @Turbo87 fixed this issue in qonto/ember-cp-validations#3, but that's a fork of the addon that doesn't appear to be published to NPM. The original addon hasn't been touched since April 2021.