I am getting the following error after adding dynamic imports (required for the use case) when trying to build using polymer tools:
info: Clearing build/ directory...
error: Promise rejection: Error: Failed to bundle. Rollup generated 2 chunks or assets. Expected 1.
error: Error: Failed to bundle. Rollup generated 2 chunks or assets. Expected 1.
at Es6Rewriter.<anonymous> (/home/suared/localdev/nodespace/ui/node_modules/polymer-cli/node_modules/polymer-bundler/lib/es6-rewriter.js:138:23)
at Generator.next (<anonymous>)
at fulfilled (/home/suared/localdev/nodespace/ui/node_modules/polymer-cli/node_modules/polymer-bundler/lib/es6-rewriter.js:4:58)
at runMicrotasks (<anonymous>)
at processTicksAndRejections (internal/process/task_queues.js:97:5)
I found a potential solution in the Rollup docs and the web that referenced this problem being fixed when passing --inlineDynamicImports to the Rollup command. I have not found away to pass this as part of the build process, however. I tried this:
polymer build --auto-base-path --inlineDynamicImport
It reported the error that it is an unknown option. I also tried placing this in the polymer.json as part of the bundle config, unsuccessfully; it doesn't look like it is actually passed to Rollup:
"bundle": {
"inlineCss": true,
"inlineScripts": true,
"rewriteUrlsInTemplates": true,
"sourcemaps": true,
"stripComments": true,
"--inlineDynamicImport": true
}
What is the correct way to pass to the Polymer build tools the --inlineDynamicImport option so that I only get one file and therefore will avoid the "2 chunks" error?
If it helps others till I get a real answer, this workaround worked for me:
Local monkey patch/ update of the following file:
node_modules/polymer-cli/node_modules/polymer-bundler/lib/es6-rewriter.js:74
In the call that reads like the first line, manually add the configuration, leave the rest of the config as-is:
const rollupBundle = yield rollup_1.rollup({
input,
external,
onwarn: (warning) => { },
treeshake: this.bundler.treeshake,
inlineDynamicImports: true, ....(rest of existing command
Any assistance on the right way using the build tools is welcome/ appreciated.
Thanks!
David
Related
I'm new to flutter and I'm trying to use this plugin to create a heat map in googlemap google_maps_flutter_heatmap 0.1.1+2
But everytime I run the code, this error appears. I already added the APK KEY to the manifest file and tried flutter clean but its still the same.
E:\~MobileDev\flutter project\myproject\android\app\src\main\java\io\flutter\plugins\GeneratedPluginRegistrant.java:32: error: constructor GoogleMapsPlugin in class GoogleMapsPlugin cannot be applied to given types;
flutterEngine.getPlugins().add(new io.flutter.plugins.googlemaps.GoogleMapsPlugin());
^
required: Registrar
found: no arguments
reason: actual and formal argument lists differ in length
1 error
FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.
EDIT:
I tried removing another plugin which is google_maps_flutter: ^0.5.30 . And now it works. Does this mean there are conflicts between this two plugins? Is there anyway I can use them both?
Yes you are correct there are conflicts between the two packages because the name GoogleMaps exists in both packages: google_maps_flutter_heatmap and google_maps_flutter.
If you want to use both of the packages, you will need to import these packages using 'as prefix' to differentiate them from each other. For example:
import "package:google_maps_flutter/google_maps_flutter.dart" as gmaps;
import "package:google_maps_flutter_heatmap/google_maps_flutter_heatmap.dart" as heatmap;
Then you can declare the GoogleMap by prepending one of the prefixes you use. Let's say, you want to use the GoogleMap inside of google_maps_flutter package. Then it will go like this:
gmaps.GoogleMap(
initialCameraPosition: _initialLocation,
),
You will find instructions to reproduce on your own device at the bottom.
I have a basic Angular project I created using Angular CLI, running on TypeScript 3.1.3, with nothing much added aside a class and a json file.
I created a class ResourcesService with the following command with Angular CLI:
ng generate service Resources
I'm basically using it to load json files, as a mean of localising (instead of using Angular unfinished builtin internationalisation features).
The following is my class, as well as the json file:
ResourcesBundle.json
{
"label.changeLanguage": "Change language",
"label.education": "Education",
"label.experience": "Experiences",
"label.skills": "Skills",
"label.summary": "Summary",
"label.language.english": "English",
"label.language.french": "French"
}
resources.service.ts
import * as resources from '../assets/resources/ResourcesBundle.json';
#Injectable({
providedIn: 'root'
})
export class ResourcesService {
constructor() {}
public getString(label: string): string {
let resource: string = resources[label];
return resource;
}
}
Of course, in order to be able to import the json file that way, I've set "resolveJsonModule": true in tsconfig.json.
The service by itself is working properly. I can inject it and call the getString method, and it's running without any error.
However, no matter what value I pass to the getString method, the returned value is always undefined. I've even tried to hard code the value for label = 'label.summary', but it's still returning undefined. The only time it's working properly is when I write the string directly between the brackets:
let resource: string;
label = 'label.summary';
resource = resources[label]; // resource == undefined
resource = resources['label.summary']; // resource == 'Summary'
Within the TS on VSCode, the content of resources is as following:
label.changeLanguage
label.education
label.experience
label.language.english
label.language.french
label.skills
label.summary
When using console.log(resources), the console was displaying something like this on Firefox:
Object {
label.changeLanguage: "Change language"
label.education: "Education"
label.experience: "Experience"
label.language.english: "English"
label.language.french: "French"
label.skills: "Skills"
label.summary: "Summary"
}
So the json is properly loaded, but it can only be used with hard coded string.
The only other solution I found was to give up the json file and initialise an indexed type directly in the code:
private resources: { [key: string]: string } = {
'label.changeLanguage': 'Change language',
'label.education': 'Education',
'label.experience': 'Experiences',
'label.skills': 'Skills',
'label.summary': 'Summary',
'label.language.english': 'English',
'label.language.french': 'French'
};
However, I don't think that's a good approach, at all...
In the case of the imported json file, why does it always return undefined when I use a variable? Or otherwise, why does it work only with a hard coded string between the brackets?
Edit:
You will find below a stackblitz link to a demo project:
https://stackblitz.com/edit/angular-h2aspf?file=tsconfig.json
If you run it on the browser, it will work properly (the console will properly display Change language).
However, if you download it and run it locally, you will notice that the console will display undefined instead.
To run it locally:
You must have npm and Angular CLI
Download and unzip the stackblitz demo in a folder
Run npm i in the project folder
Run ng serve --open
Open the console on your browser, it should be displaying undefined, instead of the expected value (Change language on stackblitz)
Edit:
According to a comment on the Angular CLI issue, a workaround is to set "esModuleInterop": true in tsconfig.json, and to change the import statement from:
import * as resources from '../assets/resources/ResourcesBundle.json';
To this:
import resources from '../assets/resources/ResourcesBundle.json';
Original answer:
After checking multiple times on different devices, I think this is a bug directly related to Angular (current version: 7.0.2).
To take the example I gave in the question again:
https://stackblitz.com/edit/angular-h2aspf?file=tsconfig.json
On the browser, this demo is outputting Change language on the console.
On locale device:
Download and unzip the stackblitz demo in a folder
Run npm i in the project folder
If you run with ng serve, you will notice undefined in the web browser console
Stop Angular, then run again with ng serve --prod. The web browser console is now properly outputting Change language
I've opened the following issues for Angular and Angular CLI projects on GitHub for this problem:
Angular: Issue #26785: Imported json file as indexed type always giving undefined when Angular is not running in production mode
Angular CLI: Issue #12781: Imported json file as indexed type always giving undefined, but not when running ng serve --prod
Below you can see simplified view of an issue. Basically, I'm able to call task1.js using gulp.series in tasks task2,3.js, but once I add same code to call task1.js in task4.js - Task never defined: task1 error gets thrown.
There are more tasks in the tasks folder than in file structure example below.
I've got three tasks,
...
/tasks
build.js
clean.js
dev.js
gulpfile.babel.js
...
all of them required in gulpfile.babel.js using the require-dir package
import requireDir from 'require-dir';
requireDir('./tasks', {recurse: true});
This allows me to call a task from clean.js at dev.js, and it works fine.
import gulp from 'gulp';
gulp.task('dev', gulp.series('clean');
But after I add same code structure at build.js.
import gulp from 'gulp';
gulp.task('build', gulp.series('clean');
it somehow breaks gulp stream (I guess), so now on any task call I get:
$gulp dev
-AssertionError [ERR_ASSERTION]: Task never defined: clean.
$gulp -v
[11:50:11] CLI version 2.0.1
[11:50:11] Local version 4.0.0
For those migrating from gulp v3 to v4 or are using gulp.task() to define tasks in gulp v4 and get this error message: Task never defined, the problem usually lies here:
Forward references
A forward reference is when you compose tasks, using string
references, that haven't been registered yet. This was a common
practice in older versions, but this feature was removed to achieve
faster task runtime and promote the use of named functions. In newer
versions, you'll get an error, with the message "Task never defined",
if you try to use forward references. You may experience this when
trying to use exports for your task registration and composing tasks
by string. In this situation, use named functions instead of string
references.
During migration, you may need to use the forward reference registry.
This will add an extra closure to every task reference and
dramatically slow down your build. Don't rely on this fix for very
long.
From gulpjs documentation re: gulp.series and gulp.parallel documentation.
Here is what that means. There are two ways to create tasks:
1. gulp.task('someStringAsTask', function() {..})
2. function myNamedFunction () {…}
When you use version 1 (gulp.task…) you cannot refer to that task by its string name until it has been registered. So you cannot do this:
exports.sync = gulp.series('sass2css', serve, watch);
// or gulp.task('dev', gulp.series('sass2css', serve, watch); doesn't work either
gulp.task('sass2css', function() {
return gulp.src(paths.sass.stylesFile)
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest(paths.css.temp))
.pipe(reload({ stream: true }));
})
Results in
AssertionError [ERR_ASSERTION]: Task never defined: sass2css
That is a forward reference, composing a task (using gulp.series or gulp.parallel) and referring to a task by its string name (in the above case 'sass2css') before it has been registered. (calling "gulp.task(…..)" is the act of registering) Putting the gulp.task('sass2css',...) first fixes the problem.
If you use version two of defining a task:
function sass2css() {
return gulp.src(paths.sass.stylesFile)
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest(paths.css.temp))
.pipe(reload({ stream: true }));
}
you are now using a named function to register a task and do not need to use its name as a string. So this now works:
exports.sync = gulp.series(sass2css, serve, watch);
// gulp.task('dev', gulp.series(sass2css, serve, watch); this also works
followed by (or preceded by - either works):
function sass2css() {
return gulp.src(paths.sass.stylesFile)
.pipe(sass().on("error", sass.logError))
.pipe(gulp.dest(paths.css.temp))
.pipe(reload({ stream: true }));
}
The original OP used this and it worked:
import gulp from 'gulp';
gulp.task('dev', gulp.series('clean');
Noted that clean.js got imported before dev.js so that was okay.
This didn't work:
import gulp from 'gulp';
gulp.task('build', gulp.series('clean');
because the string-referenced task, 'clean' gets imported (and thus registered) after build.js where it is referenced - thus creating an illegal forward reference to a string-referenced task.
So there are two standard ways to fix this error:
Use named functions to define tasks not gulp.task('someTask',...). Then it doesn't matter the order of using those named functions when composing other tasks, i.e., when using gulp.series or gulp.parallel. And there are other advantages to using named functions, such as passing arguments, so this is the best option.
If you do use the older gulp v3 gulp.task method of creating tasks with string references, be careful to not refer to those tasks until after the task is actually created.
Also see my answer at task never defined error for fixing another problem which results in the same error message. Specifically using gulp.task('someTask', ['anotherTask'], function(){}) synatx in a gulp4 file.
The series and parallel functions of gulp 4 do not create a task definition as its README seems to suggest, but instead they both run the tasks in parameter. In order to work as intended, one need to surround the call with a closure.
So, to fix the excerpt
gulp.task('build', gulp.series('clean'));
it is necessary to add the closure:
// Older EcmaScripts:
gulp.task('build', function() { return gulp.series('clean') });
// EcmaScript 6:
gulp.task('build', () => gulp.series('clean'));
I had a similar setup where I had recursively require'd all tasks under a directory. And after updating to gulp 4 started getting error Task never defined.
I tried Pedro solution, but this caused another error:
The following tasks did not complete: default
Did you forget to signal async completion?
The solution was fairly simple for me, just import the missing tasks.
import gulp from 'gulp';
import './clean';
gulp.task('build', gulp.series('clean'));
The easiest solution might be using the official undertaker-forward-reference package:
const gulp = require("gulp");
const FwdRef = require("undertaker-forward-reference");
gulp.registry(FwdRef()); // Or gulp.registry(new FwdRef());
gulp.task("firstRegisteredTask", gulp.series("laterRegisteredTask")); // Works thanks to undertaker-forward-reference
gulp.task("laterRegisteredTask", () => {
return gulp.src("someGlob").pipe(gulp.dest("someFolder"));
});
This solution might negatively affect performance though (source):
This will add an extra closure to every task reference and dramatically slow down your build.
I have made a new PHP file at the root directory of Magento (next to index.php) and it contains this code:
require 'app/bootstrap.php';
require 'app/Mage.php';
Mage::getModel('core/design_package')->cleanMergedJsCss();
Produces this error:
Fatal error: Call to a member function getModelInstance() on a non-object
in /home/edpadev/public_html/stage/bsr/app/Mage.php on line 463
From my understanding, Magento should dig up that particular method in /app/code/core/Mage/Core/Model/Design/Package.php.
I cannot var_dump it since it cannot instantiate it, I just get the same error when trying to do that.
I am able to call our third-party cache module's observer model and use its methods, and use the simple Mage::app()->cleanCache();, but the core function above does not work, though that is how it appears in examples by other developers in Google search results.
Try this. You might need to setup the store
umask(0);
require 'app/Mage.php';
Mage::app()->setCurrentStore(Mage_Core_Model_App::ADMIN_STORE_ID);
I'm trying to build a project with GRUNT. it throws the following error,
Running "cuff:dev" (cuff) task
>> Building src/pages/home
Fatal error: Object home.less has no method 'compact'
src/pages/home/ -> home.less file,
section#home {
}
I didn't have any method in home.less. What i did wrong?. I can't understand the meaning of this error.
the info you provided is too less, my guess is dev target of cuff task has nested tasks probably something related to home task taking less as target, but grunt is not able to load less target. ( probably not defined at all or part of a grunt plugin you forgot to load )
That kind of errors are thrown when you call a target/task but grunt can not find/load it.
use grunt --help to load all available commands in your context ( commands from plugins are not shown by this command)