I am trying to deploy my svelte app on GitHub Pages and cannot get rid of these errors I get from running 'npm run build'.
The exact errors are:
(node:15364) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
file:///C:/Isabella/personal-website/node_modules/#sveltejs/kit/dist/prerender.js:460
throw new Error(format_error(details, config));
^
Error: 404 /src/images/github.png (linked from /)
at file:///C:/Isabella/personal-website/node_modules/#sveltejs/kit/dist/prerender.js:460:11
at save (file:///C:/Isabella/personal-website/node_modules/#sveltejs/kit/dist/prerender.js:744:4)
at visit (file:///C:/Isabella/personal-website/node_modules/#sveltejs/kit/dist/prerender.js:635:3)
[vite-plugin-svelte-kit] Prerendering failed with code 1
error during build:
Error: Prerendering failed with code 1
at ChildProcess.<anonymous> (file:///C:/Isabella/personal-website/node_modules/#sveltejs/kit/dist/vite.js:2367:14)
at ChildProcess.emit (node:events:527:28)
at Process.ChildProcess._handle.onexit (node:internal/child_process:291:12)
And here is my svelte.config.js file:
import preprocess from 'svelte-preprocess';
import adapter from '#sveltejs/adapter-static';
/** #type {import('#sveltejs/kit').Config} */
const config = {
preprocess: preprocess(),
kit: {
// target: '#svelte',
adapter: adapter({
pages: 'build', // path to public directory
assets: 'build', // path to public directory
fallback: null,
}),
prerender: {
// This can be false if you're using a fallback (i.e. SPA mode)
default: true
}
}
};
export default config;
The issue is that you're linking to /src/images/github.png in index.svelte but the prerenderer can't find the file because it tries to look for the file in the default assets folder static.
To fix it change the link to the correct path and put the image in the static folder (i.e. images/github.png if you put the images folder in the static folder).
Related
Confused about what could have caused this to stop working, I installed solana and anchor and was able to test projects.
anchor --version anchor-cli 0.26.0
nvm use 16.16.0
Now using node v16.16.0 (npm v8.11.0)
anchor init hello-world
yarn install v1.22.19
warning package.json: No license field
info No lockfile found.
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
Done in 6.07s.
Initialized empty Git repository in /home/user/Code/anchor-second-test/hello-world/.git/
hello-world initialized
cd hello-world && anchor build works. Making no changes, I run anchor run test
1) hello-world
Is initialized!:
TypeError: Cannot read properties of undefined (reading 'methods')
at /home/user/Code/anchor-second-test/hello-world/tests/hello-world.ts:13:30
at Generator.next (<anonymous>)
at /home/user/Code/anchor-second-test/hello-world/tests/hello-world.ts:31:71
at new Promise (<anonymous>)
at __awaiter (tests/hello-world.ts:27:12)
at Context.<anonymous> (tests/hello-world.ts:11:36)
at processImmediate (node:internal/timers:466:21)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Here is hello-world.ts test file as generated:
import { Program } from "#project-serum/anchor";
import { HelloWorld } from "../target/types/hello_world";
describe("hello-world", () => {
// Configure the client to use the local cluster.
anchor.setProvider(anchor.AnchorProvider.env());
const program = anchor.workspace.HelloWorld as Program<HelloWorld>;
it("Is initialized!", async () => {
// Add your test here.
const tx = await program.methods.initialize().rpc();
console.log("Your transaction signature", tx);
});
});
I have tried using node lts 16.16.0 instead of the latest lts, starting in a clean directory, checking that typescript was installed, running yarn install before running anchor build command. I checked that the solana keypair and json file was generated in the correct folder.
Go to this ../target/types/hello_world directory and make sure it exports like this
export type HelloWorld = {}
since you have this import
import { HelloWorld } from "../target/types/hello_world";
also, you did not show anchor import . It should be
import * as anchor from "#project-serum/anchor";
I am new to vite and I can't figure out how to get it to build my entire project instead of just my index.html page. I run "npm run build" and every time it just does that index.html but in npm run dev it works fine. I have all my files on the same level as in the picture. How do I resolve this problem?
Create a vite.config.js file at the root of project and put this in it
const { defineConfig } = require('vite')
module.exports = defineConfig({
build: {
rollupOptions: {
input: {
main: './index.html',
about: './about.html',
shaderOne: './shaderOne.html',
// ...
// List all files you want in your build
}
}
}
})
If not, you will need to install vite locally. You can install it using npm install vite
See this documentation
Any idea why I would get this when trying to run component tests in Vue.js using Cypress? Is this a bug related to running on MacOS Catalina? (I ask because I think VolumeIcon.icns is a OS X thing??)
The following error was thrown by a plugin. We stopped running your tests because a plugin crashed. Please check your plugins file (/Users/MLaw/vue-app/tests/plugins/index.js)
Error: ENOENT: no such file or directory, stat '/.VolumeIcon.icns'
Error: The following error was thrown by a plugin. We stopped running your tests because a plugin crashed. Please check your plugins file (`/Users/MLaw/vue-app/tests/plugins/index.js`)
at Object.get (/Users/MLaw/Library/Caches/Cypress/5.6.0/Cypress.app/Contents/Resources/app/packages/server/lib/errors.js:968:15)
at EventEmitter.handleError (/Users/MLaw/Library/Caches/Cypress/5.6.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/index.js:159:20)
at EventEmitter.emit (events.js:310:20)
at ChildProcess.<anonymous> (/Users/MLaw/Library/Caches/Cypress/5.6.0/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
at ChildProcess.emit (events.js:310:20)
at emit (internal/child_process.js:876:12)
at processTicksAndRejections (internal/process/task_queues.js:85:21)
My index.js looks like:
const preprocessor = require('#cypress/vue/dist/plugins/webpack');
module.exports = (on, config) => {
preprocessor(on, config);
// IMPORTANT return the config object
return config
};
sudo touch /.VolumeIcon.icns
I use M1 MacOS, it works for me.
I'm trying to enable the lossyPNG property in the ember-cli-imagmin addon to create a small file size for my .pngs. My EmberApp in ember-cli-build.js includes imagemin like so:
imagemin: {
interlaced: true,
optimizationLevel: 3,
progressive: true,
lossyPNG: true,
pngquant: {
speed: 1,
quality: 80
}
}
The dependencies object in my package.json includes:
{ ...
"ember-cli-imagemin": "0.4.0",
"imagemin": "3.2.2",
"imagemin-pngquant": "4.2.2",
...
}
However, whenever I run ember build I get the following error:
The Broccoli Plugin: [object Object] failed with:
TypeError: ImageMin.pngquant is not a function
This error points me to this line in broccoli-imagemin. If I set lossyPNG to false in ember-cli-build.js then I receive no error, but my pngs could be optimized further based on the results from pagespeed. What am I missing to be able to use pngquant to further optimize my png images?
broccoli-imagemin, which ember-cli-imagemin depends upon, is the problem. Since it hasn't been updated since Nov 2014, it uses an older version of imagemin, but the package.json specification allows imagemin v3.x. pngquant was removed as a default property in imagemin v3.2.0. So if you force the installation of imagemin v3.1.0 in your package.json it should work.
If you want to use a more recent version of imagemin look at this PR. I'd try to use that branch directly. You can install that branch directly from the repo with:
ember install https://github.com/kanongil/ember-cli-imagemin.git#v5-imagemin
This branch changes how imagemin works. Instead of passing options, it looks like you just pass the plugins that you want to use, and pass their options directly in to them.
var app = new EmberApp({
imagemin: {
plugins: [
require('imagemin-jpegtran')({ progressive: true }),
require('imagemin-pngquant')({speed: 1, quality: 80}),
require('imagemin-svgo')()
]
}
});
I found this issues in the official, but it looks like they refused to answer.
So I can only ask questions on SO.
Here is my Error&Warning Log:
WARNING in ./~/aws-sdk/lib/util.js
Critical dependencies:
40:30-45 the request of a dependency is an expression
43:11-53 the request of a dependency is an expression
# ./~/aws-sdk/lib/util.js 40:30-45 43:11-53
WARNING in ./~/aws-sdk/lib ^\.\/.*$
Module not found: Error: Cannot resolve directory '.' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
# ./~/aws-sdk/lib ^\.\/.*$
WARNING in ./~/aws-sdk/lib/api_loader.js
Critical dependencies:
13:15-59 the request of a dependency is an expression
104:12-46 the request of a dependency is an expression
108:21-58 the request of a dependency is an expression
114:18-52 the request of a dependency is an expression
# ./~/aws-sdk/lib/api_loader.js 13:15-59 104:12-46 108:21-58 114:18-52
WARNING in ./~/aws-sdk/lib/region_config.json
Module parse failed: /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib/region_config.json Line 2: Unexpected token :
You may need an appropriate loader to handle this file type.
| {
| "rules": {
| "*/*": {
| "endpoint": "{service}.{region}.amazonaws.com"
# ./~/aws-sdk/lib ^\.\/.*$
ERROR in ./~/aws-sdk/lib/api_loader.js
Module not found: Error: Cannot resolve module 'fs' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
# ./~/aws-sdk/lib/api_loader.js 1:9-22
ERROR in ./~/aws-sdk/lib/services.js
Module not found: Error: Cannot resolve module 'fs' in /Users/me/Documents/Sources/my-project/client/node_modules/aws-sdk/lib
# ./~/aws-sdk/lib/services.js 1:9-22
There are three types:
Cannot resolve module 'fs'
I only need to install fs can solve this.
need an appropriate loader
Well, this will need to install json-loader, and set it in webpack.config.js, but also can solve.
Critical dependencies
Module not found: Error: Cannot resolve directory '.'
I webpack newbie.So, i don't know how to solve this.
Will someone help me? thanks.
UPDATE:
Module not found: Error: Cannot resolve directory '.'
that is my fault, config file's extensions missing a .
I found this blog post that fixed it for me.
Essentially you need to import the built version of the library.
All credit goes to the author. Here is the code:
require('aws-sdk/dist/aws-sdk');
var AWS = window.AWS;
ES6 version:
import 'aws-sdk/dist/aws-sdk';
const AWS = window.AWS;
config:
module: {
noParse: [
/aws/
]
}
usage:
window.AWS to the reference of the global AWS object.
Using the noParse method should work if you are creating a node package, as this is setting webpack to not apply any parsing/loaders. This did not work for me when creating a umd formatted output file/library.
To create a umd formatted library I had to use loaders to Browserify aws-sdk and handle json files.
Install the loaders:
npm install json-loader --save-dev
npm install transform-loader brfs --save-dev
Webpack Config:
module: {
loaders: [
{ test: /aws-sdk/, loaders: ["transform?brfs"]},
{ test: /\.json$/, loaders: ['json']},
]
},
output: {
library: 'LibraryName',
libraryTarget: 'umd'
},
resolve: {
extensions: ['', '.js']
}
Replace LibraryName with you own namespacing. Currently the library would be used through a constructor as follows:
var libObj = new LibraryName();
AWS SDK added support to webpack starting from version 2.6.1, please see Using webpack and the AWS SDK for JavaScript to Create and Bundle an Application – Part 1 blog post describing how to require aws-sdk into webpack bundle.
use npm install json-loader --save-dev
add the following code to webpack.config.js
module: {
loaders: [{
test: /\.js$/,
loaders: ['babel'],
exclude: /node_modules/,
},
{
test: /.json$/,
loaders: ['json']
}]
}
Just import * as AWS from 'aws-sdk'
Notice that we specified a loader to tell webpack how to handle importing JSON files, in this case by using the json-loader we installed earlier. By default, webpack only supports JavaScript, but uses loaders to add support for importing other file types as well. The AWS SDK makes heavy use of JSON files, so without this extra configuration, webpack will throw an error when generating the bundle.
Update(2015-10-20):
aws-sdk fix this. i can use it from npm.
thanks, aws-sdk team.