< is not a valid character within attribute names: (error occurred in 'an unknown module' @ line 14 : column 8)

[NullVoxPopuli]

Update: after this, I know what's going on,

The line/column reporting is incorrect.

---

Not sure what's going on here, but tracking progress regardless,

error log

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

ENV Summary:

  TIME: Sat Jan 08 2022 10:58:35 GMT-0500 (Eastern Standard Time)
  TITLE: ember
  ARGV:
  - 🏠/.volta/tools/image/node/16.13.1/bin/node
  - <repo>/node_modules/.bin/ember
  - serve
  - -p
  - 4202
  EXEC_PATH: 🏠/.volta/tools/image/node/16.13.1/bin/node
  TMPDIR: /tmp
  SHELL: /bin/bash
  PATH:
  - /tmp/yarn--1641657510431-0.36332227589673827
  - <repo>/node_modules/.bin
  - 🏠/.config/yarn/link/node_modules/.bin
  - 🏠/.yarn/bin
  - 🏠/.volta/tools/image/node/16.13.1/libexec/lib/node_modules/npm/bin/node-gyp-bin
  - 🏠/.volta/tools/image/node/16.13.1/lib/node_modules/npm/bin/node-gyp-bin
  - 🏠/.volta/tools/image/node/16.13.1/bin/node_modules/npm/bin/node-gyp-bin
  - 🏠/.volta/tools/image/npm/8.3.0/bin
  - 🏠/.volta/tools/image/yarn/1.22.17/bin
  - 🏠/.volta/tools/image/node/16.13.1/bin
  - 🏠/.volta/bin
  - 🏠/.pythons/Python-3.6.3/bin
  - 🏠/.cargo/bin
  - 🏠/Applications
  - 🏠/apps/phantomjs/bin
  - 🏠/scripts/system-utils
  - 🏠/scripts/git
  - 🏠/scripts/rails
  - 🏠/scripts
  - 🏠/.volta/bin
  - 🏠/.local/bin
  - /usr/local/sbin
  - /usr/local/bin
  - /usr/sbin
  - /usr/bin
  - /sbin
  - /bin
  - /usr/games
  - /usr/local/games
  - /snap/bin
  - 🏠/.dotnet/tools
  - 🏠/.dotnet/tools
  - 🏠/.fzf/bin
  PLATFORM: linux x64
  FREEMEM: 956055552
  TOTALMEM: 17388195840
  UPTIME: 1214137.1
  LOADAVG: 0.19,0.23,0.2
  CPUS:
  - Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz - 3192
  - Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz - 3192
  - Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz - 3192
  - Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz - 3192
  - Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz - 3192
  - Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz - 3192
  ENDIANNESS: LE
  VERSIONS:
  - ares: 1.18.1
  - brotli: 1.0.9
  - cldr: 39.0
  - icu: 69.1
  - llhttp: 6.0.4
  - modules: 93
  - napi: 8
  - nghttp2: 1.45.1
  - nghttp3: 0.1.0-DEV
  - ngtcp2: 0.1.0-DEV
  - node: 16.13.1
  - openssl: 1.1.1l+quic
  - tz: 2021a
  - unicode: 13.0
  - uv: 1.42.0
  - v8: 9.4.146.24-node.14
  - zlib: 1.2.11

