search

kriasoft / react-app

Create React App with server-side code support
https://t.me/reactapp
MIT License
613 stars 84 forks source link

v3 - Commas added in body #31

Closed mparker11 closed 5 years ago

mparker11 commented 6 years ago

I've been using v2 and when I first set it up, I remember having one comma appended to the body after mapping the assets. This was fixed by adding .join('') to the ended of the return statement.

Now after upgrading to v3, I am getting the same treatment, but this time it is appending four commas and I can't get rid of them. Basically my markup looks like this at render:

<body>
    ,,
    <div id="app"></div>
    ,,
</body>

Any idea what's going on?

mparker11 commented 5 years ago

For anyone who needs the answer to this, it was a matter of breaking down the docs' basic example. The docs said to do this inside the <body>:

${assets.map(src => `<script src="${src}"></script>`)}

but I ended up having to manipulate it since it returns an array -- and an array includes commas. There is also a special check to make sure that it only grabs JS files (courtesy of docs from v2).

${
    Object.keys(assets).map((key) => {
         let jsAssets = assets[key].filter((src) => src.endsWith('.js'));
         let mapped = jsAssets.map((src) => {
             return `<script src="/${src}"></script>`
         });
         return mapped[0]
     }).join('')
}

I had been doing this for v2, but now the difference is there is an extra array in v3, thus I had to break it down to return mapped[0] rather than returning the map itself. Also, notice the join added at the end, which removes the commas from the returned array.