rixo/rollup-plugin-postcss-hot

TypeError: 'ownKeys' on proxy: trap returned duplicate entries by using css-modules via postcss

Closed this issue · 1 comments

Hi!
I try to use hmr with postcss modules, but in dev mode face with error as below:

TypeError: 'ownKeys' on proxy: trap returned duplicate entries

My config:

import postcss from 'rollup-plugin-postcss'

// ...
{
    // ...
    plugins: [
        postcss({
            extract: 'styles.css',    // style/styles.css                    // css modules
            minimize: !inDevelopment,
            modules: true,
        }),
        inDevelopment && hotcss({                                            // hmr
                hot: true,
                file: `styles.css`  // 'styles.css' works too
        }),
       // ...
    ]
}

I figured out the problem is in place where we extract keys from bundle proxy:

Object.keys(bundle)

In my case the expression bundle.map(e => e.fileName) within ownKeys hook of Proxy returns ['main.js', 'styles.css', 'styles.css']. And - it's important! - first style.css (under index 1) keeps final css code in source prop whereas second style.css keeps js code as follows:

export default{"header":"style-module_header__74YkC","title":"style-module_title__Hei5S"};

But it seems that then during hotcss plugin work it'll be overriden to

window.__css_reload();
module && module.hot && module.hot.dispose(window.__css_reload);
module && module.hot && module.hot.accept(window.__css_reload);
__$RefreshCheck$__(module);

// # sourceURL=nollup-int:///src/style.css

So I am confused how to do it

Is it possible to use it togather?

It seems I confused the repository with rollup-plugin-hot-css (is easy to do because the package names are similar). So as I don't know how to delete the issue at all, I'll just close this one