We Keep Coding

Build error occurred ReferenceError: describe is not defined > During now.sh deployment

I'm using now.sh to deploy my nextjs (React) app. And the build is failing due to this error:
Build error occurred
ReferenceError: describe is not defined
Not sure why this started happening, here is my .babelrc
{
"env": {
"development": {
"compact": false,
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
},
"production": {
"presets": [
"next/babel",
"#zeit/next-typescript/babel"
],
"plugins": [
["styled-components", {"ssr": true, "displayName": true}],
["#babel/plugin-proposal-decorators", {"legacy": true}]
]
},
"test": {
"compact": false,
"presets": [
"#babel/preset-typescript",
["next/babel", {"preset-env": { "modules": "commonjs" }}]
],
"plugins": [
["styled-components", { "ssr": true, "displayName": true }],
["#babel/plugin-proposal-decorators", { "legacy": true }],
["babel-plugin-sass-vars"]
]
}
}
}
package.json
"engines" : {
"node" : ">=8.10.0 <11.0.0"
},
"scripts": {
"dev": "NODE_ENV=development next -p 7777",
"build": "NODE_ENV=production next build",
"start": "next -p 7777",
"test": "NODE_ENV=test jest --no-cache",
"test-watch": "NODE_ENV=test jest --watch --no-cache",
"coverage": "NODE_ENV=test jest --coverage",
"update-snap": "NODE_ENV=test jest --updateSnapshot"
},
Full log:
running "npm run now-build"
> moon.holdings#2.0.0 now-build /tmp/7418164
> next build
Creating an optimized production build ...
> Using external babel configuration
> Location: "/tmp/7418164/.babelrc"
> Build error occurred
ReferenceError: describe is not defined
at Module.kAI8 (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:63996:1)
at __webpack_require__ (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:23:31)
at module.exports.+3sd.exports.__esModule (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:91:18)
at Object.<anonymous> (/tmp/7418164/.next/serverless/pages/__tests__/about.test.js:94:10)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
npm
ERR! code ELIFECYCLE
The first test where the describe is used:
import React from 'react'
import { shallow } from 'enzyme'
import toJson from 'enzyme-to-json'
import About from '../about.tsx'
describe('<About /> component', () => {
describe('rendering', () => {
const wrapper = shallow(<About />);
it('should render a component matching the snapshot', () => {
const tree = toJson(wrapper);
expect(tree).toMatchSnapshot();
expect(wrapper).toHaveLength(1);
expect(wrapper.contains(<About/>));
});
});
});
next.config
module.exports = (phase, { defaultConfig }) => {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
}
]
}
// Note: Nextjs provides webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
return config
}
// ✅ Put the require call here.
const withTypescript = require('#zeit/next-typescript')
const withCSS = require('#zeit/next-sass')
// withCSS({target: 'serverless'})
return withTypescript(withCSS({
webpack(config, options) {
return config
}
}))
}

I removed the tests that covered the /pages directory. NextJS used pages for routing. Not sure why that was causing the problem, ran coverage and looks like pages wasn't necessary to cover.
Hoping for a better answer from someone at the NextJS / Now.sh team, and I'll select that.

Easy fix: https://github.com/zeit/next.js/issues/3728#issuecomment-523789071
pageExtensions: ['page.tsx']

An option that allows the tests inside pages folder:
change webpack settings direct in next.config.js
module.exports = {
webpack: (config, { webpack }) => {
config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
return config
}
}
It is ignoring whatever __tests__ folder found on the build process.

If you are looking to colocate non-page files with pages in the /pages directory, you can use Custom Page Extensions to force your pages to have a file extension of .page.js. Once that is setup, Next.js will ignore any files that don't have .page in the file extension.
next.config.js
module.exports = {
// Force .page prefix on page files (ex. index.page.tsx) so generated files can be included in /pages directory without Next.js throwing build errors
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}
I wrote some docs for this use case that have yet to be merged https://github.com/vercel/next.js/pull/22740. The docs link above now contains these changes.
The original Github issue where this was discovered is https://github.com/vercel/next.js/issues/3728#issuecomment-895568757.

SyntaxError: Unexpected token { when trying to run protractor test

I'm trying to run a very simple set of protractor tests, however, when i run the "yarn e2e" command, i got the following error:
import { browser } from "protractor";
^
SyntaxError: Unexpected token {
The code in protractor-config.ts where the error occurs is:
import { browser } from "protractor";
exports.config = {
allScriptsTimeout: 20000,
specs: ['./spec/spec.ts'],
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 720000
},
capabilities: {
'browserName': 'chrome',
},
directConnect: true,
framework: 'jasmine',
SELENIUM_PROMISE_MANAGER: false,
onPrepare: function () {
browser.driver.manage().window().setSize(1280, 1024);
}
}
What i've tried:
Changing
import { browser } from "protractor";
to
const browser = require('protractor');
Changing "target": "es5" to es6 in my tsconfig.json
But non of this options made any difference!
Anyone has any idea on what can this be? Thanks a lot in advance.

Your protractor.config.js should contain :
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json' // if you have one
});
This part is the one telling protractor how to handle typescript. This part of code is from angular-cli, so I suggest you to create a new angular app from scratch with ng new myapp and compare the config (protractor is working by default)