ERROR Summary:

  - broccoliBuilderErrorStack: SyntaxError: < is not a valid character within attribute names: (error occurred in 'an unknown module' @ line 14 : column 8)
    at generateSyntaxError (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:10007:17)
    at TokenizerEventHandlers.reportSyntaxError (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:11690:13)
    at EventedTokenizer.attributeName (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:21177:27)
    at EventedTokenizer.tokenizePart (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:21400:19)
    at TokenizerEventHandlers.ContentStatement (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:11166:22)
    at TokenizerEventHandlers.acceptNode (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:10890:29)
    at TokenizerEventHandlers.Program (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:10969:14)
    at TokenizerEventHandlers.acceptTemplate (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:10886:29)
    at preprocess (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:11808:74)
    at getTemplateLocals (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:13388:15)
  - code: [undefined]
  - codeFrame: < is not a valid character within attribute names: (error occurred in 'an unknown module' @ line 14 : column 8)
  - errorMessage: statechart-actors/components/main-page.gjs: < is not a valid character within attribute names: (error occurred in 'an unknown module' @ line 14 : column 8)
        in /tmp/broccoli-1026938OopdK8hZVxWX/out-289-funnel
        at broccoli-persistent-filter:Mapper
  - errorType: Build Error
  - location:
    - column: [undefined]
    - file: statechart-actors/components/main-page.gjs
    - line: [undefined]
    - treeDir: /tmp/broccoli-1026938OopdK8hZVxWX/out-289-funnel
  - message: statechart-actors/components/main-page.gjs: < is not a valid character within attribute names: (error occurred in 'an unknown module' @ line 14 : column 8)
        in /tmp/broccoli-1026938OopdK8hZVxWX/out-289-funnel
        at broccoli-persistent-filter:Mapper
  - name: Error
  - nodeAnnotation: [undefined]
  - nodeName: broccoli-persistent-filter:Mapper
  - originalErrorMessage: < is not a valid character within attribute names: (error occurred in 'an unknown module' @ line 14 : column 8)
  - stack: SyntaxError: < is not a valid character within attribute names: (error occurred in 'an unknown module' @ line 14 : column 8)
    at generateSyntaxError (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:10007:17)
    at TokenizerEventHandlers.reportSyntaxError (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:11690:13)
    at EventedTokenizer.attributeName (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:21177:27)
    at EventedTokenizer.tokenizePart (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:21400:19)
    at TokenizerEventHandlers.ContentStatement (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:11166:22)
    at TokenizerEventHandlers.acceptNode (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:10890:29)
    at TokenizerEventHandlers.Program (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:10969:14)
    at TokenizerEventHandlers.acceptTemplate (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:10886:29)
    at preprocess (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:11808:74)
    at getTemplateLocals (<repo>/node_modules/ember-source/dist/ember-template-compiler.js:13388:15)

=================================================================================}

based on the file it's pointing at in /tmp, it looks like the transformation didn't happen:

/tmp/broccoli-1026938OopdK8hZVxWX/out-289-funnel/statechart-actors/components/main-page.gjs

import Helper from '@ember/component/helper';
import { hash } from '@ember/helper';

import { List } from './list';
import { Header } from './header';
import { PostLoader } from './posts-loader';
import { DetailLoadingState } from './posts';

// const currentPostId = () => getService('router').currentRoute.params.postId;
// const getPost = (posts, id) => posts.find(post => post.id === id);
// class getService extends Helper {
//   compute([name]) {
//     return getOwner(this).lookup(`service:${name}`);
//   }
// }

const Details = <template>
  <h2 class='text-xl font-semibold'>
    {{@post.title}}
  </h2>

  {{#if (@state.matches 'loaded')}}
    <div>Details are loaded</div>
  {{/if}}
</template>

<template>
  <PostsLoader as |posts|>
    <DetailLoadingState as |state send|>
      <Header @state={{state}} />

      <div class='py-2 flex gap-2'>
        <List @posts={{posts.records}} />

        <section>
          {{#let (currentPostId) as |id|}}
            {{ (send 'LOAD_DETAILS' (hash postId=id)) }}
            <Details @post={{getPost posts id}} @state={{get state.context.posts id}}
          {{/let}}
        </section>
      </div>
    </DetailLoadingState>
  </PostsLoader>
</template>

What's goofy is that the error line/column is in a commented out part of the file (that I don't want to leave un-commented, but I commented it out to kinda confirm that I think the stack trace is complaining about a different file than what is reported?)

but,

other components are successfully converted

[NullVoxPopuli]

After commenting out different parts of the file, I've made progress

So it seems something is wrong with my default export template 🤔
(uncommenting this comment block causes the error to return)

[NullVoxPopuli]

while testing, I ran in to another error

const Details = <template>
  content doesn't matter
</template>

<template>
</template>
// ^ empty, preceeding template has no semicolon

error:

<repo>/statechart-actors/components/main-page.js: Attempted to use `<template>` to define a template in an unsupported way. Templates defined using this syntax must be:

1. Assigned to a variable declaration OR
2. The default export of a file OR
2. In the top level of the file on their own (sugar for `export default`) OR
4. Used directly within a named class body
  15 | }
  16 |
> 17 | const Details = [__GLIMMER_TEMPLATE(`
     |                 ^
  18 |     <h2 class='text-xl font-semibold'>
  19 |       {{@post.title}}
  20 |     </h2>

adding a semicolon after the first closing template tag resolves -- could the error be better?
could we support no semi-colon?

[NullVoxPopuli]

oh no.
I found the original problem:

             <Details @post={{getPost posts id}} @state={{get state.context.posts id}}

unclosed tag here
but this was way on line 39.

anyway to fix the line/column number reporting?

[NullVoxPopuli]

Should be resolved in v4. Thanks for reporting!
If this is still an issue, lemme know and we can reopen.