0

I am using ES6, typeahead & webpack for my project.

Below is my webpack config file:

var path = require("path");
var HtmlWebpackPlugin = require('html-webpack-plugin');
var HtmlWebpackExcludeAssetsPlugin = require('html-webpack-exclude-assets-plugin');
var webpack = require("webpack");
var CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");

var extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
var extractSCSS = new ExtractTextPlugin('stylesheets/[name].css');

module.exports = {
    context: path.resolve(__dirname, 'src'),
    entry: '.',
    output: {
        path: path.resolve(__dirname, "builds/web"),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.js/,
        include: [
            path.resolve(__dirname, "src")
        ]
    }]
},
devtool: 'source-map',
resolve: {
    alias: {
        jquery: "jquery/src/jquery"
    },
    extensions: [".js",".json"]
},
plugins: [
    new HtmlWebpackPlugin({
        title: 'Custom template using Pug',
        template: 'index.pug',
        inject: true,
        excludeAssets: [/bundle.js/]
    }),
    new HtmlWebpackExcludeAssetsPlugin(),
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.Tether": 'tether'
    }),
    extractCSS,
    extractSCSS
]
};

In my bundle.js I am getting the required typeahead dependency which is causing issue. when I am injecting in my angular module it's throwing error.

app.js : (part of app.js code)

import "typeahead";

export class AppClass {
    constructor() {

        this.module = angular.module("appModule", ['typeahead']);

    }
}

dependencies:

"devDependencies": {
    "babel-preset-es2015": "^6.18.0",
    "copy-webpack-plugin": "^4.0.1",
    "html-webpack-exclude-assets-plugin": "0.0.3",
    "ng-sortable": "^1.3.7",
    "pug": "^2.0.0-beta6",
    "webpack": "^2.2.1",
    "webpack-append": "^0.1.2",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "angular": "1.5.6",
    "angular-messages": "1.5.7",
    "angular-slick-carousel": "^3.1.7",
    "angular-ui-bootstrap": "^0.14.3",
    "angular-ui-mask": "^1.8.7",
    "angular-ui-router": "^0.3.2",
    "babel-core": "^6.18.2",
    "babel-loader": "^6.2.7",
    "bluebird": "^3.4.6",
    "bootstrap": "4.0.0-alpha.2",
    "css-loader": "^0.25.0",
    "exports-loader": "^0.6.3",
    "extract-text-webpack-plugin": "^2.0.0-rc.0",
    "file-loader": "^0.9.0",
    "html-webpack-plugin": "^2.24.1",
    "jquery": "2.2.4",
    "json-loader": "^0.5.4",
    "lodash": "^4.17.0",
    "moment": "^2.17.1",
    "node-sass": "^3.11.2",
    "pug-loader": "^2.3.0",
    "sass-loader": "^4.0.2",
    "slick-carousel": "^1.6.0",
    "style-loader": "^0.13.1",
    "tether": "^1.4.0",
    "url-loader": "^0.5.7",
    "webcomponents-lite": "^0.6.0"
  }

I am guessing typeahead.js is normal library without export syntax and I am trying to import which it's not able to create a module functionality out of it.

Any idea? or anyone has faced same issue?

Samir
  • 691
  • 5
  • 22
  • as far as i can see typeahed.js is not angular module and you cannot put it as angular module dependency – happyZZR1400 Mar 30 '17 at 12:56
  • yes it is.. but we have created angular directive which is custom one.. which internally uses twitter typeahead library. – Samir Mar 30 '17 at 12:58
  • you can use non-angular libs (like jquery) inside angular directives : like: $('#the-basics .typeahead').typeahead(...) and other modules, but you cannot put it as dependancy – happyZZR1400 Mar 30 '17 at 12:59
  • I see what you are saying... but can you provide some example for better understanding. – Samir Mar 30 '17 at 13:10
  • may be you can provide here your packae.json so i can quickly get all the things running? – happyZZR1400 Mar 30 '17 at 13:12
  • I have added dependencies. – Samir Mar 30 '17 at 13:16
  • thanks, btw: i must point out that there are lot of angular implementations of typeahead like https://angular-ui.github.io/bootstrap/ which can be added as angular dependencies – happyZZR1400 Mar 30 '17 at 13:21
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/139501/discussion-between-happyzzr1400-and-samir). – happyZZR1400 Mar 30 '17 at 13:32

0 Answers0