Elixir Wallaby uncaught JavaScript error

If you see this error, you may likely have a JS error that has crept in to your JS build you did not realize:

** (Wallaby.JSError) There was an uncaught JavaScript error:

My full error ended up resolving to an app.js file, which took me a second to realize had some new code on a pre-login page. This ended up explaining why the login tests were failing when the login form was loaded (who would have thought?).

The generic nature of the js file (app.js) made it so I did not initially recognize some local code was calling a function on a non-existent element from a DOM query, which was resolving to undefined (so the classList property being referenced was failing).

 ** (Wallaby.JSError) There was an uncaught JavaScript error:
     
webpack:///./js/app.js? 115:22 Uncaught TypeError: Cannot read property 'classList' of null

I have found that issues like this will likely have more to do with local code. The default logger settings are somewhat helpful, and the stack trace eventually resolved to (wallaby 0.28.0) lib/wallaby/chrome/logger.ex:8: Wallaby.Chrome.Logger.parse_log/1.

It took me a minute to realize the app.js here was our local webpack build, not some internal Wallaby build of some sort. If Wallaby is truly the issue, you can try and update dependencies, and I would note you would something more similar to a Chromedriver session id error, as with https://n8williams.com/devblog/general_dev/elixir-wallaby-and-chromedriver-issue-runtimeerror-invalid-session-id.

To this point I have been very pleased with Wallaby, I cannot recommend it enough for acceptance testing, etc!

local -A invalid option, the outdated bash A option issue

TL/DR; Make sure your bash or shell program is up to date, with something like brew install bash. Especially if you are on a Mac, and have updated the OS recently.

If you see this error: local: -A: invalid option

There are a number of things that may be triggering this. For me, it was an asdf install of an plugin for a new version of Node.js. Or in a nutshell, an issue trying to update my version of node.

When I did some digging into the line of a node install util, I found there was a bash script that as calling something using an -A option in lib/utils.sh: line 35: local: -A: invalid option.

I was curious why -A would not work, and when I issued the command bash --version, from my shell it was a version from 2007! I can’t believe I have gotten away with using a 2007 shell for so long.

The new Mac OS versions use zsh/the Z shell, and one option is to use this. I did not heed Mac’s warning: The default interactive shell is now zsh … See: https://apple.stackexchange.com/questions/371997/suppressing-the-default-interactive-shell-is-now-zsh-message-in-macos-catalina

As I use a lot of bash aliases, I was a bit wary of switching to the z shell, so I just made sure to install an updated version of bash using homebrew. I plan on looking into the Z shell sometime soon and maybe maybe the switch. It appears there are some niceties to zsh vs bash. There are some great resources on making the switch, my favorite being: https://carlosroso.com/the-right-way-to-migrate-your-bash-profile-to-zsh/

nginx client_body_temp failed 13: Permission denied error

With nginx and homebrew installs, you may see the following error if you have installed nginx with homebrew (or otherwise) and are seeing errors when you try an upload files using wordpress or otherwise:

nginx/client_body_temp/0000000007" failed (13: Permission denied) where the number of the temp directory may be different.

The /usr/local/var/run/nginx folders may have been set with restrictive users or permissions (or depending on your setup something like /opt/homebrew/var/run/nginx). Cd into that folder with cd /usr/local/var/run/nginx and run sudo chown -R <your_admin_user>:admin client_body_temp/ to allow the right processes to be able to upload the files.

Homebrew postgres and psql error: could not connect to server icu4c error

