Single SCSS rule showing 'undefined' on server but works in localhost - css

Question

I have an app built using React with Parcel. I am attempting code splitting via modules, but have a strange issue.
On my home page, I am importing a module that has its own css. When the component is showing on the page, there is one single css rule that is showing as 'undefined' in the inspector.
When I run this in my local, or on another page in my app such as About, the rule is recognized and everything works perfectly.
I've tried everything I can think of, but I am lost as to what to try next.
Here's the code in my js file:
<div className={styles.content__move + " content__move"}>
<div className={styles.columns + " columns"}>
<div className={styles.column + " column"}>
The rule being ignored is 'styles.columns'. As you can see it is in between styles.content__move and styles.column, and BOTH of those are working as expected.
When inspecting I see this:
<div class="_content__move_31d79 content__move">
<div class="undefined columns">
<div class="_column_31d79 column">
<div class="_column__img_31d79 column__img _bg4_31d79">
But if I add the module on another page, it shows correctly as:
<div class="_content__move_31d79 content__move">
<div class="_columns_31d79 columns">
<div class="_column_31d79 column">
<div class="_column__img_31d79 column__img _bg4_31d79">
What might I be missing?

Answer 1

I'm not sure what the problem was, but I renamed the class in the JS and CSS, rebuilt, and it started working right away. I would suggest to try this before changing style loaders for anybody that has the same problem.
I added:
class="styles.columns_f"
in the JS, and in the SCSS:
.columns_f {...}
Ran a production build, and that was the fix.