I'm using the "Marionette-Require-Boilerplate" (https://github.com/BoilerplateMVC/Marionette-Require-Boilerplate) to build my app, which also uses Firebase and FirebaseSimpleLogin. They are working fine in 'development' mode, but when it's time to minify it into 'Production' mode using Grunt and running in the browser, the minified version will have trouble finding the Firebase libraries, spitting out an error saying firebase is not defined. Both the Firebase and FirebaseSimpleLogin libs have been included in the config file as followed:
paths:{
"firebase" : "../libs/firebase",
"firebase-simple-login" : "../libs/firebase-simple-login",
"backbone-firebase" : "../libs/backbone-firebase",
}
shim: {
"firebase": {
"exports": "Firebase"
},
"firebase-simple-login": {
"exports": "FirebaseSimpleLogin"
},
"backbone-firebase": {
"deps": ["backbone", "firebase"],
"exports": "backbone-firebase"
}
}
It seems like the Boilerplate is minifying the code using Almond.js in 'production mode', but I'm not sure how that's affecting it. I tried including the Firebase libs in the 'path' variable in Grunt.js, but that didn't do anything.
Any help is appreciated!
Thanks.
-Tony
You shouldn't be minifying the already minified Firebase sources - that will cause trouble. You should skip minification for firebase.js (and simple login).
Thanks to the Firebase Support Team in solving the problem. The solution is to remove the "exports" from the "backbone-firebase" shim as there's no such thing as "backbone-firebase"; it is part of the "Backbone" namespace, e.g. Backbone.Firebase.Colection. Require.js was looking for something that is called "backbone-firebase" while non exists. Once the "exports" is removed, Require.js works correctly during the minification.
shim: {
"firebase": {
"exports": "Firebase"
},
"firebase-simple-login": {
"exports": "FirebaseSimpleLogin"
},
"backbone-firebase": {
"deps": ["backbone", "firebase"]
}
}
Related
I'm using DevExtreme dxDataGrid and I want to export data to an xlsx-file. They have implemented it using ExcelJs:
https://js.devexpress.com/Documentation/ApiReference/Common/Utils/excelExporter/#exportDataGridoptions
As explained I just need to reference the following libs:
<head>
<!-- ... -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.1.1/exceljs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
<!-- reference the DevExtreme sources here -->
</head>
I'm using ASP.NET Core 6 with VS 2022. For this I'm using the Bundler & Minifier to bundle libs like jQuery, DevExtreme and ExcelJs.
I have downloaded ExcelJs (like I have done for jQuery etc.) with libman.json:
{
"version": "1.0",
"defaultProvider": "cdnjs",
"libraries": [
{
"library": "jquery#3.6.0",
"destination": "wwwroot/js/lib/jquery/"
},
{
"provider": "cdnjs",
"library": "exceljs#4.3.0",
"destination": "wwwroot/js/lib/exceljs/",
"files": [
"exceljs.min.js",
"exceljs.js"
]
},
{
"provider": "cdnjs",
"library": "FileSaver.js#2.0.5",
"destination": "wwwroot/js/lib/FileSaver.js/"
},
{
"provider": "cdnjs",
"library": "babel-polyfill#6.26.0",
"destination": "wwwroot/js/lib/babel-polyfill/"
}
]
}
Then I have added ExcelJs to my bundleconfig.json:
[
{
"outputFileName": "wwwroot/bundle/LibraryBundle.js",
"inputFiles": [
"wwwroot/js/lib/jquery/jquery.js",
"wwwroot/js/lib/babel-polyfill/polyfill.js",
"wwwroot/js/lib/exceljs/exceljs.js",
"wwwroot/js/lib/FileSaver.js/FileSaver.js"
]
}
]
Then I'm getting following error in Visual Studio:
Strict-mode does not allow assignment to undefined variables: regeneratorRuntime
strict-mode is defined in ExcelJS and also many other lib's I don't understand why I'm getting this error and how can I fix it. I was not able to find any similar issue at Github-ExcelJs and it doesn't look like that they are not really supporting their open issues. Because of that I'm tried to ask here.
I am still on ExcelJS 4.2.1, but I was running into a similar issue.
Based on this comment on an ExcelJS issue, in the exceljs.js file, this is the offending block of code:
try {
regeneratorRuntime = runtime;
} catch (accidentalStrictMode) {
// This module should not be running in strict mode, so the above
// assignment should always work unless something is misconfigured. Just
// in case runtime.js accidentally runs in strict mode, we can escape
// strict mode using a global Function call. This could conceivably fail
// if a Content Security Policy forbids using Function, but in that case
// the proper solution is to fix the accidental strict mode problem. If
// you've misconfigured your bundler to force strict mode and applied a
// CSP to forbid Function, and you're not willing to fix either of those
// problems, please detail your unique predicament in a GitHub issue.
Function("r", "regeneratorRuntime = r")(runtime);
}
NEW workaround from Phoniex is to create a file with simply
var regeneratorRuntime;
in it, and include it before the exceljs.js file.
OLD workaround is to replace the assignment in the try block with:
window.regeneratorRuntime = runtime;
I'm trying to get svelte material UI working with snowpack.
I have installed Snowpack and Snowpacks svelte template like so:
npm install --save-dev snowpack#next
npx create-snowpack-app xpapp --template #snowpack/app-template-svelte
This works, the sample svelte page shows up. Next I followed the Svelte Material UI instructions to "bundle this in your own code" as cited on the Usage chapter in the instructions here: https://github.com/hperrin/svelte-material-ui#usage
So I installed Sass and configured it in my snowpack.config.json file like this:
{
"extends": "#snowpack/app-scripts-svelte",
"scripts": {
"build:scss": "sass"
},
"devOptions": {},
"installOptions": {}
}
I followed the (very concise) instructions here: https://www.snowpack.dev/#sass
I've also added an empty src/theme/_smui-theme.scss file to my source files as the instructions say, and I installed the nessecary #smui components.
The problem is that I'm currently getting this error when starting the snowpack dev server:
> snowpack dev
Snowpack Dev Server (Beta)
NOTE: Still experimental, default behavior may change.
Starting up...
⠙ snowpack installing... #smui/icon-button, #smui/top-app-bar, svelte/internal
✘ /home/erik/Projects/svelte-xpapp/xpapp/node_modules/#smui/icon-button/_index.scss
Error: Unexpected character '#' (Note that you need plugins to import files that are not JavaScript)
at error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:161:30)
at Module.error (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15120:16)
at tryParse (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15009:23)
at Module.setSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:15410:30)
at ModuleLoader.addModuleSource (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17460:20)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17521:9)
at async /home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17491:36
at async Promise.all (index 0)
at async ModuleLoader.fetchModule (/home/erik/Projects/svelte-xpapp/xpapp/node_modules/snowpack/node_modules/rollup/dist/shared/rollup.js:17522:9)
at async Promise.all (index 0)
It seems that the #import statements in Material UI's _index.scss aren't recognized. I figure Snowpack should interpret/transpile .scss files, but it doesn't seem to be doing that.
So I came across the same problem using Svite as well as Snowpack. I was able to use the bare implementation:
// component.svelte <script>
import Button, { Label } from '#smui/button/bare'
import '#smui/button/bare.css'
That's all that's required with Svite.
With Snowpack, I needed to add rollup-plugin-svelte and update snowpack.config.js
// snowpack.config.js
module.exports = {
// ...
installOptions: {
rollup: { plugins: [require('rollup-plugin-svelte')()] }
},
// ...
}
I got it working with these install options:
installOptions: {
rollup: {
plugins: [
require("rollup-plugin-svelte")({
include: ["./node_modules"],
}),
require("rollup-plugin-postcss")({
use: [
[
"sass",
{
includePaths: ["./src/theme", "./node_modules"],
},
],
],
}),
],
},
},
Unfortunately, you'll have to run npx snowpack dev --reload for changes to the theme to take effect.
This won't extract css into .css files.
I also got an error message with the Dialog component during a production build.
Here is a full example: https://github.com/LeanderG/svelte-smui
Nuxt.js latest version throws the following error while building or deploying the project that has Vuetify.
remote: > import installComponents from "!../node_modules/vuetify-loader/lib/runtime/installComponents.js"
Module parse failed: Identifier 'installComponents' has already been declared (53:7)
You may need an appropriate loader to handle this file type.
|
| /* vuetify-loader */
> import installComponents from "!../../../node_modules/vuetify-loader/lib/runtime/installComponents.js"
| import { VBtn } from 'vuetify/lib'
| import { VCard } from 'vuetify/lib'
It's hard to tell without a nuxt.config.js. But I had a problem like that. Earlier, I used a plugin to connect Vuetify. Then I installed the #nuxtjs/vuetify module, and the problem came up.
The problem is most likely related to treeShaking. #nuxtjs/vuetify turns on treeShaking only when the build happens. So you don't have a problem in dev mode, but there are problems with the build.
In my case the reason was that I forgot to remove VuetifyLoaderPlugin from the build section in nuxt.config.js.
transpile: ['vuetify/lib'],
plugins: [new VuetifyLoaderPlugin()],
Also I recommend enable treeShaking for the dev mode too. This will allow to use SASS variables in dev-mode. From #nuxtjs/vuetify version 2 it will always be enabled.
vuetify: {
customVariables: ['~/assets/variables.scss'], // need treeShake
treeShake: true,
},
Please remove buildModules inside nuxt.config.js, this is for those who are using Nuxt.js
{
buildModules: [
// Simple usage
'#nuxtjs/vuetify',
// With options
['#nuxtjs/vuetify', { /* module options */ }]
]
}
Add modules this one is for latest version
modules: [
'#nuxtjs/vuetify',
],
vuetify: {
//what ever options you may like
},
I am trying to set up Browserify with Elixir and Browserify Shim on Laravel 5.2 to use Gulp with my JavaScript files, but I didn't have much luck so far. This should be pretty straightforward to do, but it isn't.
Here is my package.json
{
"private": true,
"devDependencies": {
"gulp": "^3.8.8"
},
"dependencies": {
"bootstrap-sass": "^3.0.0",
"browserify-shim": "^3.8.12",
"jquery": "^2.2.0",
"jquery-ui": "^1.10.5",
"laravel-elixir": "^4.0.0"
},
"browser": {
"app": "./resources/assets/js/app.js",
"utils": "./resources/assets/js/utils.js",
},
"browserify": {
"transform": [
"browserify-shim"
]
},
"browserify-shim": {
"app": {
"depends": [
"jquery:$",
"utils:Utils"
]
},
"utils": {
"depends": [
"jquery:$"
]
},
}
}
gulpfile.js
var elixir = require('laravel-elixir');
elixir(function (mix) {
mix.browserify('main.js', './public/js/bundle.js');
});
Entry script main.js looks like this:
var $ = require('jquery');
var Utils = require('utils');
var App = require('app');
app.js
var App = {
init: function(){
console.log(Utils);
Utils.doSomething();
}
//other methods
};
In short: Utils depends on $, and App depends on both $ and Utils.
When I hit gulp from terminal, bundle.js is correctly created. All scripts are wrapped up in Browserify code (as expected). Each script has all included dependencies, like I configured in package.json so this part looks good as well.
The problem is that all my included dependencies are empty objects. For example, Utils in app.js is empty, and I get an error when I try to call its method "doSomething". Console log prints out an empty object "{}" instead of real object. The only correctly included script is jQuery and it's not an empty object.
What could be wrong here? Do I need to make some changes in my JS files or in configuration to make this work? It looks like I'm pretty close to the solution, but it still does not work and I can't use it at all.
It is the easiest solution to directly use 'exports' from browserify-shim property:
"browserify-shim": {
"app": {
"exports": "App",
"depends": [
"jquery:$",
"utils:Utils"
]
},
"utils": {
"exports": "Utils",
"depends": [
"jquery:$"
]
},
}
Take a look at this repo which I believe shows the fixed version of your app. The issue is that your app.js and utils.js modules aren't exporting anything to their respective require calls. One option is to add a line like:
module.exports = App;
to the bottom of your app.js file, and the equivalent to the bottom of your utils.js file. You'll see if you test the repo that badapp doesn't have this line and produces the exact behavior you're describing.
See this answer for an explanation of the issue.
I have installed the chrome jet brains extension
I have tests like this:
describe('Service tests', function () {
beforeEach(module('app'));
it('should have a Service', inject(function($injector) {
var exist = $injector.has('dataService');
etc
but no luck getting breakpoints to hit any where in the tests. I can get the debugger to break when writing debugger, but an unable to step through.
Do you have karma-coverage set up in your karma config? It uses instrumented code, so debugging is not possible. Related tickets: http://github.com/karma-runner/karma/issues/630, http://youtrack.jetbrains.com/issue/WEB-8443
If you are building with Webpack you might need to specify the devtools option in your webpack config property in karma.conf.js like this:
module.exports = (config) => {
config.set({
webpack: {
...,
devtool: 'inline-source-map'
}
})
};
This solution works for me with Webpack v3.
If by any chance you are using Angular and you have removed all the coverage related stuff from your karma.config file and are still unable to hit the breakpoints, look into the angular.json. It might be having the codeCoverage bit set to true.
"test": {
...
"options": {
...
"codeCoverage": false,
...
}
...
}