Webpack compatibility

[zedtux]

I'm migrating an app from bower to webpack, and I'm struggling on this lib.

I know it is no more maintained, and I have already checked the existing issue (especially the #104), but I'm trying the proposed solution, it doesn't work.

I'm opening this issue in order to build, with your help if you'd like, a working config that anyone coming with Webpack can use.

As of now, I have installed the imports-loader and added it to my webpack config

Disclaimer: I'm migrating a Rails application, so I'm using the Webpacker gem to do so, which explain the files architecture.

Here is my config/webpack/environment.js file :

const path = require('path')
const webpack = require('webpack')

const { environment } = require('@rails/webpacker')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  moment: 'moment',
  ...
}))

environment.loaders.append('ng-img-crop-full-extended', {
  test: require.resolve('ng-img-crop-full-extended'),
  use: 'imports-loader?define=>false,exports=>false'
})

environment.loaders.append('js', { test: /\.js$/,
  exclude: /node_modules/,
  use: [
    {
      // Auto require AngularJS 1.x templates in Webpack style
      // (See https://github.com/YashdalfTheGray/auto-ngtemplate-loader)
      loader: 'auto-ngtemplate-loader'
    },
    {
      // Require a whole directory of trees in bulk (I.e: `//@require ...`)
      // (See https://github.com/shanhaichik/webpack-require-loader)
      loader: 'required-loader',
      options: {
        import: ['angular']
      }
    }
  ]
})

environment.loaders.append('html', { test: /\.html$/,
  exclude: /node_modules/,
  use: [
    {
      // Include AngularJS templates in the Webpack bundle and preload the template cache.
      // (See https://github.com/WearyMonkey/ngtemplate-loader)
      loader: 'ngtemplate-loader',
      options: {
        relativeTo: 'javascript/'
      }
    },
    {
      loader: 'html-loader'
    }
  ]
})

environment.loaders.append('img', {
  test: /\.(jpe?g|png|gif|svg|ico)$/i,
  use: ['file-loader']
})

module.exports = environment

The webpack compilation is working fine, but in my app when I'm using the crop (which looks like working on the page), I have the following error in my console :

ReferenceError: ColorThief is not defined
    at Object.getDominantColor (ng-img-crop.js:3058)
    at updateResultImage (ng-img-crop.js:3273)
    at ng-img-crop.js:3385
    at ng-img-crop.js:3318
    at Scope.$eval (angular.js:18134)
    at Scope.$apply (angular.js:18238)
    at ng-img-crop.js:3317
    at angular.js:20097
    at completeOutstandingRequest (angular.js:6066)
    at angular.js:6350

Looking a bit further in the source code of this library, I saw that to get the module exported with module.exports I need to have define to false and exports === 'object' so I'm then trying to change the params like the following :

environment.loaders.append('ng-img-crop-full-extended', {
  test: require.resolve('ng-img-crop-full-extended'),
  use: 'imports-loader?define=>false,exports=>"object"'
})

But still the same 😞 (and I'm restarting webpack each time).

Can you please guide me own order to get it working please ?

Thank you !

[CrackerakiUA]

I don't have experience with webpack on the level to help you with this :(

[zedtux]

Thank you @CrackerakiUA for your comment.

@ybian you seem to had a working webpack import. I tried your solution but didn't work for me. Do you have a working Webpack 4 way please?

[zedtux]

@CrackerakiUA what are you using instead of Webpack?

[CrackerakiUA]

In fact currently I am using Webpack with use of Angular 7, I am not longer working with Angular 1. When I was using Angular 1, I was simply working with it without Webpack

[zedtux]

Well I'm using Webpack 4 as described in my issue so can you please help me ? :)

[CrackerakiUA]

I have like 0 experience with it, Angular 7 all config for that

[zedtux]

I see, thank you.