Cannot Require Popper with Webpack - javascript

I'm attempting to move my javascript files to Webpack. I'm not very familiar with Webpack so I am not sure that I have coded any of this correctly. I am trying to load jquery-ui, popper, and bootstrap 4. However, I am getting an error when requiring Popper. Please note that I am using the Wepacker gem for Ruby on Rails.
I have included the following code in my environment.js file to include jQuery automatically in each file.
const { environment } = require('#rails/webpacker')
const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}))
module.exports = environment
This part works. So, from there I ran yarn add jquery-ui.
Then in my /pack/application.js file I included require('jquery-ui').
From my js file the following code prints to my console:
$(document).ready(function(){
if (jQuery.ui) {
console.log("loaded");
}
});
After this I tried installing and requiring popper with yarn add popper.
Then calling popper from inside my document.ready function I get an error:
$(document).ready(function(){
console.log(window.Popper)
});
The error:
Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: /home/ubuntu/environment/node_modules/path-platform/path.js: 'return' outside of function (32:2)
30 | if (_path.posix) {
31 | module.exports = _path;
32 | return;
| ^
33 | }
34 |
35 | // resolves . and .. elements in a path array with directory names there
at Parser.raise (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:6420)
at Parser.parseReturnStatement
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10370)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10057)
at Parser.parseStatement (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10572)
at Parser.parseBlock (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10556)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10085)
at Parser.parseStatement (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10009)
at Parser.parseIfStatement
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10363)
at Parser.parseStatementContent
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10054)
at Parser.parseStatement (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10009)
at Parser.parseBlockOrModuleBlockBody
(home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10585)
at Parser.parseBlockBody (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:10572)
at Parser.parseTopLevel (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:9940)
at Parser.parse (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:11447)
at parse (home/ubuntu/environment/node_modules/#babel/parser/lib/index.js:11483)
at parser (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/normalize-file.js:168)
at normalizeFile (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/normalize-file.js:102)
at runSync (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/index.js:44)
at runAsync (home/ubuntu/environment/node_modules/#babel/core/lib/transformation/index.js:35)
at process.nextTick (home/ubuntu/environment/node_modules/#babel/core/lib/transform.js:34)
at process._tickCallback (internal/process/next_tick.js:61)
at Object../node_modules/path-platform/path.js (index.js:82)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:1)
at Object../node_modules/parents/index.js (index.js:39)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:19)
at Object../node_modules/module-deps/index.js (index.js:623)
at __webpack_require__ (bootstrap:19)
at Object.<anonymous> (index.js:3)
at Object../node_modules/browserify/index.js (index.js:846)
Here is my pack/application.js file
require("#rails/ujs").start()
require("#rails/activestorage").start()
require('jquery-ui')
require('popper')

I just did the same thing, then realized what the issue was. popper is some kind of advanced browser testing library in Node. Bootstrap depends on popper.js , which is a tooltip popup library for the browser.
So to fix this, you'll want to:
yarn remove popper
yarn add popper.js

Related

Storybook keeps crashing with ModuleParseError: Module parse failed Error

I wanted to mock api calls in storybook by using the msw package in my storybook.
but when i try to launch it i get an error.
ModuleParseError: Module parse failed: Unexpected character '#' (14:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| class Emitter {
> #events;
| #maxListeners;
| #hasWarnedAboutPotentialMemortyLeak;
at handleParseError (\node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:469:19)
at \node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:503:5
at \node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:358:12
at \node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at \node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at \node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
ModuleParseError: Module parse failed: Unexpected token (5:11)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| exports.MemoryLeakError = void 0;
| class MemoryLeakError extends Error {
> emitter;
| type;
| count;
at handleParseError (\node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:469:19)
at \node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:503:5
at \node_modules\#storybook\builder-webpack4\node_modules\webpack\lib\NormalModule.js:358:12
at \node_modules\loader-runner\lib\LoaderRunner.js:373:3
at iterateNormalLoaders (\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
at Array.<anonymous> (\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
at Storage.finished (\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
at \node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
at \node_modules\graceful-fs\graceful-fs.js:123:16
at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3)
WARN Broken build, fix the error above.
WARN You may need to refresh the browser.
heres my storybook config
// https://storybook.js.org/docs/react/builders/webpack#typescript-module-resolution
const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
module.exports = {
stories: ["../src/**/*.stories.tsx", "../src/**/*.stories.mdx"],
addons: [
"#storybook/preset-create-react-app",
"#storybook/addon-actions",
"#storybook/addon-links",
"#storybook/addon-controls",
"#storybook/addon-knobs",
"#storybook/addon-docs",
],
webpackFinal: async (config) => {
config.resolve.plugins = [
...(config.resolve.plugins || []),
new TsconfigPathsPlugin({
extensions: config.resolve.extensions,
}),
];
return config;
},
};
im using storybook v6.5.13, i tried using webpack5 since i noticed a lot of the articles explaning how to use msw had it, so i added
core : {
builder : "webpack5"
}
and the webpack manager + builder, but it just hangs there and never finishes building, so i reverted back.

Circular references in Webpack build of kurento-client-js

I'm facing an error while trying to build kurento-client-js with Webpack 2 + babel.
WARNING in ./node_modules/kurento-client/lib/register.js
60:20-33 Critical dependency: the request of a dependency is an expression
On execution it results in
Uncaught Error: Cannot find module "."
I believe that the issue itself is сaused by require inside /lib/register.js
//kurento-clinet/lib/register.js
if (constructor == undefined)
return register(require(name));
And the code that cause errors:
//kurento-clinet/lib/index.js
//this module requires kurento-client resulting in circular reference
register('kurento-client-core')
The kurento bower package contains distributive built with the browserify.
I wonder if anyone tried to build kurento-client-js using webpack. Please share your experience.
EDIT:
Circular dependency error stack trace:
Uncaught TypeError: Cannot read property 'MediaObject' of undefined
at Object._typeof (KurentoClient.js:42)
at __webpack_require__ (bootstrap 0d7eac46304670c5f3b5:19)
at Object._typeof (index.js:44)
at __webpack_require__ (bootstrap 0d7eac46304670c5f3b5:19)
at Object.module.exports (HubPort.js:21)
at __webpack_require__ (bootstrap 0d7eac46304670c5f3b5:19)
at Object._typeof (index.js:32)
at ...
First of all webpack complains about a dynamic dependency (which cannot be resolved when building the bundle). It's not a circular dependency.
I got it working like this:
1) in your app's main.js require manually all the modules which the register() function might need
require('kurento-client-core')
require('kurento-client-elements')
require('kurento-client-filters')
const kc = require('kurento-client-core/lib/index.js')
console.log(kc)
2) use this webpack plugin to completely ignore unresolved/dynamic require() calls
//in webpack.config.js
plugins:[
function() {
this.parser.plugin('call require', function(expr) {
if (expr.arguments.length !== 1) {
return;
}
const param = this.evaluateExpression(expr.arguments[0]);
if (!param.isString() && !param.isConditional()) {
return true;
}
});
}
//... other plugins
]
Webpack2 will warn about old plugin format, but it does work
Credits go to:
https://stackoverflow.com/a/42527120/646156

Updated to Angular 1.3.0 no longer working

I am using Browserify to wrap everything up. I have just upgraded from 1.2.23 to 1.3.0 and am now getting the following errors:
Firefox Error
TypeError: angular.module is not a function
var app = angular.module('login-Controller', ['Views']);
----------^
Clearly says that angular is not defined. So I outputed the output from angular
var angular = require('angular'),
console.info(angular); // Object {} ='s an empty object
Does this mean that angular is no longer compatible with browserify? If it is, how can I get it working?
Detailed Error from Chrome
Uncaught TypeError: undefined is not a function main.js:25868 C:\var\www\stage.mayfieldafc.com\src\site\js\users\loginCntrl.js.angularmain.js:1 smain.js:1 (anonymous function)main.js:28 ./src/site/js/app.js.angularmain.js:1 smain.js:1 emain.js:1 (anonymous function)
main.js:183 Uncaught Error: [$injector:modulerr] Failed to instantiate module mays due to:
Error: [$injector:nomod] Module 'mays' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.
http://errors.angularjs.org/1.3.0/$injector/nomod?p0=mays
at http://localhost:3000/js/main.js:183:12
at http://localhost:3000/js/main.js:1900:17
at ensure (http://localhost:3000/js/main.js:1824:38)
at module (http://localhost:3000/js/main.js:1898:14)
at http://localhost:3000/js/main.js:4167:22
at forEach (http://localhost:3000/js/main.js:438:20)
at loadModules (http://localhost:3000/js/main.js:4151:5)
at createInjector (http://localhost:3000/js/main.js:4077:11)
at doBootstrap (http://localhost:3000/js/main.js:1587:20)
at bootstrap (http://localhost:3000/js/main.js:1608:12)
http://errors.angularjs.org/1.3.0/$injector/modulerr?p0=mays&p1=Error%3A%20…at%20bootstrap%20(http%3A%2F%2Flocalhost%3A3000%2Fjs%2Fmain.js%3A1608%3A12)main.js:183 (anonymous function)main.js:4190 (anonymous function)main.js:438 forEachmain.js:4151 loadModulesmain.js:4077 createInjectormain.js:1587 doBootstrapmain.js:1608 bootstrapmain.js:1502 angularInitmain.js:25682 (anonymous function)main.js:2845 triggermain.js:3116 eventHandler
Markup
html(ng-app='mays)
As mentioned by #JeffB, you can use browserify-shim to (hopefully temporarily) remedy this problem.
First, npm install --save-dev browserify-shim. Then, add the following to your package.json:
"browserify": {
"transform": [
"browserify-shim"
]
},
"browser": {
"angular": "./node_modules/angular/angular.js"
},
"browserify-shim": {
"angular": "angular"
}
This should then let you require and access Angular as expected.
The problem is that angular haven't updated their npm packages to be compatible with browserify just yet.
My fix was disgusting but its working. I simply downloaded v1.3.0 and pasted it into:
node_modules\angular\lib\angular.min.js
Now browserify will compile and use the latest version. This I hope is a temporary fix until they update the package.
It looks like you're defining the module name to be 'login-Controller' in your script, but calling it 'mays' in your markup. I would expect to see something like this:
//declare app in main.js
angular.module('name-of-app', [<modules>])
<!-- call your app in markup -->
<html ng-app="name-of-app"></html>
//jade
html(ng-app='name-of-app')

How to Create DB in Node Js Express Jade JavaScript App

UPDATED
I have researched this a lot further. The web application is using the node-db-migrate package. There is a migration folder with two migrations (with table creations). Since I just git cloned it down I am sure I need to run this and I do have node-db-migrate installed on my machine when I hit npm-list.
I head into this folder and hit db-migrate-up and tried db-migrate-up [filename] but I am getting -bash: db: command not found.
I am using this with the node-postgres package. It should be loading the database.json file according to the node-db-migrate file.
Hi in my data.coffee here is line 1 to 17 as requested, according to the command line it could be the data part that is having problem.
uuid = require 'node-uuid'
fs = require 'fs'
_ = require 'underscore'
moment = require 'moment-timezone'
apis = require '../logic/apis'
q = require 'q'
data = (_.chain fs.readdirSync "data")
.map (filename) ->
"data/" + filename
.map (f) ->
fs.readFileSync f, "utf8"
.map (p) ->
JSON.parse p
.sortBy (json) ->
-json.intlFormatDateTime
.value()
Hi I come from a ruby/rails/sinatra background. I just inherited a javascript web app and I will be rewriting the back end.
I am just trying to start the app locally for now
I did
coffee app.coffee -n
but I am getting the error below.
Error: ENOENT, no such file or directory 'data'
at Object.fs.readdirSync (fs.js:654:18)
at Object.<anonymous> (/Users/judyngai/Desktop/twiage/twiagemed/nodejs/routes/data.coffee:8:17, <js>:16:22)
at Object.<anonymous> (/Users/judyngai/Desktop/twiage/twiagemed/nodejs/routes/data.coffee:1:1, <js>:226:4)
at Module._compile (module.js:456:26)
at Object.loadFile (/usr/local/lib/node_modules/coffee-script/lib/coffee-script/coffee-script.js:182:19)
at Module.load (/usr/local/lib/node_modules/coffee-script/lib/coffee-script/coffee-script.js:211:36)
at Function.Module._load (module.js:312:12)
at Module.require (module.js:364:17)
at require (module.js:380:17)
at Object.<anonymous> (/Users/judyngai/Desktop/twiage/twiagemed/nodejs/app.coffee:3:8, <js>:8:10)
at Object.<anonymous> (/Users/judyngai/Desktop/twiage/twiagemed/nodejs/app.coffee:1:1, <js>:76:4)
at Module._compile (module.js:456:26)
In the app.coffee file there is these three lines of code
express = require 'express'
routes = require './routes'
data = require './routes/data'
I have installed all the dependencies within the package.json file but there is a database.json file with this line attached
{ "dev": "postgres://twiage_db_user:twiage_db_password#localhost/twiage_db" }
how do I create this database? normally in rails its a rake db:create. I feel like this can solve the problem.
It tries to read "data" directory which is missing. Does cwd + ./data/ exist? Also, it's common to use path relative to script with __dirname variable:
dataDir = __dirname + "/data"
data = (_.chain fs.readdirSync dataDir)
.map (filename) ->
dataDir + "/" + filename
.map (f) ->
fs.readFileSync f, "utf8"
.map (p) ->
JSON.parse p
.sortBy (json) ->
-json.intlFormatDateTime
.value()

Now.js module doesn't work (node path not found)

I'm trying to install the Now.js module for Node.js. It gets installed, but it doesn't work. When I install it, here's what I get:
eustace#eustace-desktop:/var/www/nowjs$ sudo npm install now -g
> node-proxy#0.5.1 install /usr/local/lib/node_modules/now/node_modules/node-proxy
> make
BUILDING: C++ Component
Checking for program g++ or c++ : /usr/bin/g++
Checking for program cpp : /usr/bin/cpp
Checking for program ar : /usr/bin/ar
Checking for program ranlib : /usr/bin/ranlib
Checking for g++ : ok
Checking for node path : not found
Checking for node prefix : ok /usr/local
'configure' finished successfully (0.038s)
Waf: Entering directory `/usr/local/lib/node_modules/now/node_modules/node-proxy/src/build'
[1/2] cxx: node-proxy.cc -> build/default/node-proxy_1.o
[2/2] cxx_link: build/default/node-proxy_1.o -> build/default/node-proxy.node
Waf: Leaving directory `/usr/local/lib/node_modules/now/node_modules/node-proxy/src/build'
'build' finished successfully (0.909s)
now#0.7.4 /usr/local/lib/node_modules/now
├── node-proxy#0.5.1
└── socket.io#0.8.2
I'm trying to get the example working (http://nowjs.com/doc/example), but when I run helloworld_server.js in terminal, here's what I get:
eustace#eustace-desktop:/var/www/nowjs$ node helloworld_server.s
node.js:134
throw e; // process.nextTick error, or 'error' event on first tick
^
Error: Cannot find module '/var/www/nowjs/helloworld_server.s'
at Function._resolveFilename (module.js:317:11)
at Function._load (module.js:262:25)
at Array.<anonymous> (module.js:421:10)
at EventEmitter._tickCallback (node.js:126:26)
eustace#eustace-desktop:/var/www/nowjs$ node helloworld_server.js
node.js:134
throw e; // process.nextTick error, or 'error' event on first tick
^
Error: Cannot find module 'now'
at Function._resolveFilename (module.js:317:11)
at Function._load (module.js:262:25)
at require (module.js:346:19)
at Object.<anonymous> (/var/www/nowjs/helloworld_server.js:7:13)
at Module._compile (module.js:402:26)
at Object..js (module.js:408:10)
at Module.load (module.js:334:31)
at Function._load (module.js:293:12)
at Array.<anonymous> (module.js:421:10)
at EventEmitter._tickCallback (node.js:126:26)
I'm using Node.js v0.4.11 and Ubuntu 11.04. I tried doing 'export NODE_PATH="/usr/local/lib/node"', but it didn't help.
How do I fix this?
The problem was that I mistyped helloworld_server.js. I wasted around 6 hours trying to fix this, what a stupid mistake :)

Categories