10:36:54.086 [error] Postgrex.Protocol (#PID<0.522.0>) failed to connect: ** (DBConnection.ConnectionError) tcp connect (127.0.0.1:5432): connection refused - :econnrefused

psql: error: could not connect to server: could not connect to server: No such file or directory<br>Is the server running locally and accepting<br>connections on Unix domain socket "/tmp/.s.PGSQL.5432"?

Even if brew services restart postgres is successful, there may be an error occurring, view your log, which for me with homebrew’s install was tail -n 50 /usr/local/var/log/postgres.log. If you see something like the following, you may need to switch a package version back to something older:

dyld: Library not loaded: /usr/local/opt/icu4c/lib/libicui18n.64.dylib<br>Referenced from: /usr/local/opt/postgresql/bin/postgres<br>Reason: image not found

For me, after an OS update, the icu4c package had been changed, so I needed to switch it back, using brew switch icu4c 64.2

Elixir Wallaby and Chromedriver issue: (RuntimeError) invalid session id

 1) feature does X (BaseApp.UIWeb.Test.Acceptance.TheTest)
     apps/ui/test/ui_web/acceptance/the_testexs:13
     ** (RuntimeError) invalid session id
     code: |> session_login()
     stacktrace:
       (wallaby) lib/wallaby/httpclient.ex:136: Wallaby.HTTPClient.check_for_response_errors/1
       (wallaby) lib/wallaby/httpclient.ex:56: Wallaby.HTTPClient.make_request/5
       (wallaby) lib/wallaby/webdriver_client.ex:254: Wallaby.WebdriverClient.visit/2
       (wallaby) lib/wallaby/driver/log_checker.ex:6: Wallaby.Driver.LogChecker.check_logs!/2
       (wallaby) lib/wallaby/browser.ex:963: Wallaby.Browser.visit/2
       (ui) test/support/acceptance/rivendell_wallaby_session.ex:73: Rivendell.UIWeb.Test.Support.Acceptance.RivendellWallabySession.session_login/1

The solution for this was to run: brew upgrade chromedriver (this used to be brew cask upgrade chromedriver). You may possibly need to update your chrome browser. The comments on this issue/repo were very helpful: https://github.com/elixir-wallaby/wallaby/issues/468.

