0

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?

halfer
  • 19,824
  • 17
  • 99
  • 186
EricBellDesigns
  • 955
  • 1
  • 9
  • 33
  • Has the SSR existed on your project? – AmerllicA Feb 25 '20 at 23:26
  • It has not, these are the first builds on this server. – EricBellDesigns Feb 25 '20 at 23:30
  • 1
    I had this issue on one of my projects, that project has SSR and I used Webpack for bundling, after all, I realized on server webpack config I should use `isomorphic-style-loader` instead of `style-loader`. the `style-loader` is just for client configuration. But for Parcel, I have no idea. maybe you should do something like me. – AmerllicA Feb 25 '20 at 23:32
  • 1
    Thanks so much for the suggestion. Parcel being so similar to WebPack, I think you might be on to something. I appreciate the feedback very much! – EricBellDesigns Feb 25 '20 at 23:33

1 Answers1

0

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.

EricBellDesigns
  • 955
  • 1
  • 9
  • 33
  • 1
    does your app still work if you now revert the change? did you just have something stale in your Parcel build cache? – Dan O Mar 03 '20 at 23:34
  • @DanO, it must have been something with the Parcel build cache, because it does work when I revert the change. – EricBellDesigns Mar 04 '20 at 17:38