Use 'request-promise-native' package in DialogFlow inline editor

I am making a POST request to a webservice. The code for POST request is kept in a separate function.The function call from my intent function to the external function is asynchronous.So i am using Promises to achieve synchronicity.The problem here is that when i am importing request-promise-native inside my inline editor it's throwing error as TypeError: Cannot read property 'prototype' of undefined.
But when i tried it in my local workstation which has node js version 9.11.1 it worked fine.The Node JS version in DialogFlow is >=6.0.Is there any other dependency has to be added to it?
Can anyone please explain why this happens?
UPDATE:
I changed the node engine to 6.14.3 and the dependency for the module'request-promise-native' in package.json as "request-promise-native":"v1.0.5".But still no luck.The below is my code:
var doco;
var rp = require('request-promise-native');
var myJSONObject = {
"inputs" : [ {
"name" : "<name>",
"value" : <value>
} ]
};
var orchName = 'TEST05';
postData = JSON.stringify(myJSONObject);
return networkCall(postData,orchName).then((response)=>{
console.log('response is'+response)
console.log("+++++++++++++=DOCO=+++++++++ "+response);
doco = doco1;
//agent.add(`Order number is ${doco1}`);
}).catch((response) => {
console.log(`ERROR: `+response);
});
console.log('doco'+doco);
function networkCall(postData, orchName) {
return new Promise((resolve,reject) =>{
var options = {
method: 'post',
uri: '<URL>',
body: myJSONObject,
auth: {
'user': 'usr',
'pass': 'pwd'
},
json: true
};
return rp( options )
.then( body => {
// var test = JSON.stringify(body)
var doco =body.ServiceRequest1.subforms.z_DOCO_137.value;
console.log('DOCO '+doco);
resolve( doco );
})
.catch( err => {
console.log('FAILED'+err);
reject( err );
});
});
}
The error is thrown once i deploy the code in inline editor.The error is:
The deployment of your Cloud Function failed:
Function load error: Code in file index.js can't be loaded.
Is there a syntax error in your code?
Detailed stack trace: TypeError: Cannot read property 'prototype' of undefined
at module.exports (/user_code/node_modules/request-promise-native/node_modules/request-promise-core/configure/request2.js:34:47)
at Object.<anonymous> (/user_code/node_modules/request-promise-native/lib/rp.js:15:1)
at Module._compile (module.js:577:32)
at Object.Module._extensions..js (module.js:586:10)
at Module.load (module.js:494:32)
at tryModuleLoad (module.js:453:12)
at Function.Module._load (module.js:445:3)
at Module.require (module.js:504:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (/user_code/index.js:17:23)

The request-promise-native package requires the request package as a co-dependency. So you need to explicitly add this to the package.json tab in the Dialogflow editor.
Here is the package.json that works for me:
{
"name": "dialogflowFirebaseFulfillment",
"description": "This is the default fulfillment for a Dialogflow agents using Cloud Functions for Firebase",
"version": "0.0.1",
"private": true,
"license": "Apache Version 2.0",
"author": "Google Inc.",
"engines": {
"node": "~6.0"
},
"scripts": {
"start": "firebase serve --only functions:dialogflowFirebaseFulfillment",
"deploy": "firebase deploy --only functions:dialogflowFirebaseFulfillment"
},
"dependencies": {
"actions-on-google": "2.0.0-alpha.4",
"firebase-admin": "^4.2.1",
"firebase-functions": "^0.5.7",
"dialogflow": "^0.1.0",
"dialogflow-fulfillment": "0.3.0-beta.3",
"request-promise-native": "^1.0",
"request": "^2.87"
}
}
Don't forget that, in addition to having the correct package, you will need to upgrade the project to a paid account. The free Firebase "Spark" plan does not allow network access outside of Google's network. You can upgrade to the "Blaze" plan which is pay-as-you-go, but does have a free tier which is sufficient for most development and testing purposes.

Webpack Dynamic Config Loading Fails

I was following instructions to import config dynamically based on an environment variable using webpack. This is according to official documentation:
https://webpack.js.org/plugins/normal-module-replacement-plugin/
Example:
File: package.json
{
"name": "03_branching",
"version": "1.0.0",
"description": "",
"main": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
"develop": "webpack --mode development --watch",
"build": "webpack --mode production"
},
"author": "",
"license": "ISC",
"dependencies": {
"string-replace-loader": "^2.1.1",
"webpack": "~4.6.0"
},
"devDependencies": {
"webpack-cli": "^2.0.15"
}
}
Example:
File: configLoader.js
const fs = require('fs');
console.log('fs', fs);
const config = fs.readFileSync("./config/APP_ENV.json");
const properties = JSON.parse(config);
console.log("Environment: " + properties.environment);
console.log("HomepageUrl: " + properties.homepageUrl);
File: webpack.config.js
"use strict";
const webpack = require('webpack');
const path = require('path');
module.exports = function(env) {
console.log('NODE_ENV: ', env.NODE_ENV); // 'local'
let newEnv = 'local';
if (env.NODE_ENV !== undefined) {
newEnv = env.NODE_ENV;
}
console.log('newEnv', newEnv);
return {
target: 'web',
node: {
fs: 'empty'
},
entry: path.join(__dirname, "./", "configLoader.js"),
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
libraryTarget: 'var',
library: 'EntryPoint'
},
module: {
rules: [
{
test: /configLoader\.js$/,
loader: 'string-replace-loader',
options: {
search: 'APP_ENV',
replace: `${newEnv}`,
flags: 'i'
}
}
]
}
}
};
File: config/local.json
{
"environment": "local",
"homepageUrl": "http://localhost:8080"
}
File: config/production.json
{
"environment": "production",
"homepageUrl": "http://www.google.com"
}
I try and run node dist/bundle.js but I get the following error...
➜ 03_branching git:(master) ✗ node dist/bundle.js fs {} /Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1
(function (exports, require, module, __filename, __dirname) { var EntryPoint=function(n){var e={};function o(r){if(e[r])return e[r].exports;var t=e[r]={i:r,l:!1,exports:{}};return n[r].call(t.exports,t,t.exports,o),t.l=!0,t.exports}return o.m=n,o.c=e,o.d=function(n,e,r){o.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:r})},o.r=function(n){Object.defineProperty(n,"__esModule",{value:!0})},o.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return o.d(e,"a",e),e},o.o=function(n,e){return Object.prototype.hasOwnProperty.call(n,e)},o.p="",o(o.s=1)}([function(n,e){},function(n,e,o){const r=o(0);console.log("fs",r);const t=r.readFileSync("./config/production.json"),c=JSON.parse(t);console.log("Environment: "+c.environment),console.log("HomepageUrl: "+c.homepageUrl)}]);
TypeError: r.readFileSync is not a function
at Object.<anonymous> (/Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:686)
at o (/Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:186)
at /Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:600
at Object.<anonymous> (/Users/jamesmurphy/Development/Repos/clients/PacktPublishing/NodeJsDesignPatterns/Chapter08/exercises/03_branching/dist/bundle.js:1:609)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.runMain (module.js:604:10)
It works if I run
node configLoader.js
But if I run the webpack command:
webpack --env.NODE_ENV=production
node dist/bundle.js
It fails... How do you bundle all of the node core modules here using webpack? I'm using webpack version 4.6.0
Cheers!

