Next.js Discord

Discord Forum

How to use copy-webpack-plugin to modify static assets

Answered
Odorous house ant posted this in #help-forum
Open in Discord
Odorous house antOP
I have a file public/manifest.json and i have the following config:
config.plugins.push(new CopyPlugin({
    patterns: [
        {
            from: 'public/manifest.json',
            transform(content, path) {
                return content
                    .toString()
                    .replace(
                        /%\w+%/g,
                        (m) => process.env[m.slice(1, m.length - 1)],
                    );
            },
        },
    ],
}))

to interpolate env variables, which works as expected, however the resulting file isn't served by nextjs.
Answered by Odorous house ant
@Anay-208 I found the solution. The project was originally made with CRA and then ported to next.js, but back then the manifest was generated with the copy plugin and since at the time we didn't really care about the PWA it was removed except the copy plugin and its config; so when i tried to reintroduce the manifest with the official method - linked above - the two conflicted. The copy plugin failed since there was no file to copy and transform, but this also affected the manifest generation.
View full answer

7 Replies

@Anay-208 https://nextjs.org/docs/app/api-reference/file-conventions/metadata/manifest Have you seen this article on creating `manifest.json` file?
Odorous house antOP
Yes, i also tried that, but that had its own problems. When i started the dev server it printed errors saying the manifest.json cannot be found in public and when i tried to open a page i got an internal server error because it couldnt find a module, even after reinstalling all dependencies and removing the .next folder.
Anay-208
whats your nextjs version?
Odorous house antOP
It was 13.4.19, but after i got the module error i tried to upgrade to 14.1.3 but it didn't help
Odorous house antOP
@Anay-208 I found the solution. The project was originally made with CRA and then ported to next.js, but back then the manifest was generated with the copy plugin and since at the time we didn't really care about the PWA it was removed except the copy plugin and its config; so when i tried to reintroduce the manifest with the official method - linked above - the two conflicted. The copy plugin failed since there was no file to copy and transform, but this also affected the manifest generation.
Answer
Odorous house antOP
TLDR removing old copy plugin config made it possible to use the app/manifest.js generator
Anay-208
mark the answer as solution @Odorous house ant