Update Examples

[bowbahdoe]

I am currently going through the examples to load in the google closure library and I am getting errors with webpack 3.6.0. It is possible I am doing something wrong, but I think the webpack configs are simply out of date.

[bowbahdoe]

On that note, I could also use some guidance on getting google-closure-compiler to work, though that is not an issue with the project itself

[eXaminator]

I can't help you with the closure compiler as I haven't used it in years (and never with webpack). But I will have a look at webpack 3.6 support (I think it should work, but I'll check tonight).

[bowbahdoe]

Oops, my bad. I meant the Google closure library.

[eXaminator]

Sadly I didn't get to it yesterday and I won't get to it today. But please ensure that you took a look at the webpack2 example as I would expect that to also support webpack3.

As for closure lib, make sure that you add all the loader configuration etc. as shown in my closure lib examples.

Nevertheless I'll take a look at this asap and maybe I'll add a webpack3 closure lib example if time permits.

[eXaminator]

I just added a working example with es6, webpack3 and closure-loader. Please check if it helps you.

[bowbahdoe]

I am still not getting it to work. I haven't tried the example from the repo yet, but when I copy pasted the relevant config to my webpack config I get a "goog.provide is not a function" error.

Maybe you will see something I don't, so I am attaching my webpack config. Ill try running the examples in the repo tomorrow, though I trust that they probably work as advertised

const { resolve } = require('path')
const BundleTracker = require('webpack-bundle-tracker')
const {
  TsConfigPathsPlugin
} = require('awesome-typescript-loader')
const { CheckerPlugin } = require('awesome-typescript-loader')
const webpack = require('webpack')
const pathUtil = require('path');
const SRC = resolve(__dirname, 'src/')
const DIST = resolve(__dirname, 'assets/bundles')

module.exports = {
  plugins: [
    new BundleTracker({filename: './webpack-stats.json'}),
    new TsConfigPathsPlugin({
      configFileName: 'tsconfig.json'
    }),
    new CheckerPlugin(),
    new webpack.ProvidePlugin({
      goog: 'google-closure-library/closure/goog/base.js',
    })
  ],
  devtool: 'source-map',
  entry: {
    bundle: ["babel-polyfill", resolve(SRC, 'index.js')],
  },
  resolveLoader: {
    modules: [pathUtil.resolve(__dirname, 'node_modules')],
  },
  output: {
    path: DIST,
    filename: '[name]-[hash].js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  module: {
    rules: [
      {
        test: /google-closure-library\/closure\/goog\/base/,
        loaders: [
          'imports-loader?this=>{goog:{}}&goog=>this.goog',
          'exports-loader?goog',
        ],
        },
        // Loader for closure library
        {
          test: /google-closure-library\/closure\/goog\/.*\.js/,
          loader: 'closure_loader',
          options: {
            es6mode: true,
            paths: [
              __dirname + '/node_modules/google-closure-library/closure/goog',
            ],
          },
            exclude: [/google-closure-library\/closure\/goog\/base\.js$/],
        },
      {
        test: /\.tsx?$/,
        loader: 'awesome-typescript-loader'
      },
      {
        test: /src\/\.jsx?$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      },
      {
        test: /\.wisp$/,
        loader: 'wisp-loader'
      },
      {
        test: /\.(s?[ac]ss)$/,
        use: [{
            loader: "style-loader" // creates style nodes from JS strings
        }, {
            loader: "css-loader" // translates CSS into CommonJS
        }, {
            loader: "sass-loader" // compiles Sass to CSS
        }]
      }
    ]
  }
}

[bowbahdoe]

I am getting the same error when running the new example

[eXaminator]

The example is working for me, even with the newest closure lib version.

The problem I see with your config above is, that every file that requires a closure module (i.e. a file with a goog.provide in it) needs to go through the loader too, so in this case probably your tsx and jsx files.

[bowbahdoe]

Okay so for every example i am getting the exact same error. I am using node v8.3.0 and npm version 5.5.1. Other than that, I am at a loss as to what could be causing the discrepancy. I followed the instructions in the readme for running examples from a fresh pull.

[eXaminator]

Ok, I really can't reproduce the exact error you have (though I'm using node 8.4 for my tests, but it shouldn't make a difference I guess).

Try these exact steps:

• Remove the node_modules directory from both the closure-loader root directory and the examples/es6-webpack3-closure-lib directory
• Run npm install in the closure-loader directory (this is needed for the examples to run, as it says in the readme)
• Run npm install in the examples/es6-webpack3-closure-lib directory
• Run npm start in examples/es6-webpack3-closure-lib and go to http://localhost:8080

These exact steps work for me with node 8.4.0 and npm 5.5.1 on my Mac. If they don't work for you I really don't know how to help :(

[bowbahdoe]

Okay I think i narrowed down the issue some. None of the examples work on my windows 10 machine, but when i run them on linux subsystem for windows they work fine.

[eXaminator]

Ok, I see. That is strange. I guess I may use slashes in some places for matching paths. Could you experiment some more for me please? I don't have a windows machine for developing at hand.

Could you look into dependencyMapBuilder.js:67 and replace the slashes in the glob pattern with backslashes? This is just a wild guess though.

Also, could you add a catch call for the promise at dependencyMapBuilder.js:26? That way you might be able to get an error message if one is thrown and maybe webpack catches it somehow and doesn't output the actual error.

[deej81]

I had the same issue, and changing the slashes fixed it for me on windows (changed the slashes in the example webpack configs)

[bowbahdoe]

I haven't had time to go through the issue yet, but simply changing the slashes in the glob in the code itself didn't resolve the issue. For the meantime I will do as you say @deej81

[eXaminator]

I changed the usage of path.join() at the mentioned line anyway in hope it helps a bit. As you haven't reported any further changes I will close this issue.