Plop doesnt generate my component because replace is undefined - replace

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.