css.charAt is not a function

[slovyagin]

I have such error when trying to use the plugin.

Here’s how I’ve set up the CSS loaders:

      {
        test: /\.styl$/,
        include: paths.appSrc,
        exclude: paths.appComponents,
        loader: ExtractTextPlugin.extract(
          ['style'],
          [
            'css?importLoaders=1',
            'postcss',
            'stylus'
          ]
        )
      },
      {
        test: /\.styl$/,
        include: paths.appComponents,
        loader: ExtractTextPlugin.extract(
          ['style'],
          [
            'css?modules&importLoaders=1&localIdentName=[folder]__[local]___[hash:base64:5]',
            'postcss',
            'stylus',
          ]),
      },
      {
        test: /\.(woff|woff2).css$/,
        include: paths.appSrc,
        loader: 'file',
        query: {
          name: 'static/css/[name].[ext]'
        }
      }

First and second are for processing Stylus styles and CSS modules, the third is just to move CSS containing base64 encoded WOFF(2) fonts into build dir.

Here’s the setup of ExtractTextPlugin:

new ExtractTextPlugin('static/css/[name].[contenthash:8].css')

And finally the PurifyPlugin:

    new PurifyPlugin({
      // Give paths to parse for rules. These should be absolute!
      paths: glob.sync(`${paths.appSrc}/*`),
      extensions: ['.html', '.jsx'],
      purifyOptions: {
        info: true,
        rejected: true
      }
    })

I’ve tried a lot of ways to specify the paths, like in README, like in examples, by absolute paths (/User/…), but no luck.

I’ve updated the plugin and Webpack, but it also doesn’t help.

Any help and ideas about what could go wrong?

[bebraw]

Are you using the Git version? I haven't published it to npm yet (problems with npm, I have to rename the package etc.). Can you set up a standalone example?

[slovyagin]

Sorry, I didn’t understand you. I've installed the package from npm and tried the version from Github, but the result is the same. But I don't see any sense in it, because they have the same version 2.0.3. I'll try to provide a small example to reproduce this behaviour.

[bebraw]

The GitHub version has some serious improvements in it. The API is completely different than in the npm one, though. Your code will fail if you run it against the npm version with your config above.

This is why I asked for a standalone example (mentioned in the issue template too!).

[slovyagin]

mentioned in the issue template too! 🤷

Anyway the bug is still here, I will send you a sample to reproduce it

[slovyagin]

Ah, it's not so easy to reproduce this behaviour at a small sample, need some time for that

[bebraw]

@crvst No probs. I'll rename this plugin today and do some maintenance. Time to get a version out there.

[bebraw]

Hi,

I published the new version. Please adapt your setup to that and see if that helps. I added verbose flag that should help in debugging.

[slovyagin]

Sadly, the update didn't help. The process likely even doesn't reach that verbose log part. All I see is a node error stack trace.

TypeError: css.charAt is not a function
    at comment ([...]/node_modules/css/lib/parse/index.js:168:20)

And so on.

I forgot to add that using cli tool directly works well and eliminates styles properly and without any complications.

I'd ask you not close the issue for now, please, I'll try to investigate it and post some results later.

[bebraw]

If you can set up a small repository showcasing the issue, I don't mind digging into it.

Can you see why/where css package is used? I haven't seen that on webpack projects before.

[slovyagin]

Is there a quick way to know what dependecy relies on it?

[bebraw]

npm ls I think.

[bebraw]

One option is that you have something like loaders: ['css', ...] somewhere in your configuration. That will pick up css over css-loader if you have both installed. I would rewrite loader definitions with -loader suffix anyway.

[slovyagin]

Well, umm, the only place where css is used the plugin, hope I understand you right.

└─┬ [email protected]
  └─┬ [email protected]
    └─┬ [email protected]
      └── [email protected]

[bebraw]

Ah, I see. It chokes at purify-css then. I would need a project to fix this unless you feel like digging in. 👍

[slovyagin]

OK, thanks, I need some time to reproduce it at a small project!

[bebraw]

Alright. It's weird verbose: true doesn't show anything as purify is triggered after that. But I'll know more once I have some code to study.