Блог

Я новичок в машинописи. Я получаю следующую ошибку при использовании типа HTMLElement в forEach цикле:

 ERROR in ./app/javascript/mount.jsx
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /Users/me/projects/mathllc/app/javascript/mount.jsx: Unexpected token, expected "," (7:34)

   5 |     const mountPoints = document.querySelectorAll('[data-react-component]')
   6 |     mountPoints.forEach((mountPoint) => {
>  7 |       const dataset = (mountPoint as HTMLElement).dataset
     |                                   ^
   8 |       const componentName = dataset['reactComponent']
   9 |       const Component = components[componentName]
  10 |       if (Component) {
 

Я следую этому уроку @Ryan Bigg : https://egghead.io/blog/rails-graphql-typescript-react-apollo

Мой код здесь:

 import ReactDOM from 'react-dom'
export default function mount(components = {}) {
  document.addEventListener('DOMContentLoaded', () => {
    const mountPoints = document.querySelectorAll('[data-react-component]')
    mountPoints.forEach((mountPoint) => {
      const dataset = (mountPoint as HTMLElement).dataset
      const componentName = dataset['reactComponent']
      const Component = components[componentName]
      if (Component) {
        const props = JSON.parse(dataset['props'])
        ReactDOM.render(<Component {...props} />, mountPoint)
      } else {
        console.log(
          'WARNING: No component found for: ',
          dataset.reactComponent,
          components,
        )
      }
    })
  })
}
 

Спасибо за любую помощь!

Глядя на ошибку — ERROR in ./app/javascript/mount.jsx ) — похоже, что вы не используете .tsx файл, и ключевое as слово не является допустимым Javascript, поэтому вам следует либо удалить as HTMLElement , потому что Javascript не заботится о типах, либо изменить имя файла на mount.tsx — если вы используете компилятор машинописного текста в своей цепочке сборки.