When setting the library target to 'umd' in the package.json file, the expectation was that the outputs would be usable via a <script> tag and if no module system was available it would be attached to the window. However, this does not seem to be the case, or there may have been a mistake somewhere. It's time for another set of eyes to take a look.
The content of the package.json file is as follows:
{
"name": "scoped-css",
"version": "2.1.9",
"description": "Scoped CSS in two easy steps.",
"main": "lib/index.js",
"author": "Joshua Robinson",
...
The webpack.config.js file contains the configuration:
// => webpage.config.js
var webpack = require('webpack');
...
However, when including the module via a <script> tag and trying to use the code, an error is encountered:
standalone.html:21 Uncaught ReferenceError: Style is not defined
The standalone.html file includes the following code:
<!-- standalone.html -->
<html>
<head>
<script src="../dist/scoped-css.js"></script>
...
Suspicion arises that the issue might be related to how exports are handled in the src/index.js file before building to dist/scoped-css.js.
At the bottom of src/index.js (before build) lies:
// Index.js
...
...
...
var Style = {
scoped: scoped,
CSS: CSS
};
module.exports = Style;
The goal is for ../dist/scoped-css.js to be included in a script tag and be called as Style.CSS({}) or Style.scoped() (attached to window). Additionally, jest testing confirms that the module loads and is callable without any issues, indicating that the code itself is functioning correctly. The question remains whether something is amiss with the webpack configuration?
This situation calls for an extra pair of eyes to identify any oversight. Your time and expertise in resolving this puzzle are greatly appreciated.