This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.

  1. Forum
  2. FormTools Support
  3. Webpack and OctoberCMS. Framework fails to detect jQuery even though it's been loaded.
pratyushpundir6424
pratyushpundir6424

My webpack config looks like so:

const webpack = require('webpack');
const path = require('path');
var inProduction = (process.env.NODE_ENV === 'production');

const config = {
    entry: './themes/singularity/assets/js/main.js',
    output: {
        path: path.resolve(__dirname, './themes/singularity/assets/dist/js'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/,
                exclude: /node_modules/,
                use: ["sass-loader"]
            },

            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },

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

/** Minimize JS when in production */
if (inProduction) {
    config.plugins.push(
        new webpack.optimize.UglifyJsPlugin()
    );
}

module.exports = config;

Everything compiles fine but I keep getting JS console errors since framework.js from October can't seem to detect it still:

Uncaught Error: The jQuery library is not loaded. The OctoberCMS framework cannot be initialized.
    at framework.js:9

I know jQuery exists since I can interact with it in my custom JS and thru the JS console. Is jQuery provided by webpack only accessible in Modules instead of all scripts? That might be the issue. If yes, can anyone suggest how to handle this?

The body of my master layout looks like this:

<body>

    <!-- Flash Messaging -->
    <div id="flashmessages">{% partial "flash-message" %}</div>    

    <!-- Page Content -->
    <div class="wrapper">
        {% page %}
    </div>

    <!-- JS BEGINS -->
    <script type="text/javascript" src="{{ 'assets/dist/js/bundle.js'|theme }}"></script>
    {% framework extras %}
    {% scripts %}

</body>

Last updated

JeffGoldblum
JeffGoldblum

What version of jQuery are you loading, and is this happening because your bundle.js file isn't loading until after the framework.js file does due to file weight or the like?

KikoSeijo
KikoSeijo

Add this:

window.$ = window.jQuery = require('jquery');

to your script input file

themes/singularity/assets/js/main.js

1-3 of 3

You cannot edit posts or make replies: the forum has moved to talk.octobercms.com.