title: Plop doesnt generate my component because replace is undefined
body: <p>I struggle with this problem and I don't know why the cmd say that <code>replace is undefined</code>.</p>
  <p>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.</p>
  <p>I am currently really speechless and trying to avoid but I just can't continue.</p>
  <p><strong>plopfile.js</strong></p>
  <pre><code>const componentPlop = require('./controllers/component/component.plopfile');
  
  module.exports = (plop) =&gt; {
    
    plop.setWelcomeMessage('Generators');
    componentPlop(plop);
  };
  </code></pre>
  <p><strong>component.plopfile.js</strong></p>
  <pre><code>const componentPlop = (plop) =&gt; {
    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) =&gt; {
        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;
  </code></pre>
  <p>Even in the first action does fail I showcase the first action template</p>
  <p><strong>Component.ts.hbs</strong></p>
  <pre><code>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&lt;{{pascalCase name}}Props&gt; = ({ children }) =&gt; {
  
    return &lt;Styled{{pascalCase name}}&gt;{children}&lt;/Styled&gt;;
  };
  </code></pre>
  <p><strong>The Error</strong></p>
  <pre><code>✖  ++ 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.
  </code></pre>
  <p>Best Regards</p>
  <p>Knome</p>