-1

When starting server for my Hanami 2.2 web app, I am seeing following JS-related warnings:

20:21:42 assets.1 | [my_app] ▲ [WARNING] The CommonJS "module" variable is treated as a global variable in an ECMAScript module and may not work as expected [commonjs-variable-in-esm]
20:21:42 assets.1 | [my_app] 
20:21:42 assets.1 | [my_app]     app/assets/js/jquery.min.js:2:85:
20:21:42 assets.1 | [my_app]       2 │ ...ject"==typeof module.exports?module.exports=e.document?t(e,!0):f...
20:21:42 assets.1 | [my_app]         ╵                                 ~~~~~~
20:21:42 assets.1 | [my_app] 
20:21:42 assets.1 | [my_app]   This file is considered to be an ECMAScript module because the enclosing "package.json" file sets the type of this file to "module":
20:21:42 assets.1 | [my_app] 
20:21:42 assets.1 | [my_app]     package.json:4:10:
20:21:42 assets.1 | [my_app]       4 │   "type": "module",
20:21:42 assets.1 | [my_app]         ╵           ~~~~~~~~
20:21:42 assets.1 | [my_app] 
20:21:42 assets.1 | [my_app]   Node's package format requires that CommonJS files in a "type": "module" package use the ".cjs" file extension.
20:21:42 assets.1 | [my_app]

Node version: v18.19.1

NPM version: 9.2.0

What does that mean and how to get rid of the warnings?

My package.json looks like following

{
  "name": "my_app",
  "private": true,
  "type": "module",
  "dependencies": {
    "esbuild-sass-plugin": "^3.3.1",
    "hanami-assets": "^2.2.1"
  }
}

My app/assets/js/app.js looks like following

import "../css/app.css";
import "./jquery.min.js"
import "./test.js"

I tried renaming the file jquery.min.js to jquery.min.cjs but then I see error that jQuery is not found. So I reverted the change.

Improve this question

2 Answers 2

Reset to default
0

From what I have seen so far, in a single project you can have several package.json located in different directories. All you need is to place a package.json on the same or parent directory where jquery is located.

{
  "type": "commonjs"
}

and from a module file, use require() to load jquery like this:

import { createRequire } from 'module';
const require = createRequire( import.meta.url );

const {
    $
} = require( '../../path_to_jquery/jquery.js' );

I am assuming jquery exports $ otherwise I am not sure if it will work as you want.

There is also a npm package for jquery

Import example from the package doc:

const { JSDOM } = require( "jsdom" );
const { window } = new JSDOM( "" );
const $ = require( "jquery" )( window );
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Using the suggestion of adding package.json at the level of jquery.min.js I see two problems: 1) [WARNING] "import.meta" is not available with the "iife" output format and will be empty [empty-import-meta]. You need to set the output format to "esm" for "import.meta" to work correctly. 2) [ERROR] Could not resolve "module". The package "module" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
0

Using search terms "esbuild how to use jquery" on Google I ended up finding How to install jQuery and bootstrap in rails 7 app using esbuild (without webpacker) and using the answer at https://stackoverflow.com/a/70925500/936494 I was able to fix my problem I sought help on.

Solution Summary

  1. Removed app/assets/js/jquery.min.js.

  2. Updated package.json (shown in the question) with following code:

{
  "name": "my_app",
  "private": true,
  "type": "module",
  "dependencies": {
    "esbuild-sass-plugin": "^3.3.1",
    "hanami-assets": "^2.2.1",
    "jquery": "^3.7.1"
  }
}

and ran npm install from my hanami app root folder.

  1. Added app/assets/js/add_jquery.js containing following code:
import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery
  1. Updated app/assets/js/app.js (shown in the question) with following code:
import "../css/app.css";
import './add_jquery'
import "./test.js"

It should be noted that if instead of adding import './add_jquery', if we directly add the code in app/assets/js/add_jquery.js in app/assets/js/app.js in following manner:

import jquery from 'jquery'
window.jQuery = jquery
window.$ = jquery

import "../css/app.css";
import "./test.js"

then jquery will not be found. For the reason behind such behaviour please refer the comment How to install jQuery and bootstrap in rails 7 app using esbuild (without webpacker).

Following are the details about the solution I tried before the above one:

Based on the suggestion in https://stackoverflow.com/a/79665465/936494 to use node's jquery package I took following steps based on a solution I found at https://stackoverflow.com/a/4129032/936494:

  1. Updated package.json (shown in the question) with following code:
{
  "name": "my_app",
  "private": true,
  "type": "module",
  "dependencies": {
    "esbuild-sass-plugin": "^3.3.1",
    "hanami-assets": "^2.2.1",
    "jsdom": "^26.1.0",
    "jquery": "^3.7.1"
  }
}

