Property accessors as template literals causes errors with react-docgen v7

[Jim O'Donnell]

We have some storybook stories which have worked fine with older versions of react-docgen, but fail with this error in v7.

TypeError: Argument must be Identifier, Literal, QualifiedTypeIdentifier or TSQualifiedName. Received 'TemplateLiteral'

The common factor in the failing files is Object.entries(). Here's an example of a file that fails, unless I remove Object.entries() on lines 41 to 47.

import { Provider } from 'mobx-react'
import { SubjectFactory, WorkflowFactory } from '@test/factories'
import mockStore from '@test/mockStore'

import CenteredLayout from './CenteredLayout'

export default {
  title: 'Layouts / Centered',
  component: CenteredLayout,
  excludeStories: ['mockTask'],
  args: {
    separateFramesView: false
  }
}

const subjectSnapshot = SubjectFactory.build({
  id: '1',
  locations: [
    {
      'image/jpeg':
        'https://panoptes-uploads.zooniverse.org/production/subject_location/11f98201-1c3f-44d5-965b-e00373daeb18.jpeg'
    }
  ]
})

export const mockTask = {
  init: {
    answers: [{ label: 'yes' }, { label: 'no' }],
    strings: {
      help: 'Choose an answer from the choices given, then press Done.',
      question: 'Is there a cat?',
      'answers.0.label': 'yes',
      'answers.1.label': 'no'
    },
    taskKey: 'init',
    type: 'single'
  }
}

const taskStrings = {}
Object.entries(mockTask).forEach(([taskKey, task]) => {
  if (task.strings) {
    Object.entries(task.strings).forEach(([key, value]) => {
      taskStrings[`tasks.${taskKey}.${key}`] = value
    })
  }
})

const workflowSnapshot = WorkflowFactory.build({
  configuration: {
    invert_subject: true,
    limit_subject_height: true
  },
  first_task: 'init',
  strings: taskStrings,
  tasks: mockTask
})

export function Default({ separateFramesView }) {
  return (
    <Provider classifierStore={Default.store}>
      <CenteredLayout separateFramesView={separateFramesView} />
    </Provider>
  )
}

Default.store = mockStore({
  subject: subjectSnapshot,
  workflow: workflowSnapshot
})

[Jim O'Donnell]

I narrowed this down to lines like this one:

taskStrings[`tasks.${taskKey}.${key}`] = value

If you access an object property via a template literal, react-docgen errors. Setting a string variable fixes it.

const stringKey = `tasks.${taskKey}.${key}`
taskStrings[stringKey] = value

[Taylor Jones]

I'm seeing the same. In our case it's

style[`--${prefix}-stack-gap`] = gap;

The story is still loaded by storybook, but the args table fails to load

[Kyle Getz]

Running into this as well.

[Daniel Tschinder]

Fixed in 7.0.2