jQuery is not defined in angular/webpack site

Question

Hi: Could someone please explain to me why jQuery is not defined? It's part of the vendor.js file (webpack) and is mentioned in it hundreds of times in vendor.js, such as * jQuery JavaScript Library v2.2.4 so it is definitely loaded.

It makes no sense why jquery-ui can't see it, but I've had weeks of this rubbish with Angular 2. In the old days (1 month ago) you made sure you loaded a file before the rest and you were sorted.

Sure I can get the 2 dependents (UI & jasny) to run if include 'actual' <script>hardrive/bla/jquery.js in the _Layout.shtml, but whats the point if the webpack is also including it in the vendor file?

All part of a bigger problem of getting an simple old

.animation = $({
    countNum: from
})

to run, which I've been at 2 weeks now, which already works in angularjs. WebPack files:

    const path = require('path');
    const webpack = require('webpack');
    const merge = require('webpack-merge');
    const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;

    module.exports = (env) => {
        // Configuration in common to both client-side and server-side bundles
        const isDevBuild = !(env && env.prod);
        const sharedConfig = {
            stats: { modules: false },
            context: __dirname,
            resolve: { extensions: [ '.js', '.ts' ] },
            output: {
                filename: '[name].js',
                publicPath: '/dist/' // Webpack dev middleware, if enabled, handles requests for this URL prefix
            },
            module: {
                rules: [
                    { test: /\.ts$/, include: /ClientApp/, use: ['awesome-typescript-loader?silent=true', 'angular2-template-loader'] },
                    { test: /\.html$/, use: 'html-loader?minimize=false' },
                    { test: /\.css$/, use: ['to-string-loader', 'css-loader'] },
                     { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' },

                    //{
                    //    test    : /\.(png|jpg|jpeg)$/,
                    //    include : path.join(__dirname, 'img'),
                    //    loader  : 'url-loader?limit=25000&name=images/[name].[ext]'
                    //},
                    //{test: /\.png$/, loader: 'file?name=images/[name].[ext]',},
                ]
            },
            plugins: [
                new CheckerPlugin(),
              new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }),
            ]


        };






        // Configuration for client-side bundle suitable for running in browsers
        const clientBundleOutputDir = './wwwroot/dist';
        const clientBundleConfig = merge(sharedConfig, {
            entry: { 'main-client': './ClientApp/boot-client.ts' },
            output: { path: path.join(__dirname, clientBundleOutputDir) },
            plugins: [
                new webpack.DllReferencePlugin({
                    context: __dirname,
                    manifest: require('./wwwroot/dist/vendor-manifest.json')
                })
            ].concat(isDevBuild ? [
                // Plugins that apply in development builds only
                new webpack.SourceMapDevToolPlugin({
                    filename: '[file].map', // Remove this line if you prefer inline source maps
                    moduleFilenameTemplate: path.relative(clientBundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
                })
            ] : [
                // Plugins that apply in production builds only
                new webpack.optimize.UglifyJsPlugin()
            ])
        });

        // Configuration for server-side (prerendering) bundle suitable for running in Node
        const serverBundleConfig = merge(sharedConfig, {
            resolve: { mainFields: ['main'] },
            entry: { 'main-server': './ClientApp/boot-server.ts' },
            plugins: [
                new webpack.DllReferencePlugin({
                    context: __dirname,
                    manifest: require('./ClientApp/dist/vendor-manifest.json'),
                    sourceType: 'commonjs2',
                    name: './vendor'
                })
            ],
            output: {
                libraryTarget: 'commonjs',
                path: path.join(__dirname, './ClientApp/dist')
            },
            target: 'node',
            devtool: 'inline-source-map'
        });

        return [clientBundleConfig, serverBundleConfig];
    };

    const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const merge = require('webpack-merge');


module.exports = (env) => {
    const extractCSS = new ExtractTextPlugin('vendor.css');

    const isDevBuild = !(env && env.prod);
    const sharedConfig = {
        stats: { modules: false },
        resolve: { extensions: [ '.js' ] },
        module: {
            rules: [
                { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, use: 'url-loader?limit=100000' }
            ]
        },
        entry: {
            vendor: [
                '@angular/common',
                '@angular/compiler',
                '@angular/core',
                '@angular/http',
                '@angular/platform-browser',
                '@angular/platform-browser-dynamic',
                '@angular/router',
                '@angular/platform-server',
                'angular2-universal',
                'angular2-universal-polyfills',
                'bootstrap',
                'bootstrap/dist/css/bootstrap.css',
                'es6-shim',
                'es6-promise',
                'event-source-polyfill',
                'jquery',
                'zone.js',
            ]
        },
        output: {
            publicPath: '/dist/',
            filename: '[name].js',
            library: '[name]_[hash]'
        },
        plugins: [
            new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)
            new webpack.ContextReplacementPlugin(/\@angular\b.*\b(bundles|linker)/, path.join(__dirname, './ClientApp')), // Workaround for https://github.com/angular/angular/issues/11580
            new webpack.IgnorePlugin(/^vertx$/) // Workaround for https://github.com/stefanpenner/es6-promise/issues/100
        ]
    };

    const clientBundleConfig = merge(sharedConfig, {
        output: { path: path.join(__dirname, 'wwwroot', 'dist') },
        module: {
            rules: [
                { test: /\.css(\?|$)/, use: extractCSS.extract({ use: 'css-loader' }) },
                { test: require.resolve('jquery/jquery'), loader: 'expose?jQuery!expose?$' }
            ]
        },
        plugins: [
            extractCSS,
            new webpack.DllPlugin({
                path: path.join(__dirname, 'wwwroot', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ].concat(isDevBuild ? [] : [
            new webpack.optimize.UglifyJsPlugin()
        ])
    });

    const serverBundleConfig = merge(sharedConfig, {
        target: 'node',
        resolve: { mainFields: ['main'] },
        output: {
            path: path.join(__dirname, 'ClientApp', 'dist'),
            libraryTarget: 'commonjs2',
        },
        module: {
            rules: [ { test: /\.css(\?|$)/, use: ['to-string-loader', 'css-loader'] } ]
        },
        entry: { vendor: ['aspnet-prerendering'] },
        plugins: [
            new webpack.DllPlugin({
                path: path.join(__dirname, 'ClientApp', 'dist', '[name]-manifest.json'),
                name: '[name]_[hash]'
            })
        ]
    });

    return [clientBundleConfig, serverBundleConfig];
}

Answer 1

I fixed it by adding <script src="~/lib/jquery/dist/jquery.js"></script> to the index.cshtml.

So now I have full jquery loaded TWICE vendor.js and index.cshtml.

Ridiculous.

Whats the point of all this angular streamlining and code shrinking if doing things like this are unavoidable to get a simple 360 image rotation going.

Answer 2

Firstly, in your webpack configuration's plugins section, add the different providers for JQuery as such:

plugins: [
    ...
    new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery'
    })
]

Then to ensure that all the modules use the same jquery version, add this to your configuration's resolve section:

resolve: {
    ...
    alias: {
        // Force all modules to use the same jquery version.
        'jquery': path.join(__dirname, '../node_modules/jquery/src/jquery')
    }
}

Answer 3

In Webpack Configuration have used jquery provideplugin like this, If not use this

new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })