How to make webpack2 and the template loader + babel work without getting "Module build error: SyntaxError:" with "in strict mode (5: 0)"

I have an underscore pattern loader in my webpack2 configuration that is crowded with babel. It does not work at compile time because with used in code compiled by code. Here is the relevant part in my loaders in webpack.config.js :

I have this section under the bootloaders:

 { test: /\.html$/, use: [ { loader: 'babel-loader', query: { presets: [ ['es2015', { modules: false }], 'es2016', 'es2017', 'stage-3', ], }, }, { loader: 'ejs-loader', }, ], }; 

This is what I want and get:

 ERROR in ./src/table/row.html Module build failed: SyntaxError: 'with' in strict mode (5:0) 3 | var __t, __p = '', __e = _.escape, __j = Array.prototype.join; 4 | function print() { __p += __j.call(arguments, '') } > 5 | with (obj) { | ^ 6 | 7 | _.each(tableKeys, (k) => { ; 8 | __p += '\n <td>' + 

If I completely remove the babel part, it works, but the ES6 code does not overflow:

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

I also saw this question about removing strict mode and tried several things related to es2015 applying strict. I think I tried all the solutions in this question, including the hotpatching workaround, and I still get the same error. In the end, I tried this:

 { test: /\.html$/, use: [ { loader: 'babel-loader', query: { presets: [ ], }, }, { loader: 'ejs-loader', }, ], }; 

I, although this should do the same as without a byte pass, but here I get the same error. Somehow, without any presets, I get the same error.

EDIT

I also tried to get around this by passing variable to query , and I did this work with ejs-loader , however I am not looking for a solution in which all the templates should change.

I created a repository that illustrates the problem. The master branch launched the babel loader and works with with , while the transpile branch will compile errors even if { modules: false } is passed, and I have a branch called transpile-no-presets , where all the presets in the .json package are deleted and the error is still displayed.

+5
source share
1 answer

By default, Underscore .template places your data in scope using the with statement. See Underline Documents .

I believe the cleanest solution is ejs-loader not to compile with statements, but to use a temporary variable instead

 { loader: 'ejs-loader?variable=data', }, 

... and change your templates to a temporary variable reference.

From:

 <ul> <% _.each(test, (n) => { %> <li>This is line number <%- n %></li> <% }); %> </ul> 

in

 <ul> <% _.each(data.test, (n) => { %> <li>This is line number <%- n %></li> <% }); %> </ul> 
0
source

Source: https://habr.com/ru/post/1268133/


All Articles