You are using the wrong target.
readFileSync only exists in node. But you are compiling for web.
If you change your target to node, everything should work.
I suspect you don't want to load the config file on runtime, but compile different option depending on the environment?
If so, take a look at webpack-define-plugin. You can put your config in a variable without loading a file on runtime.
This will then also work in the browser.

How to copy a folder over SSH with Gulp?

I have been experimenting with gulp lately, and have had a lot of success, but now I am stumped.
I have gulp building everything, and I want to upload a folder afterwards. I have created a deploy task for this using gulp-scp2:
gulp.task('deploy', ['clean', 'build'], function() {
var privateKeyPath = getUserHome() + '/.ssh/id_rsa';
gulp.src('public/dist')
.pipe(scp({
host: 'myhost',
username: 'user',
dest: '/home/user/test',
agent: process.env['SSH_AUTH_SOCK'],
agentForward: true,
watch: function(client) {
client.on('write', function(o) {
console.log('write %s', o.destination);
});
}
})).on('error', function(err) {
console.log(err);
});
});
Unfortunately, when I do this, I get the following error:
Error: Content should be buffer or file descriptor
How can I copy a folder over SSH using gulp?

I did end up finding a solution by leveraging the node scp2 library:
scpClient = require('scp2');
gulp.task('scp', [], function (cb) {
scpClient.scp('local_folder', {
"host": "remote_host",
"port": "remote_port",
"username": "username_on_remote",
"path": "/path/on/remote",
"agent": process.env["SSH_AUTH_SOCK"],
"agentForward": true
}, cb)
});

As the previous answer, i ended using a node version directly, this one will work in gulp 4+ way:
First install the lib (Be sure of installing locally in the project, the global version doesnt work for using in gulp file):
npm install scp2
Then in the gulp file:
var scpClient = require('scp2');
function deploySCP2(){
return scpClient.scp(paths.buildAll, {
"host": "host",
"username": "username",
"password": "password",
"path": "path"
}, function(err) { })
}
This will work rightaway.