require is not defined at npm.js:2 - javascript

Forgive me if this is something simple as my research has come up empty in regards to this specific issue. I am using Bootstrap the most recent release. I have noticed that there is a file that is new from previous releases called npm.js. I am hosting all the Bootstrap files locally on my hosted web server. I call the file like all the others in the head to the full path to the file. In the console I have this error.
npm.js:2 Uncaught ReferenceError: require is not defined
at npm.js:2
Which is referring to this line.
require('../../js/transition.js')`
Which is from this npm.js file that is in the newest Bootstrap
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
I am unfamilar with this so I am not sure why I am getting this error but, how can I surpress this error and fix this issue? Do I even need this file? From what I understand if I am using modals or tooltips etc I need this. Is this correct?

You will need to download/config the missing libraries or requires. I am not sure which libraries you are using.
You can add the missing libraries to your package.json. Then call for npm install.

Related

Why is CodeMirror failing with the examples that are part of the downloaded zip file?

I am new to CodeMirror and having difficulty getting it to work -- I am specifically looking to get it to work with Groovy.
The following are the steps I have taken:
Downloaded CodeMirror-master.zip
Unzipped it.
Attempted to open "CodeMirror-master/mode/groovy/index.html"
When I open that file, the Groovy code in that file is not formatted. That file references "lib/codemirror.js". The file structure in the zip file does not contain "codemirror.js" in the "lib" directory. However, it does contain "codemirror.js" in the "src" directory. So, I copied everything from the "src" directory to the "lib" directory and it still doesn't display the formatted code from the example. When I open the Chrome browser developer tools it shows 4 errors, but I am so new to this type of development that I don't know what to do. I don't understand why "CodeMirror is not defined" is being thrown -- I assumed that the example code from CodeMirror would work...
The errors I see are as follows:
Uncaught SyntaxError: Cannot use import statement outside a module (codemirror.js)
Uncaught ReferenceError: CodeMirror is not defined
at matchbrackets.js:10:9
at matchbrackets.js:11:3
Uncaught ReferenceError: CodeMirror is not defined
at groovy.js:10:9
at groovy.js:11:3
Uncaught ReferenceError: CodeMirror is not defined
at index.html:76:20
What took me down the path of trying out the examples was that I was unable to get it running with my own code after trying to follow the instructions and I have been banging my head against this for too long.
Any help would be greatly appreciated.
After banging my head against for too long, I have finally found the answer:
the zip file that is currently being distributed is faulty (ie files are not where they are supposed to be and other files are missing).
I had to use the instructions for downloading it via NPM (ie npm install codemirror), then copy that directory structure to my project.

How to use npm packages as ES6 modules loaded by the browser in 2021?

I'm a JavaScript beginner. I do not use a "bundler".
For a few days now I've been trying to use moment.js and other date-time libraries in some JavaScript by importing it using ES6 modules (ESM).
I have a JS module I wrote, which is transpiled from TS, and that has this line:
import moment from "../lib/moment/src/moment.js"
My module is itself loaded via an import from a <script type="module" > tag, which works.
I've discovered that the moment package contains what looks like "source" code in its src folder which seems to look more like the JS/TS I'm accustomed to, and has a "default export" at the bottom.
So I'm referencing that "source" version in my transpiled JS module. This gets me past a couple of errors I was getting:
The requested module 'blah' does not provide an export named 'default'
And
Cannot set property 'moment' of undefined (at moment.js:10)
And leaves me stuck with loading the other modules its dependent upon, because I guess, their file extensions are missing.
GET https://blah/lib/moment/src/lib/locale/locale net::ERR_ABORTED 404 (moment.js:37)
After 3 days tearing my hair out I feel like I have been fighting a battle I shouldn't be attempting at all.
I would expect in 2021, what with widespread ESM browser support, that this would just work, but I've tried 5 different date-time libraries and had no success.
I assume the 404s have occurred because the moment authors are NOT expecting people to be using their library like this, so they left off the file extensions knowing full well that it wouldn't load in a browser??
Am I supposed to add an extra step in my client-side build process, Gulp, to add the extensions back on in the moment source code??
Or am I doing something else wrong?
Is it perhaps that everyone uses a "bundler" and these tools fix all this stuff somehow and so these issues never arise for 99% of web devs??
Thanks in advance.
You want to import a bundled version of the lib to be able to do that. Try:
import from 'https://unpkg.com/moment#2.29.1/dist/moment.js' ;
You can download the bundled version and add to your project. Don't forget to put the license as well and check if they are at least MIT or similar.
If you want to refer to the source code you will certainly need to build that. Specifically with libs that are using typescript.

Browserify something with an EyalAr/lwip dependency

I have a script requiring lwip#0.0.8 requiring as such:
require("lwip");
When I run browserify on the script, I get the following error:
Error: Cannot find module '../build/Release/lwip_encoder' from '/Users/sihrc/Documents/sample_project/node_modules/lwip/lib'
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:55:21
at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at FSReqWrap.oncomplete (fs.js:82:15)
I checked the in the build/Release and found that lwip_encoder.node exists but not without the extension. I tried making a copy without the extension, but it turns out it's a compiled file (I think?). Is a dependency like this not 'browserify'-able because it's compiled?
Or is there a way to do this properly?
I guess, for some libraries that have compiled C code, browserify simply won't work. It just doesn't make sense. Goes to show that I shouldn't ask questions on StackOverflow this late.

Stop Webstorm of Displaying Error on hbs! Plugin for require.js

There are two files in my project:
index.js where the following code is
define([ 'exports', 'hbs!./general'], function (exports, generalTemplate) {
});
general.handlebars which is correctly taken by require.js and the hbs! plug-in.
I'm basically using Require.js with Handlebars.js and the https://github.com/SlexAxton/require-handlebars-plugin for automating the creation of templates from files.
It works correctly, but Webstorm 8 (and also 7 before it) doesn't understand the file is correct so it always complains with: Cannot resolve file 'general'. It is the same with every file using that plugin prefix.
I coudln't find where (if it exists) to turn that notification off, because it underlines the entire file, and its parent directories as having errors.
How can I remove this error of being reported?
This notification can't be turned off unfortunately - annotator-level inspections can't be suppressed.
The issue with relative paths resolving when loading plugins for non-js extensions is tracked as WEB-1167, please vote

Haste Haskell->JS compiler does not work on OSX, displaying specific error message when calling hastec

I've tried setting up Haste using the official installation guide. Trying to compile a Hello World produces the following error:
Compiling Main into .
Linking haste-compiler/test.js
Linking Main
Linking GHC.Types
Linking GHC.IO.Handle.Text
hastec: /Users/vhsmaia/.haste/jsmods/base/GHC/IO/Handle/Text.jsmod: openBinaryFile: does not exist (No such file or directory)
I've then tried to compile the portable version. The error is now:
hastec: user error (Haste needs to be rebooted; please run haste-boot
Running haste-boot does not amend the error.
I think the problem you have, is that hastec expects your module to have a Main module. Try renaming your file to Main.hs and add a module Main where declaration to the top of the file.

Categories

Resources