fix(builder): add lodash inside templates (#4368)

packages/builder/src/builder.js

@@ -429,6 +429,33 @@ export default class Builder {
       resolve: r
     })
 
+    // Prepare template options
+    let lodash = null
+    const templateOptions = {
+      imports: {
+        serialize,
+        devalue,
+        hash,
+        r,
+        wp,
+        wChunk,
+        resolvePath: this.nuxt.resolver.resolvePath,
+        resolveAlias: this.nuxt.resolver.resolveAlias,
+        relativeToBuild: this.relativeToBuild,
+        // Legacy support: https://github.com/nuxt/nuxt.js/issues/4350
+        _: new Proxy({}, {
+          get(target, prop) {
+            if (!lodash) {
+              consola.warn('Avoid using _ inside templates')
+              lodash = require('lodash')
+            }
+            return lodash[prop]
+          }
+        })
+      },
+      interpolate: /<%=([\s\S]+?)%>/g
+    }
+
     // Interpret and move template files to .nuxt/
     await Promise.all(
       templatesFiles.map(async ({ src, dst, options, custom }) => {
@@ -438,20 +465,7 @@ export default class Builder {
         const fileContent = await fsExtra.readFile(src, 'utf8')
         let content
         try {
-          const templateFunction = template(fileContent, {
+          const templateFunction = template(fileContent, templateOptions)
-            imports: {
-              serialize,
-              devalue,
-              hash,
-              r,
-              wp,
-              wChunk,
-              resolvePath: this.nuxt.resolver.resolvePath,
-              resolveAlias: this.nuxt.resolver.resolveAlias,
-              relativeToBuild: this.relativeToBuild
-            },
-            interpolate: /<%=([\s\S]+?)%>/g
-          })
           content = stripWhitespace(
             templateFunction(
               Object.assign({}, templateVars, {

test/fixtures/module/modules/basic/reverse.js

@@ -9,3 +9,6 @@ function $reverseStr(str) {
 Vue.prototype.$reverseStr = $reverseStr
 
 export default undefined
+
+// Legacy support: https://github.com/nuxt/nuxt.js/issues/4350
+// <%= _.toUpper('foo') %>

test/unit/module.test.js

@@ -1,6 +1,6 @@
 import { normalize } from 'path'
 import consola from 'consola'
-import { loadFixture, getPort, Nuxt, rp } from '../utils'
+import { loadFixture, getPort, Nuxt, Builder, rp } from '../utils'
 
 let port
 const url = route => 'http://localhost:' + port + route
@@ -69,6 +69,12 @@ describe('module', () => {
     expect(consola.warn).toHaveBeenCalledWith('addVendor has been deprecated due to webpack4 optimization')
   })
 
+  test('Lodash - deprecated', async () => {
+    const builder = new Builder(nuxt)
+    await builder.generateRoutesAndFiles()
+    expect(consola.warn).toHaveBeenCalledWith('Avoid using _ inside templates')
+  })
+
   // Close server and ask nuxt to stop listening to file changes
   afterAll(async () => {
     await nuxt.close()