Generally, it would seem it is a good idea to keep your chromedriver in sync with your updates to Chrome (run brew upgrade chromedriver when you update Chrome.

More general errors will likely be an issue with your local code as opposed to Wallaby or package dependencies 🙂 See: https://n8williams.com/devblog/general_dev/elixir-wallaby-uncaught-javascript-error

Codeship apt-get update errors and yarn and command returned a non-zero code 100

TL/DR: apt-key adv --refresh-keys --keyserver keyserver.ubuntu.com (use with caution) may go a long ways in getting your build to work.

Some noteworthy things after learning about the interplay between codeship, docker, ubuntu apt-get, and the yarn package. This resolution may help with issues dealing with:

  • Invalid signatures with the yarn ubuntu package.
  • Errors running apt-get update
  • Errors updating the Dockerfile for a CodeShip build
  • Dealing with CodeShip build steps updates and cached steps

For now, I’m noting my crazy sequence of realizations in reverse order

A failed step on the server with CodeShip may not be very enlightening. If you see an apt-get install -y <some-package> returned a non-zero code: 100 error, you may need to run the step locally to see the full error using jet steps.

If you see the above error, it may be due to a command in your steps if the RUN command in the Dockerfile includes apt-get update -y

The apt-get update may be failing because a package includes an invalid key. This may be the yarn package, spitting out GPG error: https://dl.yarnpkg.com/debian stable InRelease: The following signatures were invalid: EXPKEYSIG XXXXXXXX Yarn Packaging <yarn@dan.cx>. If you add apt-key adv --refresh-keys --keyserver keyserver.ubuntu.com this may resolve that issue. See https://github.com/yarnpkg/yarn/issues/7866

You may see a codeship error like:
2 errors occurred:
* (step: dependencies_X-deps) error loading services during run step: failure to build Image{ name: "static.X", dockerfile: "/<project-path>/docker/app/Dockerfile", cache: true }: The command '/bin/sh -c apt-get update -y   && wget https://dl.google.com/linux/direct/google-chrome-stable_beta_amd64.deb   && apt-get install -y ./google-chrome-stable_beta_amd64.deb   && rm google-chrome-stable_beta_amd64.deb   && rm -rf /var/lib/apt/lists/*' returned a non-zero code: 100

With codeship steps, if you edit the Dockerfile RUN command, and it is equivalent to a previous version of that RUN command, that command will be cached and may not trigger an error you expect. In this case it was more painful when trying to add a separate and new RUN command with apt-get install -y libxss1 while updating the build to have a chrome install with the libXss dependency included.

The ubuntu stable package may no longer work for you if you are using puppeteer in conjunction with a headless chrome browser to generate screen captures/pdfs on a server. It can be a bit painful to locate a list of package versions for chrome on ubuntu, and sticking with stable and adding a apt-get install -y libxss1 to your RUN command is one way to go. This may stem from seeing something like:
/app/pdf-thing/node_modules/puppeteer/.local-chromium/linux-XXXXX/chrome-linux/chrome: error while loading shared libraries: libXss.so.1: cannot open shared object file: No such file or directory

Error on Startup and Boot Failure for MacOS After Converting SSD to APFS. Running bless to place boot files failed.

I wanted to offer some more clarity on converting a hard drive to the AFPS format, for upgrading from Mojave to Catalina, or something similar. I could not upgrade without doing so. I was surprised at how technical the process was, but I think it’s manageable for most people. Though terrifying to have to adjust boot settings (back in my windows days this was a non-recoverable screwup at times). After a successful conversion to AFPS, I could not boot out of recovery mode and would get the “Running bless to place boot files failed” error.

First convert the Hard Drive

  1. Any backing up, I would make sure to do before converting. I put that off, and ended up being fairly nervous when my OS would no longer boot 🙂 Luckily, I ended up back with the same OS with a converted hard drive and proceeded to upgrade.
  2. For me, I had to boot in recovery mode to get the option I needed. Restart your Mac and hold down Cmd+R to boot into recover mode.
  3. Launch the Disk Utility app from the options.
  4. Select your hard drive and then its main volume, then unmount it (I had to do this to get the convert option to be enabled).
  5. Select Edit then Convert to APFS
  6. It should convert after about two minutes and you can reboot.

At this point, I restarted and found my Mac would always boot into recovery mode. When I selected the main hard drive and tried to restart from that, I got an error, indicating “Running bless to place boot files failed.” There were some helpful sites, but the instructions didn’t quite match up for me, and the more technical part of creating a folder with the hard drive’s unique id was not very clear. The following are the steps I took, but see: https://www.tecklyfe.com/boot-failures-after-converting-macos-ssd-to-apfs/ and https://apple.stackexchange.com/questions/308531/could-not-create-a-preboot-volume-for-apfs-install (You may be able to do this in a shorter number of steps than me)

  1. In recovery mode open the terminal from the menu Utilities -> Terminal.
  2. List the hard drive info with diskutil apfs list
  3. If you’re like me you already have a preboot volume. But apparently you may need to create one with diskutil apfs addVolume disk"Disk Number here" apfs Preboot -role B
  4. The steps in the articles I was seeing got less clear to me here. Props to the existing info, but I wanted to add my two cents. At this point I needed to copy existing preboot files into another preboot folder. Before I could use a copy command, I had to create a new preboot folder with the UUID of the hard drive volume disk2s1 (or whatever your main apfs partition is listed as in the diskutil afps list command. UPDATE: The UUID to use should be the that of the primary partition (and not the pre-boot partition) – thanks to opherko. The command I needed was: mkdir -p /Volumes/Preboot/<The UUID, a long alphanumeric id>/System/Library/CoreServices
  5. At that point I could do cp -RP /Volumes/<Your hard drive name here>/System/Library/CoreServices /Volumes/Preboot/<The UUID>/System/Library/CoreServices. It would seem to me you are copying your old, functioning boot files into a new boot folder for your converted hard drive. Perhaps temporarily until another process adjusts things. Make sure, as noted above, that the UUID is the primary partition’s UUID.
  6. Now you can run the update commands for the preboot. Replace disk2s1 with your disk: diskutil apfs updatepreboot disk2s1
  7. Run the bless utility: bless --folder /Volumes/<Your hard drive name here>/System/Library/CoreServices --bootefi --verbose
  8. You may need to use the Startup program to assign the boot partition when exiting the utilities.
  9. At this point I was very relieved that upon trying to reboot, you should no longer get the error “Running bless to place boot files failed.” and the OS should start. For me, I was back in Mojave, with all my same files on a hard drive that was now formatted for AFPS, where I could proceed to install Catalina. Hopefully this informs a successful end result for someone else out there.

Using php with Angular 2 and Laravel

I’ve been using Angular 1.0 for the last few projects, but I wanted to get familiar with Angular 2. I found the process of getting up and running with php a bit annoying.

SUMMARY: With php, you can use the ‘5 Minute Quickstart’ tutorial google offers with some adjustments to asset locations, config paths, node packages, and automated tasks (most notably the typescript transpilation process) to get setup with Laravel and Angular 2. Google uses a node app, and a lite node server. I wanted to avoid this and use php and laravel to deploy assets, etc. and use Angular 2. Conceptually:

  1. Make sure you understand which packages you will need. The best would be just to copy the ones from the Angular 2 google tutorial, though not quite all of them will be used (we will let Laravel handle the typescript transpilation).
  2. Make sure you understand where the hell all the files should go. You need to change google’s root level file structure of the example node app to a php laravel app where public assets reside in the nested ‘public’ folder within the root app. Paths in the files need to be adjusted accordingly.
  3. Make sure you understand how to adjust the automated tasks in the gulp file, and in the laravel-elixir-typescript node package. This is mainly about how to get your typescript files to end up in the right place when they are compiled to javascript.

See https://angular.io/docs/ts/latest/quickstart.html

I’ve tried to explain my experience in a way that will make things easier for someone trying to setup any general php app with angular 2 at any point in the near future. The packages, versions, and syntax of the code may vary in the future, but if you understand what changes you need to make conceptually, it will hopefully be easy to use Google’s tutorials and documentation for the next while. My experience was based on the somewhat murky guide at https://www.codetutorial.io/laravel-5-and-angular-2-beta-setup. The video is at https://www.youtube.com/watch?v=dohhsLSbkYA. I found I needed some clarifications on paths, etc. and that the packages used and versions were outdated or unexplained. I tweaked the tutorial found at https://angular.io/docs/ts/latest/quickstart.html. I was using Laravel 5.2.43. I’ve tried to follow the steps in the google tutorial.

Step 1: Create and configure the Laravel and Angular 2 project

I took a laravel project and figured out where to put all the files from the google Angular 2 tutorial. Some files from the tutorial could just go in the root of the app. The following things need to be adjusted:

a) Create a laravel project, and change into that directory. Mine is called laravel_angular2.

laravel new laravel_angular2
cd laravel_angular2

I’ve gotten used to setting up a virtual host and getting the app and and running with php and apache. Hopefully you’ve already made it to this point.

b) Package definition and config files. Copy the typings.json file into the root of your project. Ignore the tsconfig.json file, as we will use laravel an gulp to handle typescript transpiling and serving the app. Put the systemjs.config.js file in the /public folder of laravel. UPDATE THE PATHS in this file to point to / instead of /node_modules, your public folder. The package.json file needs to be merged with existing laravel one. You can essentially copy the dependencies and devDependencies portions of the tutorial package.json file into the package.json file in the root of your laravel app. You can tweak the packages, perhaps remove the lite server and typescript stuff that google includes. As for me, I just left all the packages google indicated in there. I have yet to figure out a good way to determine, when cloning projects, how the hell to figure out which packages are unnecessary, and how to tell which should just go in the devDependencies section when the list gets real long and full of unfamiliar packages. The scripts and other sections of the tutorial package.json can be ignored since, again, we will use laravel an gulp to handle typescript transpiling and serving the app.

