`theme.notificationsContainer.className.main` is marked as required in

[RathanakSreang]

How can I fix this error?

`theme.notificationsContainer.className.main` is marked as required in `NotificationsContainer`, but its value is `undefined`.

[mmoyles87]

I'm getting this error as well.

I've narrowed it down to the index.js file in the theme.

var css = require('./lib/styles.css')

will import the css file, i can console.log it and it outputs the entire stylesheet as a string but any css['XXX'] variables are undefined.

Likely we are missing some fancy babel plugin or maybe this type of functionality is only supported with webpack? (which i am not using)

I will edit this post if I find a solution.

Hacky Solution

Clone your own theme Edit index.js replace all instances of css['some-class-name'] with 'some-class-name' Remove :local from scss files Add the scss files to your sass compiler path

Definitely, not the most correct solution but it works in a pinch if you aren't using css modules. And for the record, I do like css modules but webpack is kind of pain to setup with meteor and this is a very small proof of concept project I am working on.

[LouisBarranqueiro]

:wave: @RathanakSreang, Please respect the template to report a bug, otherwise it's hard for me to work on it.

[LouisBarranqueiro]

I'm closing this one for now, please re-open it when it is updated so I get a notification :)

[nurbek-ab]

I think @dubvfan87 was pretty close to the cause of the bug. He doesn't use css modules, so do I. This lib looks promising but not very suitable for people having their projects already set up.

[GektorGrom]

I had this issue when upgrade css-loader to version 3.0.0 here's my updated config if someone have same issue

use: ExtractTextPlugin.extract({
          use: [{
            loader: 'css-loader',
            options: {
              modules: 'global',
              importLoaders: 1,
            },
          }, {
            loader: 'postcss-loader',
            options: {
              plugins: () => [
                // eslint-disable-next-line global-require
                require('postcss-smart-import'),
                // eslint-disable-next-line global-require
                require('autoprefixer'),
              ],
            },
          }, {
            loader: 'sass-loader',
          }],
        }),

ExtractTextPlugin.extract is optional, issue was with missing options

options: {
              modules: 'global',
              importLoaders: 1,
            },