I upgraded my Elixir and Gulp and right now I can see that some of my mixed scripts are broken.
When I hit gulp or gulp --production everything seems to be compiled, mixed and versioned fine. Problem is directly on the page. Scripts throw exceptions in the console.
Two broken scripts are right now moment.js and bootstrap datetimepicker.
Uncaught TypeError: Cannot set property 'moment' of undefined(anonymous function) # common-1e3de0f4.js:1(anonymous function) # common-1e3de0f4.js:1
create:207
Uncaught TypeError: $(...).datetimepicker is not a function
It must have something do to with the fact that I did npm update because all my custom scripts are fine - just these plugins are broken - while I haven't touched them.
I saw that every file is now preceded by 'use strict'; Previously it never happened before.
I really would like to solve it by myself but I have no idea where to start looking for a solution.
My gulpfile.js http://pastebin.com/NQ8f9tGr
Thanks for any help.
This is known issue, in fact Jeffrey is asking for feedback how people want to solve this, you can find more info here and give your opinion.
Also quoting Jeffrey Way on a possible solution:
We have two options:
You may disable Babel support, if you don't desire it.
elixir.config.babel.enabled = false.
We can blacklist "useStrict", so
that it doesn't get included. Not sure we should do this, but it's an
option.
Related
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.
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.
I'm working with some UMD code output by TypeScript via tsc. It's just a simple build right now as I get things figured out:
tsc; ./node_modules/.bin/webpack lib/WebApp/BootcampWebAppSuite.js public/lib/index.js
Unfortunately, when I go to load the resultant .js file in my browser (which seems to look alright at a glance?), I end up getting this exception:
Admittedly, this has been a bit difficult to google for as I have no way to search for "." (quote period quote).
I have npm installed handlebars v4.05:
I use grunt to compile a "searchBundle.js", it (grunt) bundles jquery, underscore, handlebars and all of my other files in my search directory into the searchBundle.js file. (Not sure how relevant that is, but thought i'd mention, just incase).
When I load the page though, it throws this error: "Uncaught TypeError: Cannot set property 'Handlebars' of undefined"
I tried looking for a solution but only found an issue submitted for the https://github.com/brunch/handlebars-brunch/ package. It basically said that babel was the issue (which I use during compiling the searchBundle.js file via grunt-babel) and so I tried the solution that it proposed in the issue (see here: https://github.com/brunch/handlebars-brunch/issues/51).
However this didnt fix the issue. Here is a screenshot of the line that the console is flagging up:
Any ideas? I am not seeing this flagged as an issue on the handlebars repo and I amn't seeming to find anything on here or google on what could be causing this.
This happened to me while running in strict mode (you can't use 'this' to reference a window, which is what the first argument of the function should be).
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
Fix last line:
})(this || window, function() {
I change the code, extend some functionality and add new unittest for that. Now, when I run my unit tests with karma (test framework - jasmine), it throw me an error
'There is no timestamp for /libs/angular-bootstrap/ui-bootstrap-tpls.js!'
Uncaught Error: Script error for: angular-bootstrap
http://requirejs.org/docs/errors.html#scripterror
at http://localhost:9876/base/node_modules/karma-requirejs/lib/require.js?1379984163000:138
What I'm doing wrong?
It was my mistake completely. when using karma-requirejs you have main-test.js file where configure how to require.js get the files. I add reference to angular-bootstrap with mistake, that's why require.js couldn't find this file and throwing this mistake. So in my case this error means wrong file name provided.
It can be because it cannot access your source file. You should configure karma to serve scripts where require will look for them.
For example have the config in the karma conf
files:[{pattern: 'node_modules/**/*.js', included:false}]
The question is old, the OP already solved his problem by now, but I'll add my two cents:
From the error message (end of the first error line) we can conclude that you were including a paths (or deps) file in main-test.js with the .js extension.
In RequireJS, you need to call the file names without the extension, so your paths (or deps) would look more or less like this:
paths: {
'ui-bootstrap': 'libs/angular-bootstrap/ui-bootstrap-tpls' // <- without the extension
}