c) Install packages. npm install should work fine. Somehow I always screw the packages up and get error messages, but nothing helpful on how to avoid this comes to mind. Hopefully you only get some warnings. I could not get npm run typings install to work, as per the tutorial. I don’t know if this is because we removed it from the scripts section of the package.json file. You can try adding this section and run the command. I suspect it had more to do with the fact that the console wanted a cli package for typings. Do npm install typings --global to get the global cli package, then typings install. We need to deal with the typings folder and move it into public. I didn’t get errors in my quickstart app without moving the typings folder, but it should be moved to the public folder. So, move the ‘typings’ folder into /public. You could probably use a gulp task command to do this. You could also figure out how the hell to adjust google’s code to put this typings folder in public automatically. I never got to that point. The typings.json config file made no sense to me and I don’t know any of the conventions on using that package. I actually don’t even know what the typings folder is used for, but figured it should go in the public folder.

Ignore the ‘Helpful scripts’ section, as we will use laravel and gulp to run the typescript transpiling and the server.

Steps 2-4: Our first Angular 2 component, etc.

Instead of creating an ‘app’ root folder, make a folder ‘/resources/assets/typescript/app’ to house your typescript files. They will be transpiled to the /public/app folder later. Put all the files mentioned in the tutorial in steps 2-4 there.

Step 5.0: Making sure our Angular 2 typescript transpiles using Laravel and Gulp

