Cannot use within webpack

[data-uri]

Cannot use within webpack

[ibc]

I'm sorry guys, I was very busy with work this year. Gonna check webpack, rollup pretty sonner.

Not true.

[heldr]

Just a recall that PRs are always welcomed in open-source community and behind the scenes we have humans writing codes. Apparently, shamming contributors sounds an easier path though 😄

But yes! I should have prioritized it somehow, and sorry for those waiting for.

Being very transparent, I totally forget about this issue(can I?) and sometime I'll fix/review it.

Cheers! 🍵

[mikelambert]

FWIW, seems there is a shebang-loader that will solve this problem for me within webpack. So the fact that I don't need to write my own loader/code (and others have encountered it with a few different npm modules out there), makes this feel like less of a datauri issue.

But I know there are numerous webpack issues about this, where they keep claiming it's the problem of the module authors, who are making libraries-that-are-also-scripts. (Since technically, # is technically not a valid javascript comment, and these are malformed JS files to include/require in a build setting.)

[john-osullivan]

@mikelambert I'm in the same position you are, trying to get mjml up and running. How did you bring shebang-loader into your webpack config? Based on the usage, it looks like the loader must be explicitly referenced in the require. Does that mean I need to fork mjml and fix any requires to datauri? Or were you able to simply preface the require to mjml?

Update for anyone else in my shoes: This shebang-loader gets the job done, there's a closed issue on its repo which shows how to properly set the webpack config: JavascriptIsMagic/shebang-loader#2 . Note to Windows users like myself, that issue recommends that we use path.resolve() to match on the offending npm package. That didn't work for me because you need to accurately specify the whole path. It was easier to use a RegEx that accounted for the different line break characters: /node_modules(\/|\\)datauri(\/|\\)index\.js$/

[DeedleFake]

I just checked. I can confirm that it works. Thank you.

[heldr]

Thank you all for reporting this and sorry for my absence last year. 🍵

[mikelambert]

Ah sorry for the delay in responding, just came to respond and saw you figured it out.

Just a heads-up, I was unable to get <mjml-style inline="inline"> working. I forget exactly, but that seems to pull in additional modules (as part of a css selector package, I think?), some of which do not work in a webpack environment since they do require(env.NODENEV === 'production' ? 'prod.js' : 'dev.js'). And even with a webpack.DEFINE_PLUGIN, webpack was having trouble when attempting to statically analyze that dependency.

Finally just gave up and am currently inlining my CSS in the tags where it's necessary (mainly to override link colors, which didn't work with a <style> tag due to some sort of precedence issues.)

[heldr]

I'm sorry guys, I was very busy with work this year. Gonna check webpack, rollup pretty sonner.

[WouterVanherck]

@john-osullivan @mikelambert How exactly did you resolve it?
I tried to do it both ways but none ended up working:

module.exports = {
  module: {
    ...
    loaders: [
       ...
       {
         test: /node_modules(\/|\\)npm(\/|\\)bin(\/|\\)npm-cli\.js$/,
         loaders: ['shebang', 'babel']
       }
     ]
  }
  ...
};

and

module.exports = {
  module: {
    ...
    rules: [
        {
          test: path.resolve(String(path.appSrc), 'node_modules/npm/bin/npm-cli.js'),
          use: 'shebang-loader',
        }
      ]
  }
  ...
};

I've included these in my webpack.config.prod.js.
My #! was located in npm-cli.js.
O'm in "[email protected]"

[mir3z]

What is the status of this issue? It's more that one year old!

[heldr]

v2.0 FINALLY released https://github.com/data-uri/datauri/releases/tag/v2.0.0

Could any of you please recheck if it fixes webpack compatibility?