Stuff I'm Up To

Technical Ramblings

I Hate Internet Explorer — August 1, 2018

I Hate Internet Explorer

I just can’t seem to get it to die! Probably something to do with all those users out there spoiling my day and continuing to use it in Windows 7 – sadly in our corporate environment.

I’ve spent a few days with a problem showing “Syntax Error” in IE11 when my project runs just great in Edge, FireFox and Chrome.

After a lot of digging around in the components I’ve used I narrowed it down to one specific 3rd party component from npmjs. So I took a trawl through into the Github of the project and opened an issue. Turns out I’m not the only one seeing the problem. I guess everyone else is using more sensible browsers.

I got a great reply that pointed me to modifying my webpack config so it transpiled into IE11 compatible code. I’d already used polyfills like es6-promise and es6-object-assign and then babel-polyfill, but this obviously wasn’t enough.

The pointer was aimed at webpack. Now Laravel uses it’s own layer above webpack – Laravel-Mix, but with a bit more Googling I figured out how to add the necessary webpack config into mix to get it transpiling correctly.

Add the targets-webpack-plugin using yarn (or npm) as a “devDependency”

$ yarn add targets-webpack-plugin -D

In my webpack.mix.js file:

const TargetsPlugin = require('targets-webpack-plugin')

...

mix.webpackConfig({
  plugins: [
    new TargetsPlugin({
      browsers: ['last 2 versions', 'chrome >= 41', 'IE 11'],
    }),
  ]
})

Repackage my app with yarn run dev and IE11 is silent!

The internet is full of wonderfully helpful people. To those that post responses, write blogs or any kind of feed – I thank you all.

 

Advertisements
vue-cli 3 and hmr — July 18, 2018

vue-cli 3 and hmr

What a nightmare I’ve had. Trying to figure out how to run a dev server with HMR (Hot Module Reload) on a virtual host that has two interfaces – one NAT and one Host Only adapter!

Why the two interfaces? Well I have to NAT one out from the guest OS so traffic looks like it comes from my business PC that uses network authentication. But NAT means I have no access back to the dev server as it uses an ip of 10.0.2.15 (typical virtual box behaviour).

So to gain access to the dev server from my host I then use another NIC in the virtual guest that uses the “Host Only Adapter”. So this ends up using a static IP address of 192.168.56.2 – again typical virtual box behaviour.

So I can access the virtual guest as http://192.168.56.2:8080 to connect to the webpack dev server, but then I see errors in the client browser console:

+ [HMR] Waiting for update signal from WDS
+ [WDS] Disconnected

When I expanded the [WDS] Disconnected message I could see the clue being:

./node_modules/webpack-dev-server/client/index.js?http://10.0.2.15:8080/sockjs-node

It’s obviously telling my client to use the wrong network interface for the websockets/sockjs connection used by HMR.

How to fix it was a mystery. I had to trawl until I found the @vue\cli-service\lib\serve.js file. In here it starts the sockjs with options like this:

const publicOpt = projectDevServerOptions.public
const sockjsUrl = publicOpt ? `//${publicOpt}/sockjs-node` : url.format({
  protocol,
  port,
  hostname: urls.lanUrlForConfig || 'localhost',
  pathname: '/sockjs-node'
})

This meant I could look to the vue-config.js​ file in the root of my project ad set the ‘public’ variable accordingly. I also set the proxy option to handle the fact I’m not developing on the same server.

// vue.config.js
module.exports = {
  devServer: {
    useLocalIp: false,
    proxy: 'http://localhost:8080',
    public: '192.168.56.2:8080',
  }
}

Then I started the dev server using yarn, I could also use npm I guess.

$ yarn serve
...
DONE Compiled successfully in 1002ms 21:39:53

  App running at: 
  - Local: http://localhost:8080/ 
  - Network: http://10.0.2.15:8080/

Now when I edit code and webpack recompiles, the HMR works and the browser updates!

 

Webpack, ReactJS and SASS — December 21, 2016
Making Sense of React & Webpack — December 20, 2016

Making Sense of React & Webpack

So I came across React and thought it looked pretty cool. But it made my head hurt trying to figure it out. Everything seems so difficult to start with. I just couldn’t understand how you’d write a JSX file and still somehow the browser would be able to execute it.

I had to eventually think back about how CoffeeScript works. The browser doesn’t execute a JSX file. It needs to be “transpiled” into JavaScript in much the same way as CoffeeScript is “transpiled” into JavaScript. It’s just the tools to do it are all freakishly new to me and that’s what I had to get my head around.

Continue reading