mxmul / closure-loader

Webpack loader for Google Closure modules ✨
MIT License
29 stars 22 forks source link

Module build failed: Error: Can't find closure dependency goog.xxx #28

Closed jacobcui closed 7 years ago

jacobcui commented 7 years ago

Followed the example in es6-webpack2 I've found I can't make closure-loader work:

ERROR in ./node_modules/google-closure-library/closure/goog/crypt/sha1.js Module build failed: Error: Can't find closure dependency goog.crypt.Hash

my webpack.config.js is:

var HtmlWebpackPlugin = require('html-webpack-plugin'),
    webpack = require('webpack'),
    pathUtil = require('path');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  resolveLoader: {
    modules: ['closure-loader', pathUtil.resolve(__dirname, 'node_modules')]
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loaders: ['closure-loader'],
      },
    ]
  }
};

my js file is very simple:

import Sha1 from 'google-closure-library/closure/goog/crypt/sha1';

import _ from 'lodash';

function component() {
  var element = document.createElement('div');
  var sha1 = new Sha1();
  sha1.update("foobar");
  var hash = sha1.digest();

  element.innerHTML = _.join(['Hello', 'webpack', hash], ' ');

  return element;
}

document.body.appendChild(component());

Thanks!

eXaminator commented 7 years ago

I'll see if I can take a look at it later today!

eXaminator commented 7 years ago

I got your example to work. Your configuration is missing some parts, take a look at the closure lib examples.

Try this configuration (you will need imports-loader and exports-loader for this to work):

var HtmlWebpackPlugin = require('html-webpack-plugin'),
    webpack = require('webpack'),
    pathUtil = require('path');

module.exports = {
  entry: {
    app: './src/index.js'
  },
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist'
  },
  resolveLoader: {
    modules: ['closure-loader', pathUtil.resolve(__dirname, 'node_modules')]
  },
  module: {
    rules: [
      {
        test: /google-closure-library\/closure\/goog\/base/,
        use: [
          'imports-loader?this=>{goog:{}}&goog=>this.goog',
          'exports-loader?goog',
        ],
      },
      {
        test: /google-closure-library\/closure\/goog\/.*\.js/,
        loader: pathUtil.resolve(__dirname, '../..'),
        options: {
          paths: [
            pathUtil.resolve(__dirname, 'node_modules/google-closure-library/closure/goog'),
          ],
          es6mode: true,
        },
        exclude: [/google-closure-library\/closure\/goog\/base\.js$/],
      },
      {
        test: /\.js$/,
        loaders: ['closure-loader'],
      },
    ]
  },
  plugins: [
    new webpack.ProvidePlugin({
      goog: 'google-closure-library/closure/goog/base',
    }),
  ],
};
jacobcui commented 7 years ago

Thanks eXaminator with you suggestion and after adding exclude rule for project files it works!

      {
        test: /\/src\/.*\.js/,
        loaders: ['closure-loader'],
        exclude: [/node_modules/, /test/],
      },