Use the custom component written by styled-components, publish it to npm, install it through npm, and run Times error

problem description

use custom components written by styled-components. After publishing to npm, install through npm and run Times error:
Module parse failed: Unexpected token (14:12)
You may need an appropriate loader to handle this file type.

the environmental background of the problems and what methods you have tried

at present, it is determined that the problem is caused by styled-components, but I don"t know how to deal with it.
there is no problem with writing "component Header" directly in the calling project.
but as a separate component, after it is published to npm (verdaccio), the calling project runs the project through npm install-- save component A, and will report an error:


                    <SearchInput></SearchInput>
                </SearchBar>
            </HeaderWrapper>
        )
    }
}

export default Header;

what result do you expect? What is the error message actually seen?

can solve this problem, and the page can be used normally

Nov.14,2021

try to include node_modules in loader

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b41519-2c565.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b41519-2c565.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?