React 应用程序的编译错误：模块构建失败（来自./node_modules/babel-loader/lib/index.js）

Question

I am trying to compile a React app. I pulled the repo from Github, did yarn install and then compiled it. It gives the following error:

Module build failed (from ./node_modules/babel-loader/lib/index.js)
SyntaxError: {file_path_here}: Unexpected character ' ​'

The the error is in the following file at function renderItem

export type DisplayItemT = {
    mainText: string;
    secondaryText: string[];
};


function renderItemsAsCards(items, options): string {
    let cardsrows_mso = '';
    for (let i = 0; i < items.length; ) {
        let cards = '';
        const record = items[i];
        const item={mainText: record.get('name'),secondaryText: [record.get('department'), record.get('location')]};
        const card = renderItem(item);

        cards = cards.concat(card);
        i++;
        if( i === items.length) {
            break;
        }

        cardsrows_mso = cards ? cardsrows_mso.concat(cards): ``;
        
    }

    return cardsrows_mso ? `
    <table width="100%" border="0" style="text-align: ${options.align || 'left'};">
        <tbody>
            <tr>
                ${cardsrows_mso}
            </tr>
        </tbody>
    </table>
    `
    :``;
}

function renderItem(item​​​​​​​: DisplayItemT): string {
    return `<td style="height: 100%; padding: 5px; width: 202px; max-width: 320px; min-width: 202px; display: inline-block;">
                <div style="width: 100%; padding: 15px 0px 20px; text-align: center; border: 1px solid #cccccc; border-radius: 5px; height: 100%">
                    <h6 style="font-size: 15px; font-weight: 500; color: #333; line-height: 19px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0;">${item.mainText}</h6>
                    <p style="font-size: 13px; line-height: 17px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${item.secondaryText[0]}</p>
                    <p style="font-size: 13px; line-height: 17px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">${item.secondaryText[1]}</p>
                </div>
            </td>`;
}

I get the above mention error, and the location of error is in the line function renderItem(item: DisplayItemT): string { at the end of parameter item in the above line. It says there's an unexpected character ' ' but I can't find any extra blank spaces anywhere.

Also the function renderItem is separated because it needs to be used in other files. But if I put the string code from that function inside renderItemsAsCards (which calls 'renderItem') the code compiles fine.

My package.json, webpack.config.js files are pretty huge. So if I should post something from them please let me know. I would appreciate any help with this

Answer 1

Most of the time I've faced This Issue is because I've added/removed a package or component, Firstly you should try and install the package separately, coz' sometimes the package is not installed by using yarn/npm install. And this might get fixed by restarting the server/APP or alternatively, you can also try to change the browser tab or restart the browser. If not then kindly share the last file you've made change in the error is mostly due to the change in some component