I couldn’t get google’s typescript transpiler to work easily, and I wanted to use the one included in the laravel packages. The tricky part about this is to avoid jamming on the javascript into a single app.js file. There are 2 ways I’ve done this. The second way is demonstrated in the tutorial on codetutorial.io (and the youtube video), but it involves modifying a node package in the node_modules folder, which is fragile. In my opinion.

  1. Use the gulp typescript library and make a task for transpiling the javascript from typescript.
    var ts = require('gulp-typescript');
    ...
    gulp.task('typescript', function(){
      var assetPath = './' + elixir.config.assetsPath;
      var search = '/typescript/**';
      var options = {
          // If you use ES5, see http://stackoverflow.com/questions/35660498/angular-2-cant-find-promise-map-set-and-iterator
          "target": "ES6",
          "module": "system",
          "moduleResolution": "node",
          "sourceMap": true,
          "emitDecoratorMetadata": true,
          "experimentalDecorators": true,
          "removeComments": false,
          "noImplicitAny": false,
      };
      var outputFolder = 'public';
      return gulp.src(assetPath + search)
        .pipe(ts(options))
        .pipe(gulp.dest(outputFolder))
    });
    
    ... //in the elixir function
        mix.task('typescript', 'resources/assets/typescript/**'); 
    • This is the weird custom step I found useful. It deals with getting the transpiling to work using the npm package elixir-typescript. This involves tweaking the package code, and will not be committed to the git app as it involves editing the node_modules folder. I don’t know if there is a better way to do this, but this idea comes from the aforementioned tutorial. Add the elixir-transcript package. Version 1.1.2: npm install elixir-typescript@1.1.2 I haven’t added this to the package.json file, as we are editing the package manually, but you could add it. Be aware that on certain npm actions, the required update that makes our transpiling work may be overwritten and break.
    • In the file /node_modules/elixir-typescript/index.js, comment out the concat line. //.pipe(concat(outputFileName)). This was on line 28 for me. This is so that when the typescript files are transpiled, they don’t all get mashed into one app.js file. Angular 2 would not like this. Every time you do npm install, you may have to redo this!
    • add the following to your gulp file. The first line was already there for me:<code>

      var elixir = require('laravel-elixir');
      var elixirTypscript = require('elixir-typescript');
      ...
      elixir(function(mix) {
      mix.typescript('app.js','public/app','/typescript/**/*.ts',{
        // If you use ES5, see http://stackoverflow.com/questions/35660498/angular-2-cant-find-promise-map-set-and-iterator
        "target": "ES6",
        "module": "system",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
      });

      Run gulp typescript to make sure it works. There should now be javascript files in /public/app. The paths here are weird and took me some tinkering to figure out. More on this later. These 3 steps were definitely the trickiest part of the whole process. It’s more about if you’re keen on learning how to use typescript with your php projects, as similar steps would probably need to be used in any tool that uses typescript on the frontend.

Step 5

Setup the welcome/index/homepage of your Laravel app to load the Angular 2 app. Instead of making an index.html as per the tutorial, update your home view, or whatever you want to run the angular 2 app, to use the html that is in the tutorial. We will need to modify the url paths since the packages used by Angular 2 reside in node_modules folder, which is not in /public. We also need to copy the used packages into the /public folder so we can reference them from the script tags. We will accomplish this by:

  1. Input the html, etc. from the tutorial. In my /resources/views/welcome.blade.php file I added Loading... in the content div. Copy the script tags from the tutorial into the head section.
  2. Add the following commands to the Laravel gulp file in the elixir function:<code>

    mix.copy('node_modules/core-js', 'public/core-js');
    mix.copy('node_modules/reflect-metadata', 'public/reflect-metadata');
    mix.copy('node_modules/zone.js/dist/zone.js', 'public/zone.js/dist/zone.js');
    mix.copy('node_modules/systemjs', 'public/systemjs');

    The following 3 files are also necessary for the framework.

    mix.copy('node_modules/@angular', 'public/@angular');
    mix.copy('node_modules/angular2-in-memory-web-api', 'public/angular2-in-memory-web-api');
    mix.copy('node_modules/rxjs', 'public/rxjs');
  3. Remove references to node_modules from the script includes in your view file. For example, ‘node_modules/core-js’ should just be ‘core-js’. I edited my /resources/views/welcome.blade.php and removed all the ‘node_modules’ from the script tags. The systemjs.config.js file should already be in the public folder from Step 1. Again, note that you should remove reference to the ‘node_modules’ path in this systemjs.config.js.And with that, run gulp, hit your Laravel app’s url,and the quickstart app should load! You’ll probably want to add a gulp task to monitor changes to your typescript. And this is usually the point in a web post where I’m like ‘What the hell, this isn’t working and you seem to be missing some explanations.’ As I think of them, I’ll try and stay current and add in more explanations and pitfalls to avoid this.