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=
Related
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
I'm using Sentry for error reporting on the React app that I created.
The problem with it is that I don't have an idea how to debug certain issues because I don't know what's the exact file the error occurred in:
I'm using Laravel mix for compiling. The webpack.mix.js looks like this:
mix
.react("resources/js/checkout/CheckoutRoot.js", "public/js")
.version();
I tried using sourceMaps() like so:
const productionSourceMaps = true;
mix
.react("resources/js/checkout/CheckoutRoot.js", "public/js")
.react("resources/js/checkout/DonationRoot.js", "public/js")
.version()
.sourceMaps(productionSourceMaps, "source-map")
But it doesn't seem to work. It appended this right below the file when viewing in Chrome dev tools:
//# sourceMappingURL=27.js.map?id=c4f9bf41f206bfad8600
But when I pretty print it still results in the same gibberish:
I'm expecting to see it point out to the component file I'm working on locally. Is that possible?
Update
I tried installing Sentry's webpack plugin:
const SentryWebpackPlugin = require("#sentry/webpack-plugin");
let config = {
output: {
publicPath: "/",
chunkFilename: "js/chunks/[name].js?id=[chunkhash]",
},
plugins: [
new SentryWebpackPlugin({
// sentry-cli configuration
authToken: "MY_AUTH_TOKEN",
org: "MY_ORG",
project: "MY_PROJECT",
release: "MY_RELEASE",
include: ".",
ignore: ["node_modules", "webpack.config.js"],
}),
],
};
Used the same release when initializing Sentry on my source file:
Sentry.init({
dsn: "MY_DSN",
release: "testing",
});
Put some failing code:
useEffect(() => {
console.bog("MY_RELEASE");
}, []);
Then compiled like usual:
npm run production
I triggered the error on the browser and I got the expected file in there (MobilePayment.js):
But from Sentry, all I get is this:
I would expect to find MobilePayment.js in there but there's none.
When compiling, I got this:
So I assume it uploaded the sources to Sentry.
I even tried the same thing using Sentry-cli:
sentry-cli releases files release upload-sourcemaps --ext js --ext map /path/to/public/js
And it pretty much did the same thing:
I then triggered the same error. But I still got the same output from Sentry dashboard. Please help.
I've run into this before.
IIRC the trick was finding the correct devtool WebPack option.
I can't remember exactly, but I think I used eval-cheap-module-source-map or eval-source-map.
Using Nativescript & Angular I have been trying to implement a clock counter in a Web Worker thread.
Currently, the app initiates the clock counter using a setInterval function and although that works, it implies that the clock counter is on the main thread where it doesn't need to be.
So, the intention is to move the clock counter to a different thread and therefore not burden the main thread.
I started of simple, trying to write similar code that I got from this page: frenetic.be
However, trying to initialize the worker process as w = new Worker("simple-timer.js");
But this lead me to the error:
ERROR Error: com.tns.NativeScriptException: Failed to find module: "simple-timer.js" relative to app//
despite the fact that the file was in the same folder as the component from which it was called.
So, digging deeper, I ended up trying to make sense of the nativescript page on web workers
This seems to imply that it should be relatively simple and that the new Worker() should be called with a valid path argument. Though this failed, with the same error as above.
So taking the deep-dive, I tried to follow the following instructions: github page
Though this managed to f*ck up things even further.
Though there is one step that I couldn't do (step 2 in Usage Typescript) github page, section
Which refers to the references.d.ts but that file is apparently no longer part of the nativescript file set for an app.
So, I reduced to simpler means and downloaded the angular-demo file and looked if I could understand the method they followed. Copied the service, almost 1-1 and added a testmethod to my component.
That gave an plugin error, so, I added the plugin reference as per section 7 & 8 on the github page
Although this get's me quite far, I now still end up with the same error?
For some reason, the file paths simply do not seem to be translated correctly and hence the correct files are not found?
I have also looked at:
How to use Nativescript worker with typescript?
and this one
Is it feasible to use web worker (multi-threading) in Angular and Typescript in NativeScript?
Anybody have usefull tips on how to implement this correctly?
You have to include your worker(s) files to Webpack using config file so I have just added this line to webpack.config.js and it worked!
new CopyWebpackPlugin([
{ from: { glob: 'css/**', dot: false } },
->{ from: { glob: 'backgroundTasks/**', dot: false } },
{ from: { glob: 'images/**', dot: false } },
{ from: { glob: 'fonts/**', dot: false } },
{ from: { glob: 'sounds/**', dot: false } },
{ from: { glob: '**/*.jpg', dot: false } },
{ from: { glob: '**/*.png', dot: false } },
], copyIgnore),
I'm trying to test protractor on a vanilla.js app and when I run protractor basicConf.js
I am getting below error :
This webpage is not available ERR_CONNECTION_REFUSED
This is my test:
describe('foo', function() {
beforeEach(function() {
browser.get('index.html');
});
it('should return the same result as browser.findElement', function() {
$('#newItem').sendKeys('sdg');
element('#addBtn').click().then(function(){
});
});
})
And my protractor config:
// The main suite of Protractor tests.
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
framework: 'jasmine2',
// Spec patterns are relative to this directory.
specs: [
'spec.js'
],
// Exclude patterns are relative to this directory.
exclude: [
'basic/exclude*.js'
],
capabilities: {'browserName': 'chrome'},
baseUrl: 'http://localhost:' + ( '8082'),
jasmineNodeOpts: {
isVerbose: true,
realtimeFailure: true
},
params: {
login: {
user: 'Jane',
password: '1234'
}
}
};
Any ideas what I need to do to start fixing this?
I have run both:
protactor npm install -g protractor
webdriver webdriver-manager update
Error connection gets refused if either the webdriver server isn't started or there is a configuration compatibility issue with your protractor and browser. Looking at your config file and config data, there is no such issue. However, you should start your webdriver before running your tests. Open a command prompt in windows or terminal in mac and then run the following command to start the selenium webdriver -
webdriver-manager start
Later run your protractor scripts with the command that you already have. Hope this helps.
Looking over your test I believe the issue originates from the address that you are passing to the browser.get() function. You'll want to either reference the baseUrl you setup in the config file and append the "index.html" piece in your test or adjust the baseUrl and reference that in your beforeEach function. Try one of the following:
...
baseUrl: 'http://localhost:8082',
...
browser.get(browser.baseUrl + '/index.html');
or
...
baseUrl: 'http://localhost:8082/',
...
browser.get(browser.baseUrl);
or
browser.get('http://localhost:8082/index.html');
Also you could try this:
...
baseUrl: 'http://localhost:8082/index.html');
...
browser.get(browser.baseUrl);
I have simple grunt-browserify config. This configuration works perfectly until I change any JavaScript file, then "watchify" compiles build again. Since that moment build.js fails in browser with exception: Uncaught Error: Cannot find module 'i18n'
Seems like "watchify" ingnores alias option, or Am I doing something wrong ?
browserify: {
client: {
src: ['app/app.js'],
dest: 'app/build.js',
options: {
browserifyOptions: {
debug: true
},
alias: [
'./app/dispatchers/appDispatcher.js:appDispatcher',
'./app/models/i18n.js:i18n'
],
watch: true
}
}
}
Thank you.
Adding cache:false solves the problem. My only concern is that caching helps to speed up the process. So but turning it off I'm slowing down re-building process.
...
browserifyOptions: {
...
cache: false
}
...
Problem comes from "module-deps" package. Following commit fixes this issue. Wait for official build and then caching option can be removed.
link to commit