When I run gatsby build I get this error:
failed Building static HTML for pages - 10.179s
ERROR #95313
Building static HTML failed
See our docs page for more info on this error: https://gatsby.dev/debug-html
343 | for (c = []; b < a; ++b) {
344 | for (var n = 0; n < m; ++n) {
> 345 | c[v++] = Z(d[n] + ' ', h[b], e).trim();
| ^
346 | }
347 | }
348 |
WebpackError: The module '/node_modules/canvas/build/Release/canvas.node'
- stylis.esm.js:345
node_modules/#emotion/stylis/dist/stylis.esm.js:345:1
- stylis.esm.js:151
node_modules/#emotion/stylis/dist/stylis.esm.js:151:1
- stylis.esm.js:175
node_modules/#emotion/stylis/dist/stylis.esm.js:175:1
- stylis.esm.js:286
node_modules/#emotion/stylis/dist/stylis.esm.js:286:1
- stylis.esm.js:151
node_modules/#emotion/stylis/dist/stylis.esm.js:151:1
- stylis.esm.js:175
node_modules/#emotion/stylis/dist/stylis.esm.js:175:1
- stylis.esm.js:286
node_modules/#emotion/stylis/dist/stylis.esm.js:286:1
- stylis.esm.js:151
How to solve? When run gatsby develop there is no error.
Update gatsby-config.js to contain the plugin gatsby-plugin-emotion:
module.exports = {
plugins: [
`gatsby-plugin-emotion`,
],
}
This needs a restart of the gatsby development process.
Add this snippet in the gatsby-node.js:
exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: /canvas/,
use: loaders.null(),
},
],
},
})
}
}
There's a package that is trying to access global objects such as window or document in your SSR (Server-Side Rendering) where obviously is not defined (it even exist) because gatsby-build occurs in the Node server while gatsby develop occurs in the browser-side, where the window exists and the compilation time. With the snippet above, you are adding a null loader to the offending module when webpack transpile the code.
The rule test is a regular expression (hence the braces, /) that matches the folder name inside node_modules. The output error shows a canvas issue but you may need to change it to /stylis/
Related
I am trying to get a Cypress example test running in Browserstack. I am following this tutorial: Run your Cypress tests
However when it comes to running browserstack-cypress run im getting the following output:
[2020-12-4 17:00:12] - info: Reading config from /home/dennis/Repos/CMS/browserstack.json
[2020-12-4 17:00:12] - info: Reading username from the environment variable BROWSERSTACK_USERNAME
[2020-12-4 17:00:12] - info: Reading access key from the environment variable BROWSERSTACK_ACCESS_KEY
[2020-12-4 17:00:12] - info: browserstack.json file is validated
[2020-12-4 17:00:46] - error: Malformed archive
[2020-12-4 17:00:46] - error: Zip Upload failed.
[2020-12-4 17:00:46] - info: Zip file deleted successfully.
This is what my browserstack.json looks like:
{
"auth": {
"username": "<user name>",
"access_key": "<access key>"
},
"browsers": [
{
"browser": "chrome",
"os": "Windows 10",
"versions": [
"latest",
"latest-1"
]
}
],
"run_settings": {
"cypress_config_file": "./cypress.json",
"project_name": "<project name>",
"build_name": "",
"parallels": "10",
"npm_dependencies": {},
"package_config_options": {}
},
"connection_settings": {
"local": false,
"local_identifier": null
},
"disable_usage_reporting": false
}
The cypress.json file is empty:
{}
What I'm also not getting is where I am defining what tests I want to run and where they are located.
I appreciate any help! Thanks!
I've come across the "Malformed archive" error when the runner tries to compress the entire project and tries to upload it instead of just the Cypress Test files.
You should be able to fix this by moving the Cypress test files into a subfolder:
test
|
| cypress.json
| Browserstack.json
| cypress
|
| fixtures
| integration
| support
| plugins
Set the path to cypress.json in browserstack.json
Refer: https://www.browserstack.com/docs/automate/cypress/sample-tutorial
My use-case is this:
I have a static library which I want to be available for some profiles (e.g. "gcc", "arm-gcc", "mips-gcc").
I also have an application which links to this library, but this applications should only build using a specific profile (e.g. "arm-gcc").
For this I am modifying the app-and-lib QBS example.
The lib.qbs file:
import qbs 1.0
Product {
qbs.profiles: ["gcc", "arm-gcc", "mips-gcc"] //I added only this line
type: "staticlibrary"
name: "mylib"
files: [
"lib.cpp",
"lib.h",
]
Depends { name: 'cpp' }
cpp.defines: ['CRUCIAL_DEFINE']
Export {
Depends { name: "cpp" }
cpp.includePaths: [product.sourceDirectory]
}
}
The app.qbs file:
import qbs 1.0
Product {
qbs.profiles: ["arm-gcc"] //I added only this line
type: "application"
consoleApplication: true
files : [ "main.cpp" ]
Depends { name: "cpp" }
Depends { name: "mylib" }
}
The app build fails. Qbs wrongly tries to link to the "gcc" version of the library instead of the "arm-gcc" version, as you can see in the log:
Build graph does not yet exist for configuration 'default'. Starting from scratch.
Resolving project for configuration default
Setting up build graph for configuration default
Building for configuration default
compiling lib.cpp [mylib {"profile":"gcc"}]
compiling lib.cpp [mylib {"profile":"arm-gcc"}]
compiling lib.cpp [mylib {"profile":"mips-gcc"}]
compiling main.cpp [app]
creating libmylib.a [mylib {"profile":"gcc"}]
creating libmylib.a [mylib {"profile":"mips-gcc"}]
creating libmylib.a [mylib {"profile":"arm-gcc"}]
linking app [app]
ERROR: /usr/bin/arm-linux-gnueabihf-g++ -o /home/user/programs/qbs/usr/local/share/qbs/examples/app-and-lib/default/app.7d104347/app /home/user/programs/qbs/usr/local/share/qbs/examples/app-and-lib/default/app.7d104347/3a52ce780950d4d9/main.cpp.o /home/user/programs/qbs/usr/local/share/qbs/examples/app-and-lib/default/mylib.eyJwcm9maWxlIjoiZ2NjIn0-.792f47ec/libmylib.a
ERROR: /home/user/programs/qbs/usr/local/share/qbs/examples/app-and-lib/default/mylib.eyJwcm9maWxlIjoiZ2NjIn0-.792f47ec/libmylib.a: error adding symbols: File format not recognized
collect2: error: ld returned 1 exit status
ERROR: Process failed with exit code 1.
The following products could not be built for configuration default:
app
The build fails only when selecting one profile in the app.qbs file, and this profile should not be the first profile in the qbs.profiles line in the lib.qbs file.
When selecting two or more profiles - the build succeeds.
My analysis:
I think this problem is related to multiplexing:
The lib.qbs contains more than one profile. This turns on multiplexing when building the library, which, in turn, adds additional 'multiplexConfigurationId' to the build-directory name (moduleloader.cpp).
The app.lib contains only one profile, so multiplexing is not turned on and the build-directory name does not get the extra string.
The problem can be solved by changing the code (moduleloader.cpp) so that multiplexing is turned even if there is only one profile i.e. with the following patch:
--- moduleloader.cpp 2018-10-24 16:17:43.633527397 +0300
+++ moduleloader.cpp.new 2018-10-24 16:18:27.541370544 +0300
## -872,7 +872,7 ##
= callWithTemporaryBaseModule<const MultiplexInfo>(dummyContext,
extractMultiplexInfoFromProduct);
- if (multiplexInfo.table.size() > 1)
+ if (multiplexInfo.table.size() > 0)
productItem->setProperty(StringConstants::multiplexedProperty(), VariantValue::trueValue());
VariantValuePtr productNameValue = VariantValue::create(productName);
## -891,7 +891,7 ##
const QString multiplexConfigurationId = multiplexInfo.toIdString(row);
const VariantValuePtr multiplexConfigurationIdValue
= VariantValue::create(multiplexConfigurationId);
- if (multiplexInfo.table.size() > 1 || aggregator) {
+ if (multiplexInfo.table.size() > 0 || aggregator) {
multiplexConfigurationIdValues.push_back(multiplexConfigurationIdValue);
item->setProperty(StringConstants::multiplexConfigurationIdProperty(),
multiplexConfigurationIdValue);
This worked for my use case. I don't know if it make sense in a broader view.
Finally, the questions:
Does it all make sense?
Is this a normal behavior?
Is this use-case simply not supported?
Is there a better solution?
Thanks in advance.
Yes, the default behavior with multiplexing is that the a non-multiplexed product depends on all variants of the dependency. In general, there is no way for a user to change that behavior, but there should be.
However, luckily for you, profiles are special:
Depends { name: "mylib"; profiles: "arm-gcc" }
This should fix your problem.
SBT is silently failing when it can't download a plugin via SSH from a Git repository.
This is the output of SBT when it's trying to download the repository:
[info] Updating ProjectRef(uri("ssh://git#repository.com/plugin.git"), "plugin")...
# (nothing after that line)
And it just terminates after that with no explanation. This is very likely a bug with SBT's downloading of plugins via SSH from a Git repository.
When downloading the plugin succeeds, this line is printed:
[info] Done updating.
So for some reason, SBT isn't stating what's wrong, even when executed like this:
sbt -Xdebug test
Here are the relevant configuration files:
# project/build-properties
sbt.version=1.1.5
# project/plugins.sbt
lazy val buildPlugin = RootProject(uri("ssh://git#repository.com/plugin.git"))
lazy val root = (project in file(".")).dependsOn(buildPlugin)
Questions:
1. How can I get SBT to print more debugging information?
2. Where in the SBT code could I fix this bug?
3. How can I build and use my own version of SBT?
How can I get SBT to print more debugging information?
Using the latest launching script available from https://www.scala-sbt.org/download.html (1.2.1 as of August, 2018), you can run:
$ sbt -debug
Where in the SBT code could I fix this bug?
See my answer here https://github.com/sbt/sbt/issues/1120#issuecomment-415553592:
Here are some of the relevant code:
Load.builtinLoader - https://github.com/sbt/sbt/blob/v1.2.1/main/src/main/scala/sbt/internal/Load.scala#L480-L488
RetrieveUnit - https://github.com/sbt/sbt/blob/v1.2.1/main/src/main/scala/sbt/internal/RetrieveUnit.scala
Resolvers.git - https://github.com/sbt/sbt/blob/v1.2.1/main/src/main/scala/sbt/Resolvers.scala#L82-L101
Resolvers.creates - https://github.com/sbt/sbt/blob/v1.2.1/main/src/main/scala/sbt/Resolvers.scala#L145-L155
val git: Resolver = (info: ResolveInfo) => {
val uri = info.uri.withoutMarkerScheme
val localCopy = uniqueSubdirectoryFor(uri.copy(scheme = "git"), in = info.staging)
val from = uri.withoutFragment.toASCIIString
if (uri.hasFragment) {
val branch = uri.getFragment
Some { () =>
creates(localCopy) {
run("git", "clone", from, localCopy.getAbsolutePath)
run(Some(localCopy), "git", "checkout", "-q", branch)
}
}
} else
Some { () =>
creates(localCopy) {
run("git", "clone", "--depth", "1", from, localCopy.getAbsolutePath)
}
}
}
....
def creates(file: File)(f: => Unit) = {
if (!file.exists)
try {
f
} catch {
case NonFatal(e) =>
IO.delete(file)
throw e
}
file
}
How can I build and use my own version of SBT?
https://github.com/sbt/sbt/blob/1.x/CONTRIBUTING.md#build-from-source
For this, you just need sbt/sbt, and publishLocal.
I am trying to run the command npm run build but it is not working. and I am getting the error below:
> typescript#1.0.0 build /Users/Prashant/Code/typescript
> webpack
Hash: c6dbd1eb3357da70ca81
Version: webpack 3.2.0
Time: 477ms
Asset Size Chunks Chunk Names
bundle.js 2.89 kB 0 [emitted] main
[0] ./src/index.js 51 bytes {0} [built]
[1] ./src/index.css 290 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.css
Module build failed: Unknown word (5:1)
3 | // load the styles
4 | var content = require("!!./index.css");
> 5 | if(typeof content === 'string') content = [[module.id, content, '']];
| ^
6 | // Prepare cssTransformation
7 | var transform;
8 |
# ./src/index.js 1:0-22
My web pack config file(webpack.config.js) is:
var path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'css-loader',
'style-loader'
]
}
]
}
};
And my CSS file(index.css) is
body {
color:red;
}
and my js file index.js is below:
require("./index.css");
alert('this is my alert');
I am trying to run the file but it is not working I have checked all the spelling also try to add a lot of other CSS but it is not working, can you please help me how can I solve this issue?
The loaders are applied in reverse order. That means you're applying style-loader first and then pass its result to css-loader. The output of style-loader is JavaScript, which will insert the styles into a <style> tag, but css-loader expects CSS and fails to parse JavaScript as it is not valid CSS.
The correct rule is:
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
}
I was having the same problem and eventually found that there was a second module rule in the webpack config that was processing *.css files
I solved this by just creating style.css file from the same directory of my js file
I have been trying to get this working for hours and have searched SO and Google extensively but can't find anything similar, so apologies if this has been asked before. It's also my first question, so please forgive any formatting errors or bad practice (e.g. I was unsure whether to post my full Gulp file, so erred on the side of providing as much info as possible).
The problem: My gulp file goes through the full list of tasks on launching it, but if I change and save my main.css file it provides the error shown below...
My Gulp file looks like this:
'use strict';
var gulp = require('gulp');
var watch = require('gulp-watch');
var elixir = require('laravel-elixir');
var minifycss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-sass');
var exec = require('child_process').exec;
var sys = require('sys');
var browserSync = require('browser-sync').create();
gulp.task('elixir', function(){
return elixir(function(mix) {
mix.sass('app.scss','public/css',{outputStyle: 'compressed'})
.styles([
'bootstrap.min.css','sweetalert.css','font-awesome.min.css','main.css'
],'public/css')
.scripts([
'jquery.min.js','bootstrap.min.js','sweetalert-dev.js'
],'public/js');
});
});
gulp.task('css', function(){
return gulp.src('public/css/all.css')
.pipe(autoprefixer('last 15 version'))
.pipe(minifycss({keepSpecialComments : 0}))
.pipe(gulp.dest('public/css'))
.pipe(notify({ message: 'CSS compiled, prefixed and minified.' }));
});
gulp.task('phpunit', function(){
exec('phpunit', function(error, stdout){
sys.puts(stdout);
notify({ message: 'Unit testing complete.' });
});
});
gulp.task('browserSync', function(){
browserSync.init({
browser: "firefox",
proxy: "http://localhost/laravelbp/"
});
browserSync.reload;
});
gulp.task('watch', function () {
gulp.watch('*.php', ['phpunit']);
gulp.watch('*.css', ['elixir','css','browserSync']);
});
gulp.task('default',['elixir','css','phpunit','browserSync','watch']);
And the output in the terminal looks like this:
Tue Sep 20(16:00)~ root#:/opt/lampp/htdocs/laravelbp: gulp
(node) sys is deprecated. Use util instead.
[15:59:18] Using gulpfile /opt/lampp/htdocs/laravelbp/gulpfile.js
[15:59:18] Starting 'elixir'...
[15:59:19] Finished 'elixir' after 246 ms
[15:59:19] Starting 'css'...
[15:59:19] Starting 'phpunit'...
[15:59:19] Finished 'phpunit' after 10 ms
[15:59:19] Starting 'browserSync'...
[15:59:19] Finished 'browserSync' after 48 ms
[15:59:19] Starting 'watch'...
[15:59:19] Finished 'watch' after 59 ms
[15:59:19] Starting 'default'...
[15:59:19] Starting 'styles'...
Fetching Styles Source Files...
- resources/assets/css/bootstrap.min.css
- resources/assets/css/sweetalert.css
- resources/assets/css/font-awesome.min.css
- resources/assets/css/main.css
Saving To...
- public/css/all.css
[15:59:19] Finished 'default' after 474 ms
(node) util.puts is deprecated. Use console.log instead.
PHPUnit 4.8.27 by Sebastian Bergmann and contributors.
.
Time: 609 ms, Memory: 8.50MB
OK
(1 test, 2 assertions)
[BS] Proxying: http://localhost
[BS] Access URLs:
---------------------------------------------
Local: http://localhost:3000/laravelbp/
External: http://10.0.2.15:3000/laravelbp/
---------------------------------------------
UI: http://localhost:3001
UI External: http://10.0.2.15:3001
---------------------------------------------
[15:59:20] gulp-notify: [Gulp notification] CSS compiled, prefixed and minified.
[15:59:20] Finished 'css' after 1.5 s
[15:59:20] gulp-notify: [Laravel Elixir] Stylesheets Merged!
[15:59:20] Finished 'styles' after 1.44 s
[15:59:20] Starting 'scripts'...
Fetching Scripts Source Files...
- resources/assets/js/jquery.min.js
- resources/assets/js/bootstrap.min.js
- resources/assets/js/sweetalert-dev.js
Saving To...
- public/js/all.js
[15:59:22] gulp-notify: [Laravel Elixir] Scripts Merged!
[15:59:22] Finished 'scripts' after 1.72 s
[15:59:36] Starting 'styles'... ** << Here is where I hit Save on main.css**
[15:59:36] 'styles' errored after 187 μs
[15:59:36] TypeError: Cannot read property 'run' of undefined
at Gulp.<anonymous> (/opt/lampp/htdocs/laravelbp/node_modules/laravel-elixir/index.js:89:51)
at module.exports (/opt/lampp/htdocs/laravelbp/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/opt/lampp/htdocs/laravelbp/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/opt/lampp/htdocs/laravelbp/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/opt/lampp/htdocs/laravelbp/node_modules/orchestrator/index.js:134:8)
at Function.<anonymous> (/opt/lampp/htdocs/laravelbp/node_modules/laravel-elixir/tasks/watch.js:41:39)
at bound (domain.js:287:14)
at runBound (domain.js:300:12)
at asyncRunner (/opt/lampp/htdocs/laravelbp/node_modules/async-done/index.js:36:18)
at nextTickCallbackWith0Args (node.js:452:9)
So, to sum up, the Gulp (version 3.9.1) file goes through the 'styles' no problem on the first run including loading the browser with any changes I've made to main.css before running Gulp, but if I make any changes to main.css and hit save while Gulp is running the above error shows up and keeps showing up every time I hit save.
Any help would be greatly appreciated.