Webpack uglify cannot recognize "`"

[aliakakis]

Hello,

It seems that template literals when used inside .rt files are not being transpiled afterwards properly, hence the error from uglify for webpack. Is there a workaround apart from creating a state based variable? Thank you for all the help.

[nippur72]

template literals seem to work normally, can you provide a failing example?

This works for me in the playground:

template:

<div rt-scope="42 as a; 1 as b">{`hello ${a+b}`}</div>

output:

hello 43

I guess there must be something wrong in your build/transpile pipeline, make sure that the output from RT (which is ES6) is transpiled into ES5 by some way (babel, typescript etc).

[aliakakis]

Hello thank you for the reply. Everything is fine up until the uglify plugin when running the a webpack production build.

This is the code missing some elements for brevity:

<Link className="link-button" to={`/ride-details/${this.props.id}`}>

I can see in the final build that template literals are not transpiled

And my webpack 3 build is the following, for .rt and babel:

{
    test: /\.rt$/,
    use: {
        loader: 'react-templates-loader?modules=es6',
    },
},
{
    test: /\.js$/,
    exclude: /(node_modules)/,
    use: [
        {
            loader: 'babel-loader',
            options: {
                presets: [
                    'es2015',
                    'stage-0',
                    'react',
                ],
                plugins: [
                    'transform-decorators-legacy',
                    'transform-decorators',
                    'lodash'
                ],
            },
        },
    ],
},

[nippur72]

with this config the output of .rt is going directly into the build without passing from babel.

The reason why you are not seeing any error is that during development you are using an ES6 browser and you are also skipping uglify-js which as far as I remember it's ES5 only.

Solution: chain babel after react-templates, with something similar to this:

// first set this variable:
const your_babel_loader = {
            loader: 'babel-loader',
            options: {
                presets: [
                    'es2015',
                    'stage-0',
                    'react',
                ],
                plugins: [
                    'transform-decorators-legacy',
                    'transform-decorators',
                    'lodash'
                ],
            };

// and then:

{
    test: /\.rt$/,
    use: [ your_babel_loader, 'react-templates-loader?modules=es6' ]    
},
{
    test: /\.js$/,
    exclude: /(node_modules)/,
    use: [ your_babel_loader ]
},

I've not tested it, but it should work.

[aliakakis]

...It did....

You sir helped me greatly. What can I say... I am still learning :-) Thank you for all the help.