I installed semantic ui, created a custom theme, but when I use gulp watch, the RTL watch.js loads and on every change I get the following error:
Watching source files for changes
Change detected in packaged theme
/home/vagrant/Code/angular/semantic/tasks/rtl/watch.js:109
lessPath = lessPath.replace(tasks.regExp.theme, source.definitions);
^
TypeError: Cannot read property 'replace' of undefined
at /home/vagrant/Code/angular/semantic/tasks/rtl/watch.js:109:28
which has to do with these lines:
else if(isPackagedTheme) {
console.log('Change detected in packaged theme');
lessPath = lessPath.replace(tasks.regExp.theme, source.definitions);
lessPath = util.replaceExtension(file.path, '.less');
}
I didn't change any line in the gulp files. What am I doing wrong?
There's a bug in the gulpfiles afaik. I've created a Pull Request on Github:
https://github.com/Semantic-Org/Semantic-UI/pull/3586
Related
I'm trying to run a project on Ubuntu, which uses Nunjucks, and the gulp-nunjucks-render plugin is used to render the Nunjucks templates.
The developers were mainly using this project on Windows and Mac OS, so there was no issue when including files without respecting the case sensitivity, but this causes issues on Ubuntu, as it seems this plugin fails to include some files when they have a different casing in their names.
For example, I have this file: m-figures.njk, but in the code we have: {% import '../m-Figures.njk' as figures %}, in this case I get this error:
Plumber found unhandled error:
Template render error in plugin "gulp-nunjucks"
Message:
(unknown path)
Error: template not found: ../m-Figures.njk
For my gulp task it goes like this:
gulp.task("nunjucks", () => {
return gulp
.src([src_folder + "pages/**/*.njk"])
.pipe(plumber())
.pipe(
data(() =>
JSON.parse(fs.readFileSync(src_folder + "datas/dist/data.json"))
)
)
.pipe(nunjucks())
.pipe(beautify.html({ indent_size: 2 }))
.pipe(gulp.dest(dist_folder))
.pipe(browserSync.stream({match: '**/*.html'}));
});
Is there a solution I can add to my gulp task to solve this issue?
Edit
Actually, this is a global issue of gulp as gulp-sass also fails on case sensitive file systems
I am using a userFunction to query the property database in a custom Forge Viewer extension. This works great while testing the site locally using npm run serve. However, when I deploy the website to the web (which uses npm run build), the function no longer executes. The error says: SyntaxError: Function statements require a function name. This is because, according to the documentation, the function executed through executeUserFunction has to be named userFunction.
Upon further inspection I discovered that this was because of Vue & Webpack's mangling feature (executed by terser-webpack-plugin), where it renames variables and removes function names to decrease file size.
I have tried many different things, from making the function part of the extension's class to moving it to the global JS scope, but nothing helped. I also tried to exclude objects.js (which is the name of the extension I wrote) from mangling, but this didn't work either.
How do I configure terser to stop mangling this one variable?
I eventually figured out a way to do this which worked:
Add the following to vue.config.js:
module.exports = {
...
chainWebpack: config => {
config.optimization.minimizer('terser').tap(args => {
// eslint-disable-next-line no-param-reassign
args[0].terserOptions.keep_fnames = true;
return args;
});
},
};
This will prevent terser from removing function names, and will make it so userFunction still works. Weird design choice by Autodesk to require a function name, but at least it works now :)
I'm using ASP.NET core 2.1. I load all the assemblies that have the Views dynamically from a plugins folder. I use the following code for that. The Views get loaded correctly.
services.AddMvc().
AddRazorPagesOptions(o => o.AllowAreas = true).
SetCompatibilityVersion(CompatibilityVersion.Version_2_1).
ConfigureApplicationPartManager(ConfigureApplicationParts);
private void ConfigureApplicationParts(ApplicationPartManager apm)
{
var pluginsPath = Path.Combine(_env.WebRootPath, "Plugins");
var assemblyFiles = Directory.GetFiles(pluginsPath, "*.dll", SearchOption.AllDirectories);
foreach (var assemblyFile in assemblyFiles)
{
var assembly = Assembly.LoadFile(assemblyFile);
if (assemblyFile.EndsWith(".Views.dll"))
{
apm.ApplicationParts.Add(new CompiledRazorAssemblyPart(assembly));
}
else
{
apm.ApplicationParts.Add(new AssemblyPart(assembly));
}
}
}
The views have some custom taghelpers.
The _ViewImports.cshtml file looks like
#addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
#addTagHelper *, MyTagHelpers
The problem is that the custom tag helpers don't get loaded and gives an error:
Error: Could not load file or assembly MyTagHelpers
The reason I get the error may be the Razor View Engine may be looking for the DLL in the bin folder of the main app and it can't find the DLL and gives this error.
What should I do in the startup to say the taghelpers are available in a DLL and can be loaded from there? Should I use TagHelperFeatureProvider to do it?
UPDATE: I moved the tag helpers to a separate DLL called MyTagHelpers.Common and dropped in the plugins folder. I'm not getting any assembly not found error anymore, but the tag helpers are not working.
After 2 days trying to resolve this - please note - the 'assembly name' is the compiled (assembled?) .DLL name which would normally match the project name which may not match the namespace name/prefix!
So if your project name is not the same as the namespace as mine was, then the #addTagHelper reference is the project name which is being used to create the compiled .DLL - see your build output to check.
And therefore, this is also usually the same as the prefix for your .csproj file which is why the official documentation says to create a new app.
I'm trying to use gulp as the compiler for my rendr app, but I'm running into the issue of
500 TypeError: template is not a function
at module.exports.Backbone.View.extend.getInnerHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/shared/base/view.js:191:12)
at module.exports.Backbone.View.extend.getHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/shared/base/view.js:198:21)
at ViewEngine.getViewHtml (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/viewEngine.js:75:15)
at ViewEngine.render (/home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/viewEngine.js:22:16)
at View.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/view.js:126:8)
at tryRender (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/application.js:639:10)
at EventEmitter.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/application.js:591:3)
at ServerResponse.render (/home/longjeongs/thinksquareio.github.io/node_modules/express/lib/response.js:961:7)
at /home/longjeongs/thinksquareio.github.io/node_modules/rendr/server/router.js:87:11
at Object.module.exports.create (/home/longjeongs/thinksquareio.github.io/app/controllers/users_controller.js:5:5)
I couldn't find any examples of compiling rendr-handlebars and handlebars with gulp anywhere and thought I will try getting some help here.
I have read elsewhere that this is caused by different compiler handlebars and client handlebars version, but I believe that I have the correct ones installed. I have these dependencies installed
│ ├─┬ handlebars#2.0.0
├─┬ gulp-handlebars#3.0.1
├─┬ handlebars#2.0.0
├── rendr-handlebars#2.0.1
and my compiledTempaltes.js file shows "compiler":[6,">= 2.0.0-beta.1"]. My gulp task for handlebars does the following;
gulp.task('handlebars:compile', function () {
return gulp.src('./app/templates/**/[!__]*.hbs')
.pipe(plumber())
.pipe(handlebars({ wrapped : true, handlebars: require('handlebars') }))
.pipe(wrap('templates["<%= file.relative.replace(/\\\\/g, "/").replace(/.js$/, "") %>"] = <%= file.contents %>;\n'))
.pipe(concat('compiledTemplates.js'))
.pipe(wrap('module.exports = function(Handlebars){\ntemplates = {};\n<%= contents %>\nreturn templates \n};'))
.pipe(gulp.dest('app/templates/'));
});
I've tried installing different versions of handlebars, rendr-handlebars, and gulp-handlebars without much luck, any help will be much appreciated.
I'm using gulp with my rendr project... I made a sample app that you can check out... https://github.com/jaredrada/rendrjs-demo
There are a few problems with the browser sync which I've fixed locally- so if you copy the entire gulp setup that portion will not work. I will push my edits to the github repo.
I'm just new to Ionicframework and new to using gulp. I am currently setting up my workflow and I use gulp-uglify to minify my app files. After using it the code breaks so I checked on the console and got this error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module ebhealth due to: Error: [$injector:unpr] Unknown provider: t
I am using this gulp function to basically gather all js file from a specified location, concatenate them to all.js then uglify/minify.
gulp.task('app-scripts', function(){
return gulp.src(paths.scripts)
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(gulp.dest('www/app-dist/'));
});
After executing this command, I checked the all.js and indeed it looks minified and uglified but when I refresh the browser it throws an error. What am I doing wrong?
add ng-annotate or format properly your injection with, for example ["$scope",function($scope){ }] instead of just function($scope)
its a common mistake / reuirement for angularJS minification / uglification