Plop doesnt generate my component because replace is undefined

Question

I struggle with this problem and I don't know why the cmd say that replace is undefined.

I researched a bit but couldn't find any reason why the script should fail. I console.log the whole flow of the code but everything gets passed.

I am currently really speechless and trying to avoid but I just can't continue.

plopfile.js

const componentPlop = require('./controllers/component/component.plopfile');

module.exports = (plop) => {
  
  plop.setWelcomeMessage('Generators');
  componentPlop(plop);
};

component.plopfile.js

const componentPlop = (plop) => {
  plop.setGenerator(' Components', {
    description:
      'This area is responsible for creating, editing and managing  Components',
    prompts: [
      {
        name: 'componentName',
        type: 'input',
        message: 'Component name: ',
      },
      {
        name: 'componentType',
        type: 'list',
        message: 'Component type: ',
        choices: [
          'animations',
          'atoms',
          'molecules',
          'organismns',
          'templates',
          'layouts',
        ],
      },
      {
        type: 'list',
        name: 'componentTemplate',
        message: 'Component Template',
        default: 'none',
        choices: [
          { name: 'Default', value: 'props' },
          { name: 'With Variants', value: 'variants' },
        ],
      },
    ],

    actions: (data) => {
      let actions = [
        {
          type: 'add',
          path: '../src/components/{{pascalCase name}}/index.ts',
          templateFile: 'templates/ComponentIndex.ts.hbs',
        },
        {
          type: 'add',
          path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx',
          templateFile: 'templates/test.ts.hbs',
        },
      ];

      if (data.componentTemplate === 'props') {
        actions = actions.concat([
          {
            type: 'add',
            path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
            templateFile: 'templates/Component.ts.hbs',
          },
          {
            type: 'add',
            path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
            templateFile: 'templates/storiesWithProps.ts.hbs',
          },
        ]);
      }

      if (data.componentTemplate === 'variants') {
        actions = actions.concat([
          {
            type: 'add',
            path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.tsx',
            templateFile: 'templates/ComponentWithVariants.ts.hbs',
          },
          {
            type: 'add',
            path: '../src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx',
            templateFile: 'templates/storiesWithVariants.ts.hbs',
          },
        ]);
      }

      return actions;
    },
  });
};
module.exports = componentPlop;

Even in the first action does fail I showcase the first action template

Component.ts.hbs

import { FC } from 'react';
import tw, { styled, css, theme } from 'twin.macro';

export interface {{pascalCase name}}Props {
  children: React.ReactNode;
}

const Styled{{pascalCase name}} = styled.div`
  ${tw` `}
`;

export const {{pascalCase name}}: FC<{{pascalCase name}}Props> = ({ children }) => {

  return <Styled{{pascalCase name}}>{children}</Styled>;
};

The Error

✖  ++ Cannot read property 'replace' of undefined
✖  ++ ../src/components/{{pascalCase name}}/{{pascalCase name}}.test.tsx Aborted due to previous action failure
✖  ++ ../src/components/{{pascalCase name}}/{{pascalCase name}}.tsx Aborted due to previous action failure
✖  ++ ../src/components/{{pascalCase name}}/{{pascalCase name}}.stories.tsx Aborted due to previous action failure
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Best Regards

Knome

Answer 1

To achieve the processing you expect, use {{pascalCase componentName}} instead of {{camelCase name}}

write the value of the name option directly.

I'm sorry for my poor English.