Develop Reference

Error building schema with gatsby-source-filesystem config with officiel tutorial

I'm quite new to using Gatsby and for this reason I wanted to start using it by following the official tutorial. Everything went well until I came across the 4th part of it : https://www.gatsbyjs.com/docs/tutorial/part-4/#task-use-graphiql-to-build-the-query-1
When I update my gatsby-config.js file with the gatsby-source-filesystem configuration, I can't run my website locally.
When running the gatsby develop command in my terminal, I have the following error when trying to build schema :
gatsby develop
success compile gatsby files - 1.288s
success load gatsby config - 0.013s
success load plugins - 0.303s
success onPreInit - 0.004s
success initialize cache - 0.074s
success copy gatsby files - 0.049s
success Compiling Gatsby Functions - 0.080s
success onPreBootstrap - 0.087s
success createSchemaCustomization - 0.002s
success Checking for changed pages - 0.002s
success source and transform nodes - 0.089s
ERROR
Missing onError handler for invocation 'building-schema', error was 'Error: TypeError[File.publicURL]: Cannot convert to OutputType the following value: Object({ type: String, args: Object({ }), description: "Copy file to static directory and return public url to it", resolve: [function resolve] })'. Stacktrace was 'Error: TypeError[File.publicURL]: Cannot convert to OutputType the following value: Object({ type: String, args: Object({ }), description: "Copy file to static directory and return public url to it", resolve: [function resolve] })
at TypeMapper.convertOutputFieldConfig (/Users/nicolas/my-gatsby-site/node_m odules/graphql-compose/src/TypeMapper.ts:419:13)
at ObjectTypeComposer.setField (/Users/nicolas/my-gatsby-site/node_modules/g raphql-compose/src/ObjectTypeComposer.ts:445:40)
at /Users/nicolas/my-gatsby-site/node_modules/graphql-compose/src/ObjectType Composer.ts:479:14
at Array.forEach (<anonymous>)
at ObjectTypeComposer.addNestedFields (/Users/nicolas/my-gatsby-site/node_mo dules/graphql-compose/src/ObjectTypeComposer.ts:468:28)
at forEach (/Users/nicolas/my-gatsby-site/node_modules/gatsby/src/schema/schema.js:764:39)
at Array.forEach (<anonymous>)
at /Users/nicolas/my-gatsby-site/node_modules/gatsby/src/schema/schema.js:764:18
at async Promise.all (index 54)
at updateSchemaComposer (/Users/nicolas/my-gatsby-site/node_modules/gatsby/src/schema/schema.js:168:3)
at buildSchema (/Users/nicolas/my-gatsby-site/node_modules/gatsby/src/schema/schema.js:71:3)
at build (/Users/nicolas/my-gatsby-site/node_modules/gatsby/src/schema/index.js:112:18)
at buildSchema (/Users/nicolas/my-gatsby-site/node_modules/gatsby/src/servic es/build-schema.ts:19:3)'
⠸ building schema
Then the building schema command is running forever and my site can't launch.
I know the issue is when adding gatsby-source-filesystem into the gatsby-config.js file because when I delete it, I can run gatsby develop without any issue.
Here is my gatsby-config.js file, nearly identical to the one in the tutorial (I just changed the blog title) :
module.exports = {
siteMetadata: {
title: `Arckablog`,
siteUrl: `https://www.yourdomain.tld`,
},
plugins: [
"gatsby-plugin-image",
"gatsby-plugin-sharp",
{
resolve: "gatsby-source-filesystem",
options: {
name: `blog`,
path: `${__dirname}/blog`,
}
},
],
}
I have seen a similar question on stackoverflow here : Error building schema with gatsby-source-filesystem config (following official tutorial) and I tried updating both my Gatsby version and the gatsby-source-filesystem version but none of it worked out for me.
Can you maybe advise me please ?
Thank you for your help !
Nicolas

I encountered same problem.
I was running
npm install gatsby-source-filesystem
from different folder. Then I changed my current folder to project directory and ran npm install gatsby-source-filesystem everything worked fine

Monorepo - Multiple .vscode settings

