ERROR in file.js from UglifyJs SyntaxError: Unexpected token: name (xxxxx) [file.js:line,column]

Recently whilst upgrading from Webpack to Webpack2, I ran into this error which took a while to debug.

I was seeing the following error output:

ERROR in file.js from UglifyJs
SyntaxError: Unexpected token: name (DateRange) [file.js:line,column]
I went into my webpack config and turned minification off so that I could see the file which was being generated:

plugins: [
    ...
    new webpack.LoaderOptionsPlugin({
      minimize: false,
      debug: false
    }),
    new webpack.optimiz...
Read More

Conditionally load multiple Polyfills using Webpack, Promises and Code Splitting

For my latest react project, I wanted to be able to polyfill certain features which are missing in older browsers, yet not include them in my final code bundle if the browser the user is using already supports that feature.

This was a great problem for webpack's code splitting feature to solve!

After a quick google, I found a post from Ian Obermiller which set me on the correct path, however the post didn't expand on how to load multiple polyfills conditionally.

For example:
  • Safari is missing...
Read More

Output filename not configured error from Webpack

I couldn't find an answer to this simple issue, so I thought I'd quickly post one myself.

Whilst creating a new ReactJS app, I wanted to use Webpack to build all of my modules into a single bundle.

I had installed it globally by running npm install webpack -g and I had included it in my project by running npm install webpack --save-dev.

However, on running the webpack command, I was seeing the following output:
Output filename not configured.

The solution

Turns out it was simple. I had missed th...
Read More

Using PrismJS with RequireJS and loading plugins asynchronously

Whilst developing my site, I came across a beautiful syntax highlighter called PrismJS which I wanted to use, however, it is not built out of the box for use with AMD APIs such as RequireJS.

I wanted to enable a few features with PrismJS and RequireJS, namely, the ability to:
  • Load PrismJS through RequireJS and have it highlight code elements.
  • Dynamically load the necessary language files so that code blocks can be highlighted with the correct language definitions.
  • Load plugins so that I could use...
Read More

Search Engine Optimization Techniques for HTML, CSS and JavaScript

Search Engine Optimization, or SEO for short, is the process of naturally increasing the page rank of a website on search engines.

For businesses, this is a huge thing; If someone searches for a product or a service, a business wants their company to appear first on search engines such as Google, as people will most likely then buy from them.

This post will cover ways a web developer can use certain HTML, CSS and JavaScript techniques whilst creating a website to hopefully increase his page ra...
Read More