webcom and webpack2 - Githubissues

oussamaABID commented 7 years ago

how to config webcom in webpack2 ?

const HtmlWebpackPlugin = require('html-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const webpack = require('webpack');
const path = require('path');
const config = {
    entry: './src/app.js',
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'main.js'
    },
    watch: true,
    node: {
        console: true,
        fs: 'empty'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: [/node_modules/],
            use: [{
                loader: 'ng-annotate-loader'
            }, {
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                },
            }],
        }, {
            test: /\.css$/,
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                use: "css-loader"
            })
        }, {
            test: /\.(sass|scss)$/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: ['css-loader', 'resolve-url-loader', 'sass-loader']
            })
        }, {
            test: /\.html$/,
            use: 'html-loader'
        }, {
            test: /\.(png|gif|jpg|svg)$/,
            use: 'file-loader?&publicPath=&name=[name]-[hash].[ext]',
        }, {
            test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
            use: 'file-loader?&publicPath=&name=[name]-[hash].[ext]',
        }]
    },
    plugins: [
        new ExtractTextPlugin({
            filename: '[name].css',
            allChunks: true,
        }),
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
};

module.exports = config;

my import : import webcom from 'webcom';

package:

 "dependencies": {
    "angular": "1.6.4",
    "angular-animate": "^1.6.4",
    "angular-aria": "^1.6.4",
    "angular-cookies": "^1.6.2",
    "angular-material": "^1.1.3",
    "angular-messages": "^1.6.4",
    "angular-sanitize": "^1.6.4",
    "angular-translate": "^2.14.0",
    "angular-translate-loader-static-files": "2.14.0",
    "angular-translate-storage-local": "2.14.0",
    "angular-ui-router": "^0.4.2",
    "axios": "^0.16.1",
    "enumify": "^1.0.4",
    "fs": "0.0.1-security",
    "har": "^1.0.0",
    "jquery": "^3.2.1",
    "leaflet": "^1.0.3",
    "net": "^1.0.2",
    "tls": "0.0.1",
    "webcom": "^1.2.4"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-es2015": "^6.24.1",
    "css-loader": "^0.28.1",
    "d3": "^4.9.1",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "ng-annotate": "^1.2.1",
    "ng-annotate-loader": "^0.6.0",
    "node-sass": "^4.5.3",
    "resolve-url-loader": "^2.0.2",
    "rimraf": "2.6.1",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.17.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.5.1"
  }

error : Uncaught Error: process.binding is not supported

oussamaABID commented 7 years ago

bypasses with url in index.html (webpack2 compatibility) : <script type='text/javascript' src='https://datasync.orange.com/libjs/latest/webcom.js'></script>

gbrd commented 7 years ago

Hi oussama,

The webcom npm "package" contains 2 libraries : webapp + node.js. By default node.js one seems to be imported and it cannot work in the browser.

There is 2 solutions:

In your webpack configuration file you can add:

module.exports = {
...
  resolve: {
        alias: {
                webcom: 'webcom/webcom.js'
        }
  }
...
}

webcom-components / webcom-npm

webcom and webpack2 #1