and ran npm install from my hanami app root folder.

  1. Updated my app/assets/js/app.js in following manner:
var jsdom = require('jsdom');
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;

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

import "../css/app.css";
import "./jquery.min.js";
import "./test.js";

After doing that when I restarted my server I noticed following multiple errors:

15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "path"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/api.js:2:21:
15:42:10 assets.1 | [my_app]       2 │ const path = require("path");
15:42:10 assets.1 | [my_app]         ╵                      ~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "path" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "fs"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/api.js:3:19:
15:42:10 assets.1 | [my_app]       3 │ const fs = require("fs").promises;
15:42:10 assets.1 | [my_app]         ╵                    ~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "vm"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/api.js:4:19:
15:42:10 assets.1 | [my_app]       4 │ const vm = require("vm");
15:42:10 assets.1 | [my_app]         ╵                    ~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "vm" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "events"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/virtual-console.js:2:33:
15:42:10 assets.1 | [my_app]       2 │ const { EventEmitter } = require("events");
15:42:10 assets.1 | [my_app]         ╵                                  ~~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "events" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "fs"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/browser/resources/resource-loader.js:2:19:
15:42:10 assets.1 | [my_app]       2 │ const fs = require("fs");
15:42:10 assets.1 | [my_app]         ╵                    ~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "url"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/browser/resources/resource-loader.js:3:34:
15:42:10 assets.1 | [my_app]       3 │ const { fileURLToPath } = require("url");
15:42:10 assets.1 | [my_app]         ╵                                   ~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "vm"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/browser/Window.js:2:19:
15:42:10 assets.1 | [my_app]       2 │ const vm = require("vm");
15:42:10 assets.1 | [my_app]         ╵                    ~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "vm" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "http"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js:2:21:
15:42:10 assets.1 | [my_app]       2 │ const http = require("http");
15:42:10 assets.1 | [my_app]         ╵                      ~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "http" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "http"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:2:21:
15:42:10 assets.1 | [my_app]       2 │ const http = require("http");
15:42:10 assets.1 | [my_app]         ╵                      ~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "http" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "https"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/helpers/agent-factory.js:3:22:
15:42:10 assets.1 | [my_app]       3 │ const https = require("https");
15:42:10 assets.1 | [my_app]         ╵                       ~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "https" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "https"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:3:22:
15:42:10 assets.1 | [my_app]       3 │ const https = require("https");
15:42:10 assets.1 | [my_app]         ╵                       ~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "https" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "buffer"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/safer-buffer/safer.js:5:21:
15:42:10 assets.1 | [my_app]       5 │ var buffer = require('buffer')
15:42:10 assets.1 | [my_app]         ╵                      ~~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "buffer" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "stream"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:4:29:
15:42:10 assets.1 | [my_app]       4 │ const { Writable } = require("stream");
15:42:10 assets.1 | [my_app]         ╵                              ~~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "stream" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "zlib"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/helpers/http-request.js:5:21:
15:42:10 assets.1 | [my_app]       5 │ const zlib = require("zlib");
15:42:10 assets.1 | [my_app]         ╵                      ~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "zlib" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "net"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/http-proxy-agent/dist/index.js:30:33:
15:42:10 assets.1 | [my_app]       30 │ const net = __importStar(require("net"));
15:42:10 assets.1 | [my_app]          ╵                                  ~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "net" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "tls"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/http-proxy-agent/dist/index.js:31:33:
15:42:10 assets.1 | [my_app]       31 │ const tls = __importStar(require("tls"));
15:42:10 assets.1 | [my_app]          ╵                                  ~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "tls" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "events"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/http-proxy-agent/dist/index.js:33:25:
15:42:10 assets.1 | [my_app]       33 │ const events_1 = require("events");
15:42:10 assets.1 | [my_app]          ╵                          ~~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "events" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "net"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/https-proxy-agent/dist/index.js:30:33:
15:42:10 assets.1 | [my_app]       30 │ const net = __importStar(require("net"));
15:42:10 assets.1 | [my_app]          ╵                                  ~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "net" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "url"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/http-proxy-agent/dist/index.js:35:22:
15:42:10 assets.1 | [my_app]       35 │ const url_1 = require("url");
15:42:10 assets.1 | [my_app]          ╵                       ~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "net"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/agent-base/dist/index.js:30:33:
15:42:10 assets.1 | [my_app]       30 │ const net = __importStar(require("net"));
15:42:10 assets.1 | [my_app]          ╵                                  ~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "net" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "http"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/agent-base/dist/index.js:31:34:
15:42:10 assets.1 | [my_app]       31 │ const http = __importStar(require("http"));
15:42:10 assets.1 | [my_app]          ╵                                   ~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "http" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "tls"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/https-proxy-agent/dist/index.js:31:33:
15:42:10 assets.1 | [my_app]       31 │ const tls = __importStar(require("tls"));
15:42:10 assets.1 | [my_app]          ╵                                  ~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "tls" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "assert"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/https-proxy-agent/dist/index.js:32:41:
15:42:10 assets.1 | [my_app]       32 │ const assert_1 = __importDefault(require("assert"));
15:42:10 assets.1 | [my_app]          ╵                                          ~~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "assert" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "url"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/https-proxy-agent/dist/index.js:35:22:
15:42:10 assets.1 | [my_app]       35 │ const url_1 = require("url");
15:42:10 assets.1 | [my_app]          ╵                       ~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "https"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/agent-base/dist/index.js:32:24:
15:42:10 assets.1 | [my_app]       32 │ const https_1 = require("https");
15:42:10 assets.1 | [my_app]          ╵                         ~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "https" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "util"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:2:21:
15:42:10 assets.1 | [my_app]       2 │ const util = require("util");
15:42:10 assets.1 | [my_app]         ╵                      ~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "util" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "string_decoder"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/iconv-lite/encodings/internal.js:49:28:
15:42:10 assets.1 | [my_app]       49 │ var StringDecoder = require('string_decoder').StringDecoder;
15:42:10 assets.1 | [my_app]          ╵                             ~~~~~~~~~~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "string_decoder" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "http"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/agent-base/dist/helpers.js:27:34:
15:42:10 assets.1 | [my_app]       27 │ const http = __importStar(require("http"));
15:42:10 assets.1 | [my_app]          ╵                                   ~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "http" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "https"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/agent-base/dist/helpers.js:28:35:
15:42:10 assets.1 | [my_app]       28 │ const https = __importStar(require("https"));
15:42:10 assets.1 | [my_app]          ╵                                    ~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "https" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "url"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/websockets/WebSocket-impl.js:3:24:
15:42:10 assets.1 | [my_app]       3 │ const nodeURL = require("url");
15:42:10 assets.1 | [my_app]         ╵                         ~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "url" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "crypto"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/crypto/Crypto-impl.js:3:27:
15:42:10 assets.1 | [my_app]       3 │ const nodeCrypto = require("crypto");
15:42:10 assets.1 | [my_app]         ╵                            ~~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "crypto" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "os"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/navigator/NavigatorConcurrentHardware-impl.js:2:19:
15:42:10 assets.1 | [my_app]       2 │ const os = require("os");
15:42:10 assets.1 | [my_app]         ╵                    ~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "os" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "vm"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:2:19:
15:42:10 assets.1 | [my_app]       2 │ const vm = require("vm");
15:42:10 assets.1 | [my_app]         ╵                    ~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "vm" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "http"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:3:34:
15:42:10 assets.1 | [my_app]       3 │ const HTTP_STATUS_CODES = require("http").STATUS_CODES;
15:42:10 assets.1 | [my_app]         ╵                                   ~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "http" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "child_process"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/xhr/XMLHttpRequest-impl.js:4:30:
15:42:10 assets.1 | [my_app]       4 │ const { spawnSync } = require("child_process");
15:42:10 assets.1 | [my_app]         ╵                               ~~~~~~~~~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "child_process" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "fs"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:2:19:
15:42:10 assets.1 | [my_app]       2 │ const fs = require("fs");
15:42:10 assets.1 | [my_app]         ╵                    ~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] ✘ [ERROR] Could not resolve "events"
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]     node_modules/jsdom/lib/jsdom/living/xhr/xhr-utils.js:3:33:
15:42:10 assets.1 | [my_app]       3 │ const { EventEmitter } = require("events");
15:42:10 assets.1 | [my_app]         ╵                                  ~~~~~~~~
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app]   The package "events" wasn't found on the file system but is built into node. Are you trying to bundle for node? You can use "platform: 'node'" to do that, which will remove this error.
15:42:10 assets.1 | [my_app] 
15:42:10 assets.1 | [my_app] 37 errors

Looking at the hint of using use "platform: 'node'" I searched for it and ended up finding https://stackoverflow.com/a/78010385/936494 based on which I updated my config/assets.js by adding following

esbuildOptions['platform'] = 'node';

in the body of esbuildOptionsFn in that file. Then when I restarted the server no more warnings/errors were there.

But when I tried accessing my application in the browser's web-console I noticed following error

Uncaught ReferenceError: $ is not defined

That error was reported by the first line in following code in my app/assets/js/test.js:

$(document).ready(function() {
  console.log( "ready!" );
  alert("Hello from jQuery!");
});

Since I couldn't understand why it was happening I searched for "esbuild how to use jquery" and I ended up finding the working solution shared in this answer.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.