1

We're trying to take part of our React application and build it into a library for use by business partners. The original React application is a Create React App application and we're trying to achieve this without ejecting the application.

We've created a new entry point for the application and we're building a bundled application using Webpack. The issue we're currently having is that @value values are undefined when we attempt to reference them within components.

The Code

sidebar/styles.module.css

@value sidebarOptionsWidth: 64px;
@value sidebarExpandedWidth: 384px;
...

Relavant Component Code

import {
  sidebarOptionsWidth,
  sidebarExpandedWidth
} from "../sidebar/style.module.css";
...
const sidebarWidth = isSidebarExpanded
      ? sidebarExpandedWidth
      : sidebarOptionsWidth;
Number(sidebarWidth.replace("px", "")); // <-- This errors due to value being undefined
...

webpack.config.js

const path = require("path");
const Dotenv = require("dotenv-webpack");
const TerserPlugin = require("terser-webpack-plugin");

const config = {
  entry: path.join(__dirname, "src/index.js"),
  output: {
    filename: `bundle.min.js`,
    library: "TheLibrary",
    libraryTarget: "var",
    path: path.join(__dirname, "build/static/js")
  },
  resolve: {
    modules: [path.resolve(__dirname, "src"), "node_modules"]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        options: {
          cacheDirectory: true,
          plugins: ["@babel/plugin-proposal-class-properties"]
        }
      },
      {
        test: /\.css$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              modules: true
            }
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [
                  ["postcss-modules-values"]
                ]
              }
            }
          }
        ]
      },
      {
        test: /\.(gif|jpg|png|svg)$/,
        use: ["url-loader"]
      },
      {
        test: /\.mp4$/,
        use: "file-loader?name=videos/[name].[ext]"
      }
    ]
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()]
  },
  plugins: [
    new Dotenv({
      path: "./.env.dev",
      systemvars: true
    })
  ]
};

module.exports = (env, argv) => {
  if (argv.mode === "development") {
    config.devtool = "eval-cheap-module-source-map";
  }

  return config;
};

The Errors

There are the webpack warnings we receive and the runtime error we receive if we ignore the warnings.

webpack build warnings

"export 'sidebarOptionsWidth' was not found in '../sidebar/style.module.css'

Runtime error

Uncaught TypeError: Cannot read properties of undefined (reading 'replace')

The Question

From what I understand, postcss-modules-values should help with this, however, I'm not sure if we've configured it correctly? Or it's configured correctly and there is something else we are doing wrong here?

DecafCoder
  • 346
  • 5
  • 14

1 Answers1

1

I've managed to get past this now. Updating the style-loader options to turn off esModule has resolved that error.

{
  loader: "style-loader",
  options: {
    esModule: false,
  },
},

This turns off the default and enables CommonJS modules syntax and seems to export the values correctly.

DecafCoder
  • 346
  • 5
  • 14