Project structure
I have the following project structure:
/
| - .vscode/
| - - - - settings.json
|
| - packages/
| - - - - app/
| - - - - - - index.js
| - - - - - - package.json
| - - - - website/
| - - - - - - .vscode/
| - - - - - - - - settings.json
| - - - - - - index.html
| - - - - - - styles.scss
| - - - - - - package.json
|
| - package.json
|
As you can see, I have two vs-code setting files: One at the root, and another one inside the website workspace.
Root vs-code settings
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
"editor.formatOnSave": false,
"editor.tabSize": 2,
"editor.rulers": [
80,
120
],
"eslint.codeAction.showDocumentation": {
"enable": true
},
"eslint.validate": [
"javascript"
],
"eslint.workingDirectories": [
{
"mode": "auto"
}
],
"javascript.updateImportsOnFileMove.enabled": "always",
}
Website workspace vs-code settings
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"css.validate": false,
"less.validate": false,
"scss.validate": false,
"stylelint.configFile": ".stylelintrc",
"stylelint.snippet": [
"css",
"scss"
],
"stylelint.validate": [
"css",
"scss"
],
"stylelint.packageManager": "yarn"
}
Questions
I know that /.vscode/settings.json is merged with my vs-code default settings. But...
Is /packages/website/.vscode/settings.json merged with /.vscode/settings.json
As you can see, there is some code repetition in both configs:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
},
and
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
If I remove "source.fixAll.eslint": true, from the /packages/website/.vscode/settings.json, will editor.codeActionsOnSave.source.fixAll.eslint be extended from /.vscode/settings.json?

At the time of this writing, VS Code settings files cannot reference other settings files to extend/inherit settings from them, and they do not automatically extend/inherit settings from .vscode/settings.json files in parent folders.
See the highly popular feature request issue ticket on the VS Code GitHub repo: Add ability to extend from other settings files #15909. You can show your support for the feature request by giving a thumbs up reaction to the issue. But please don't make a "me too" comment. "me too" comments generally come off as annoying to repo maintainers because they clutter up discussion and don't contribute anything of significant value.
As you already know, the settings that apply to a workspace use the worspace folder's .vscode/settings.json file and fallback to the user's settings.json file. But there also a middle layer between that: If you use multi-root workspaces, the middle layer is the multi-root workspace's .code-workspace file, where you can put settings that apply to all workspace roots in the multi-root workspace.
Bonus info:
There's also this issue ticket: Allow folder settings to cascade / be inherited #111884, which for some reason got close as a duplicate of this one: Monolithic structure, multiple project settings #32693, which seems to be more about a feature like multi-root workspaces.
The relatively newer "Profiles" feature has a somewhat anaolgous/related feature request here: Profiles: Extend from Default Profile #156144.

There are only 3 ways how to configure VSCode. Order is by precedence (first one have highest priority):
1.) Project .vscode/settings.json
2.) Project workspace e.g. .vscode/team.code-workspace
3.) VSCode user settings.json
As you can see we store team.code-workspace also in .vsode folder of project. We are sharing team settings in commited file .vscode/project.code-workspace and if developer need some project-specific settings just for himself he can use gitignored .vscode/settings.json which has precedence.
So if you want to use in project some option with another value then default in user settings.json you must override it in project *.code-workspace. If you want to use in project for some option with another value then in project *.code-workspace. you must override it in project settings.json

Setting Sails js view extension doesn't work

I'm using sails 0.10.5 with handlebars.
I would like all my handlebars templates to use the extension .hbs instead of .handlebars. I read in the sails documentation that you can set an extension property in config/views to change the file extension that sails will look for when rendering views.
http://sailsjs.org/#!/documentation/reference/sails.config/sails.config.views.html
I've set the extension that I would like to use but it's not being used when sails is rendering the view. This is what I get in the browser when going to my index route.
{
"message": "Could not render view \"index\". Tried locating view file # \"/Users/jeff/Sites/bcsm/views/index\".",
"code": "E_VIEW_FAILED",
"status": 500,
"view": {
"name": "index",
"root": "/Users/jeff/Sites/bcsm/views",
"defaultEngine": "handlebars",
"ext": ".handlebars"
}
}
This is my config :
module.exports.views = {
engine: 'handlebars',
layout: false,
ext: '.hbs'
};
I've also tried the following with no luck :
extension: 'hbs'
extension: '.hbs'
ext: 'hbs'
Has anyone solved this problem before, or have any ideas?

Ouch, it looks like the docs are a bit off on that one. Thanks for pointing it out.
In order to use a custom file extension, you'll need to specify a custom view engine in the engine property. To do so for Handlebars, do:
npm install handlebars
npm install consolidate
and in config/views.js do:
engine: {
ext: 'hbs',
fn: require("consolidate").handlebars
}

grunt-autoshot 'cannot call method 'createPage' of undefined'

I'd like to get grunt-autoshot working to take screenshots of my project, but there seems to be one small hitch I can't find.
I've reconfigured the grunt.initConfig commands different ways and can't seem to get this to work. this is all locally hosted, the server is loading properly and i can see my sample files ('index.html') when grunt server is turned on . Below is what I'm using now based off the example page
Error: 'Fatal error: Cannot call method 'createPage' of undefined'
autoshot: {
default_options: {
options: {
// necessary config
path: 'screenshots/',
local: {
path: './test',
port: 9000,
files: [{
src: 'index.html',
dest: 'index.jpg'
}]
},
viewport: [
'320x480', '480x320', '384x640', '640x384', '602x963', '963x602', '600x960', '960x600', '800x1280', '1280x800', '768x1024', '1024x768'
]
},
},
},

