search

bitovi / react-to-web-component

Convert react components to native Web Components. Works with Preact too!
https://www.bitovi.com/open-source/react-to-web-component
MIT License
728 stars 43 forks source link

SCSS modules not working #192

Closed joh3rd closed 3 months ago

joh3rd commented 3 months ago

I'm having problems using module.scss files.

example:

import styles from "./my-web-component.module.scss";

export const MyWebComponent: FunctionComponent = () => {
  return (
    <div className={styles.Wrapper}>
      <p>content</p>
    </div>
  )
}

after building my web component and try to load it somewhere, like that:


<html>
<head>
  <script src="http://localhost:3000/web-components.bundle.js"></script>
</head>
<body>
  <my-web-component />
</body>
</html>

i get the following error: TypeError: Cannot read properties of undefined (reading 'Wrapper')

i already tried a lot of different loaders in my webpack.config.js but the result is always the same.

joh3rd commented 3 months ago

i was able to solve it with a css-loader in my webpack.config.js

{
    loader: "css-loader",
    options: {
        importLoaders: 1,
        modules: {
            namedExport: false,
            exportLocalsConvention: "camelCase",
        },
        esModule: true,
    },
}