Plugins in posthtml.config.js only work with require('posthtml-plugin')()

[andreyvolokitin]

I am trying to keep all posthtml options in posthtml.config.js. I get empty-div output from posthtml-loader (<div></div>) when I use following notation in posthtml.config.js:

module.exports = {
  plugins: {
    'posthtml-include': {},
    'posthtml-mixins': {},
  },
};

but everything is working fine when I use notation with require():

module.exports = {
  plugins: [
    require('posthtml-include')({}),
    require('posthtml-mixins')({}),
  ],
};

Not sure if it is me doing something wrong, or it is a problem with posthtml-loader or posthtml-load-config

🌐 Environment

OS	node	npm/yarn	package
[OS X][10.11.6]	[9.2.1]	[5.6.0]	[1.0.1]

[michael-ciniawsky]

@andreyvolokitin Can you provide a small repo for reproduction? Where is your posthtml.config.js located atm? Could you show tree $(pwd) (from inside your project (root)) ?

[andreyvolokitin]

posthtml.config.js is at the root. Will do a repo, it is quite messy at the moment, but here is a tree if it helps: https://gist.github.com/andreyvolokitin/73bbb86fe53364ec2d36c58790fb407a

[michael-ciniawsky]

I can't see the full relevant tree because of all the stuff in node_modules 🙃 e.g ./posthtml.config.js seems to be stripped after 18000+ lines 😛. Did you get any config related {Error} like No PostHTML Config found in ${path} || posthtml-${plugin} could not be loaded. Did you require() it ? etc. atm? Normally the loader fails when neither options/plugins are set in webpack.config.js nor a posthtml.config.js was found

[andreyvolokitin]

Full output: https://gist.githubusercontent.com/andreyvolokitin/73bbb86fe53364ec2d36c58790fb407a/raw/9f090f85ab2e61b5d28824351802e7b7a61d490a/output.txt

I had no such errors, all plugins worked (using require notation) and config was assumingly found, because when I change plugins declarations in the config they are properly applied as per config. In webpack.config.js I simply have loader declared without any options:

{
        test: /\.html$/,
        use: [
          {
            loader: 'html-loader',
          },
          {
            loader: 'posthtml-loader',
          },
        ],
      },

It is actual plugin declaration notation which makes this working or broken (see initial issue description). I assume that if you require plugins from config then you don't need posthtml-load-plugins which is used by posthtml-load-config (which is used by posthtml-loader). So maybe something wrong with those plugins because with non-require notation (with a simple string) plugins may not be auto-loaded and thus failing posthtml-loader

[michael-ciniawsky]

kk, if you use an {Array<require('posthtml-plugin')>} in config.plugins it works correctly (you get transformed and correct HTML output in your bundle) ? I'm just wondering why there is no (Error} thrown for {Object<String('posthtml-plugin')>} if something went wrong current e.g plugin loading, but this likely is a bug somewhere in posthtml-load-* I will look this as soon as possible. A small repo where the {Error} occurs would still be helpful and appreciated for debugging :)

[andreyvolokitin]

if you use an {Array<require('posthtml-plugin')>} in config.plugins it works correctly (you get transformed and correct HTML output in your bundle) ?

yes, here is repo: https://github.com/andreyvolokitin/posthtml-loader-issue-118. Run npm install && npm run build and see ./dist/index.html. Also see posthtml.config.js and try to change notation (commented out version is working, but current version is not)

[Scrum]

@andreyvolokitin Hi, could you please check this after the release of the version 2.0.0 ?

[andreyvolokitin]

@Scrum Hi, will do

[andreyvolokitin]

The test case with upgraded deps still doesn't work (empty div output)

[Scrum]

@andreyvolokitin update posthtml-load to v2.0.1