Twing 2.2.0 not working in browser

[m-hall]

Browser: Chrome 72 tested
Version: 2.2.0

Steps:
Load twing into browser
run the following code

const templateLoader = new TwingLoaderArray({
    'template': '<p>{{ content }}</p>'
});
const twing = new TwingEnvironment(templateLoader);

console.log(twing.render('template', { content: 'it works'}));

See that you get this error in the console:
ERROR TypeError: crypto.createHash is not a function
On this line https://github.com/ericmorand/twing/blob/7ab824a6394d8e4036ad9717fe414ecb1fb33c18/src/lib/environment.ts#L366

Summary:
I believe what's happening here, is that the crypto class that is normally provided by node doesn't exist when in the browser, so require is returning an empty object in it's place.

[ericmorand]

Hi @m-hall,

Can you give me more details on how you include Twing into the browser? Are you bundling it yourself or are you using the CDN version?

I just conducted a test with Twing@2.2.0 CDN build and your code run perfectly - of course by using Twing.TwingLoaderArray and Twing.TwingEnvironment.

[ericmorand]

Now that I think about it, you are probably bundling Twing yourself and crypto support is missing from your bundler configuration. CDN's version of Twing if bundled with Browserify which comes with a crypto library for the Browser. Which explains why it works.

[ericmorand]

After looking at the source code, it seems crypto is only used to create sha256 hashes. It's an overkill to use node.js whole crypto lib just for that.

[ericmorand]

@m-hall Can you give Twing@2.2.1 a try?

[m-hall]

Nice, you work fast! I'll check it shortly :)

You were right, I was not using the CDN version. I am loading it through node.js to work with a webpack/typescript combination.

[ericmorand]

It makes sense. It puts into light the weakness of our browser tests that can't detect that kind of issues. All the tests were successful because browserify is used to create the test bundle and browserify comes with a lot of polyfills that handle things that are not handled out of the box by webpack.

I'll have to find a way to make browser test suite more reliable.

[m-hall]

It appears to now be returning undefined with the same code I originally mentioned :(

[ericmorand]

What error message do you receive?

When I setup a project with the following entry point:

const {TwingLoaderArray, TwingEnvironment} = require('twing');

const templateLoader = new TwingLoaderArray({
    'template': '<p>{{ content }}</p>'
});
const twing = new TwingEnvironment(templateLoader);

console.log(twing.render('template', { content: 'it works'}));

And execute webpack-cli to bundle that entry point:

webpack index.js

I obtain a viable bundle that unfortunately throw the following error once executed by the browser:

Uncaught Error: Unable to register extension "" as it is already registered.

This is an issue that was supposed to be fixed months ago (see #205) but that is still present with webpack (see webpack-contrib/uglifyjs-webpack-plugin#269). When I fix this issue (EDIT: by disabling webpack minifying) and execute the webpack command again, the bundle works perfectly in the browser and log <p>it works</p> in the browser console.

[corneliusweiss]

note: with babel-minify you can switch of mangleing to get it working

const MinifyPlugin = require("babel-minify-webpack-plugin");
...

mode: 'production',
optimization:{
    minimize: false, // disables uglify -> we use babel minify
},
plugins: [
    new MinifyPlugin({
        keepClassName: true,
    })
],

[ericmorand]

Thanks for the workaround. I will have this fixed for good next week.

[corneliusweiss]

just for reference, we now use terser instead of babel-minify as babel-minify has issues with source-maps and it's author seems to have moved to terser:

webpack-contrib/babel-minify-webpack-plugin#68

const TerserPlugin = require('terser-webpack-plugin')

module.exports = merge(common, {
    devtool: 'source-map',
    mode: 'production',
    optimization:{
        minimizer: [new TerserPlugin({
            sourceMap: true,
            terserOptions: {
                keep_classnames: true, // twing problem @see https://github.com/ericmorand/twing/issues/314
            },
        })],
    },