Giters

riot / webpack-loader

Riot official webpack loader

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Prepended require throws error

SassNinja opened this issue · comments

commented

I'm currently replacing a project's gulp build with 100% webpack.
Within the project the riot tag files get compiled individually so the generated JS files can be included individually.

<script src="tags/tag1.js"></script>
<script>
  riot.mount('*');
</script>

So far this has been done with gulp-riot that internally uses riot.

With my webpack build the head of each file looks different and contains

var riot = require('riot')

This throws an error: Uncaught ReferenceError: require is not defined
I've found out this gets prepended to the outout within the tag-loader.

I guess it's needed for some use cases (as you probably wouldn't have added it otherwise) but for me it's breaking my code.
Would it be ok to add an option to disable this so I get only the compiled code?

Apart from that I've found out that the gulp-riot plugin introduced a custom option (I'm using) which also prepends code to the output:

if (options.modular) {
  compiledCode = `(function(tagger) {\n  if (typeof define === 'function' && define.amd) {\n    define(['riot'], function(riot) { tagger(riot); });\n  } else if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') {\n    tagger(require('riot'));\n  } else {\n    tagger(window.riot);\n  }\n})(function(riot) {\n${compiledCode}\n\n});`;
}

Hence same question here:
would a be ok to add the same option (modular) to the loader?

commented

This example is also webpack 100% and works without any problem https://github.com/riot/examples/tree/gh-pages/webpack . Your problem is probably somewhere else

commented

@GianlucaGuarini your linked example is using a deprecated version of webpack:
loaders and preloaders don't get defined like that anymore!

Would you please explain to me why the var riot = require('riot') gets prepended by the loader?

Maybe this helps me to understand the issue better.
However I'm afraid it's simply my way of individually including the precompiled tag files (see my HTML example above) that explains why I'm having a problem with the loader.

commented

Ok, I see the code / config has been updated accordingly. But I would recommend to update the README as well because it's still showing the deprecated setup.

However this doesn't solve my problem because I've a similar webpack config.
As I said the prepended require() of the loader is the reason for my problem.

I've added an additional option to disable it which fixes the issue.
I'll submit a PR later so you can see what I mean.

p.s.

I would recommend to replace query with options in your linked webpack example because query is deprecated (even if still supported)
https://webpack.js.org/configuration/module/#rule-options-rule-query

Rule.query is deprecated in favor of Rule.options and UseEntry.options.

commented

closing this issue more info