You need to install PhantomJS.
If you're on a Mac you can do:
brew update && brew install phantomjs
Otherwise visit http://phantomjs.org/download.html

I was working with a friend and we just run into the same problem.
It looks like it's because of the phantomjs' version. I was using 1.9.2 and I was getting the same error, download and install 1.9.0 and it'll work (it did for me) you can download it from here: https://code.google.com/p/phantomjs/downloads/detail?name=phantomjs-1.9.0-macosx.zip&can=1&q=

Reusing/sharing views & models in different projects with Durandal JS

I'm building multiple applications using Durandal JS. All those applications are located on the same server under the same document root and share some common code. For example they all use the same model & view for login.
How can i reuse/share the login model & view in all those applications without just copy & pasting the files to the projects?
I already tried something with the following folder structure:
ProjectsDir/Project1/app/durandal/..
/models/Shell.js, Main.js, ...
/views/Shell.html, Main.html, ...
/main.js
/main-built.js
ProjectsDir/Project2/app/durandal/..
/models/Shell.js, Main.js, ...
/views/Shell.html, Main.html, ...
/main.js
/main-built.js
ProjectsDir/ProjectsBase/app/models/Login.js
/views/Login.html
This way it would be possible to reference the same login model & view in my ProjectsBase from all other projects by setting the correct route to it in the respective shell.js. This route could look something like this:
router.map([
{
url: 'Login',
moduleId: '../../ProjectsBase/app/models/Login',
name:'Login',
visible: true
},
{
url: 'Main',
moduleId: 'models/Main',
name:'Main',
visible: true
}
]);
This works as expected during debugging but building the production version with the durandal optimizer unfortunately doesn't work.
Actually building does work (it produces the main-built.js just fine) but when i launch the site with the production file referenced i get the following error:
Uncaught Error: undefined missing durandal/../../../MPBase/durandal-app/models/Login
I'd really appreciate any ideas on how I could make the built production file work with the setup I described above.
Of course I'm also open for other ideas on how to make models & views reusable/sharable between multiple projects.
Thanks

With some help from Durandals Google Group I found a solution.
It's not possible to use the provided optimizer.exe but it's quite easy to create a custom r.js config which can handle the setup I described in the question:
First of all I ran the optimizer.exe which created a basic config file (app.build.js) that i used as a starting point.
This config file automatically included all necessary files from the project itself (e.g. Project1).
The only things that are missing in this config file are the references to my shared code (the login files from the ProjectsBase directory). Therefore I added them manually along with a new path.
Custom app.build.js (3 changes highlighted with a comment, the rest is how it was built from the optizimer.exe):
{
"name": "durandal/amd/almond-custom",
"inlineText": true,
"stubModules": [
"durandal/amd/text"
],
"paths": {
"text": "durandal/amd/text",
"projectsbase": "../../ProjectsBase/" // New path to folder with shared files
},
"baseUrl": "ProjectsDir\\Project1\\app",
"mainConfigFile": "ProjectsDir\\Project1\\app\\main.js",
"include": [
"main",
"durandal/app",
"durandal/composition",
"durandal/events",
"durandal/http",
"text!durandal/messageBox.html",
"durandal/messageBox",
"durandal/modalDialog",
"durandal/system",
"durandal/viewEngine",
"durandal/viewLocator",
"durandal/viewModel",
"durandal/viewModelBinder",
"durandal/widget",
"durandal/plugins/router",
"durandal/transitions/entrance",
"projectsbase/app/models/Login", // Include for login model
"models/Main",
"models/Shell",
"text!projectsbase/app/views/Login.html", // Include for login view
"text!views/Main.html",
"text!views/Shell.html"
],
"exclude": [],
"keepBuildDir": true,
"optimize": "uglify2",
"out": "ProjectsDir\\Project1\\app\\main-built.js",
"pragmas": {
"build": true
},
"wrap": true,
"insertRequire": [
"main"
]
}
Now I only had to update my Shell.js to use the correct routes to the Login model & view by also adding a path to requirejs and using it correctly when setting the routes:
Add path at the very beginning of Shell.js:
requirejs.config({
paths: {
'projectsbase': '../../ProjectsBase/'
}
});
Set correct routes in activate method of Shell.js:
router.map([
{ url: 'Login', moduleId: 'projectsbase/app/models/Login', name:'Login', visible: true },
{ url: 'Main', moduleId: 'models/Main', name:'Main', visible: true }
]);
Now i can build my main-built.js which bundles & minifies all relevant files by opening the node js command line, browsing to the directory where the r.js config file is and create the build (the main-built.js) with the following command:
node r.js -o app.build.js
This way everything is included correctly when I'm working with the debug files and it's also working with the build main-built.js which also includes my shared files from the ProjectsBase.