0

I have started learning webpack and have created a small project to see how it works. I am following this tutorial.

I have a .js file that I bundle togheter with webpack and display some text with function and jquery. A problem I have is this.

With this .js file

$ = require('jquery');
require('./dependentscript');

//import '../css/TestSheet.css';

document.getElementById("fillme").innerHTML = myfunction();

$('#fillmewithquery').html('This is some jquery text');

and Index.html

<body>
<h1>Entry point</h1>
<p id="fillme"></p>
<div id="fillmewithquery"></div>
<script src="~/js/bundle.js"></script>
</body>

This gives me what I want. Browser

But when I uncomment my import TestSheet.css I get this.

enter image description here

Why is some of my .js file functioning and why does jquery stop working?

Bojje
  • 419
  • 7
  • 24
  • 1
    Variables are defined using `var`, so you ned to do `var $ = require...`. I guess that you need to start with a JavaScript tutorial (including to learn to debug with the browser console) before going with WebPack. Do not start the house from the roof down. This is just a comment, not an answer, as this not seems your problem actually. With the code you have provided we do not have enough info to know what is happening. – Jorge Fuentes González Mar 22 '19 at 10:42

2 Answers2

1

In JavaScript world, you have heard these jargons:

  • IIFE
  • CommonJS
  • AMD (Asynchronous Module Definition)
  • UMD (Universal Module Definitions)
  • ESM (ECMAScript Module or ES6 module syntax)

These all are the patterns that have different syntax or styles to get one or multiple .js files (also known as a module) into another file and use its functionalities.

But every pattern has much more functionality and different from others.

You could read more on every pattern on this link.

You should have to know that NodeJS is using CommonJS standards which helps to define specific APIs for the web server, desktop and command line applications.

Because NodeJS is crafted for servers, not for browsers.

So we are using CommonJS standards to get our jQuery file and work only for the browser.

window is a global object of the browser not for the server, So behind the scenes CommonJS pattern get our jQuery module and attach on the browser with alias $ or jQuery.

That's why your browser is not throwing an exception.

The one-line statement on the whole scenario is:
Please use NodeJS server APIs for the browser.

Syntax to get module by using CommonJS:

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

Keep in mind that ESM syntax for getting module is also converted to CommonJS pattern.

Read more on this link.

Get module by using ESM (ECMAScript Module or ES6 module syntax):

import $ from 'jquery';
window.$ = window.jQuery = $;
Ahmad Hussnain
  • 266
  • 1
  • 4
0

Try:

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

require('./dependentscript');

//import '../css/TestSheet.css';

document.getElementById("fillme").innerHTML = myfunction();

$('#fillmewithquery').html('This is some jquery text');
Saqib Shahzad
  • 982
  • 12
  • 28
JMendoza
  • 1
  • 2