Develop Reference

How to migrate from plain Svelte to add SvelteKit features?

I created a svelte app using Vite from the Svelte template. I have a tiny package.json and I want to start using Sveltekit. Here is the package.json
{
"name": "jxb2",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"devDependencies": {
"#sveltejs/vite-plugin-svelte": "^2.0.2",
"svelte": "^3.55.1",
"vite": "^4.1.0"
},
"dependencies": {
"axios": "^1.3.2"
}
}
However, the docs dont say anything about making this ugprade. Sveltekit talks about how to create a project but says nothing about upgrading from svelte. I want to use the routing feature.
I can find a page about migrating from sapper but i dont want to do that, I want to get there from Svelte

What I ended up doing was just copy-pasting my whole project over from the svelte proj into the sveltekit proj
Took about three minutes because it's still a small job. Mostly changed ./path to ../path to accommodate my files now being in /src/routes instead of /src/App.svelte

Lambda function with additional dependencies

I'm starting a CDK lambda project which gets the source code like this:
code: lambda.Code.fromAsset("resources"),
handler: "synthetic_test.main",
There's a single javascript file synthetic_test.js in that folder.
This seems to work but I can't figure out how to make it so that I could do:
const axios = require("axios");
in that file.
For some reason it seems to be able to import:
const AWS = require("aws-sdk");
but nothing else.
I did yarn add axios which added it to the package.json of my CDK project. But that does not really seem to help the lambda a lot.

The AWS Lambda runtime environment includes native language libraries and the relevant language-specific AWS SDK.
It does not contain arbitrary third-party packages. You need to either package those dependencies with your code or create a Lambda Layer that includes the dependencies and configure your Lambda function to use the Lambda Layer.
To package CDK app dependencies, see #aws-cdk/aws-lambda-nodejs and here.

I went with packaging dependencies with my code
My cdk went to
// 👇 define PUT account function
const putAccountLambda = new lambda.Function(this, "put-account-lambda", {
runtime: lambda.Runtime.NODEJS_14_X,
handler: "main.handler",
code: lambda.Code.fromAsset(path.join(__dirname, "/../src/put-account/dist")),
environment: {
REGION,
ADMINS_TABLE,
ADMINS_TABLE_PARTITION_KEY,
HASH_ALG,
}
})
With dist being the folder with a packed main.js file. And this file has a handler entrypoint. I had to update the package.json of these lambdas with packed dependencies.
{
"name": "put-account",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack --mode=production --env env=prod",
"build:dev": "webpack --mode=development --env env=dev"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.66.0",
"webpack-cli": "^4.9.1",
"webpack-merge": "^5.8.0"
},
"dependencies": {
"aws-sdk": "^2.1058.0",
"crypto": "^1.0.1",
"uuid": "^8.3.2"
}
}
And I updated the package.json of my cdk project to these scripts.
"build": "tsc && npm run build:webpack",
"build:webpack": "for file in ./src/*; do (cd $file && npm i && npm run build) & done",
"build:beta": "tsc && npm run build:webpack:beta",
"build:webpack:beta": "for file in ./src/*; do (cd $file && npm i && npm run build:dev) & done",
Notice that my file structure is as follows:
./
bin
lib
src
package.json
With src holding the source code for my project's lambdas.
I am not sure if you are familiar with webpack, but I have divided my webpack configuration in common, dev, prod.
A dev webpack configuration is specially useful for debugging because otherwise you lose line numbers among other useful information when something goes wrong on runtime.

Uncaught ReferenceError when deploying to Netlify

I have published a git repo (https://github.com/GeorgeFlorian/Forkify-App) to Netlify (https://forkify-jorje.netlify.app/) after following an Udemy tutorial:
Everything works locally, but when I deploy it I get
Uncaught ReferenceError: Fraction is not defined
at View.js:96
Fraction is not even inside View.js module: https://github.com/GeorgeFlorian/Forkify-App/blob/main/src/js/views/View.js
It is inside another one: https://github.com/GeorgeFlorian/Forkify-App/blob/main/src/js/views/recipeView.js
I don't know how to recreate this bug. All I did was follow the tutorial. The tutor's deployment worked, mine did not.
This is package.json:
{
"name": "forkify-app",
"version": "1.0.0",
"description": "",
"default": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html --dist-dir ./dist"
},
"repository": {
"type": "git",
"url": "git+https://github.com/GeorgeFlorian/Forkify-App.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/GeorgeFlorian/Forkify-App/issues"
},
"homepage": "https://github.com/GeorgeFlorian/Forkify-App#readme",
"devDependencies": {
"#parcel/transformer-sass": "^2.0.1",
"parcel": "^2.0.1"
},
"dependencies": {
"core-js": "^3.19.2",
"fractional": "^1.0.0",
"regenerator-runtime": "^0.13.9"
}
}
I can't find anything relevant online and that's why I've posted here.

I got the same error, did the same JS Udemy course by Jonas lol. I found out the problem has to do something with parcel hoisting. Insert --no-scope-hoist in front of the build command like this & try
parcel build index.html --no-scope-hoist

Use a different package Fracty instead of Fractional

For some reason, none of those 2 packages mentioned are working at this time. For those encountering the same issue, uninstall Fractional and deploy again. It will work, but another solution needs to be applied to cover for the uninstalled package
npm un Fractional
then
git add -A
git commit -m 'Removed Fractional'
then
git push origin master
Test and all app functions should be back to normal, as tested on local, but the fractional features that you'll have to replace.

Cannot GET / - localhost 8080 not working with webpack dev server

I have been following this tutorial online: https://www.youtube.com/watch?v=TOb1c39m64A.
I am about 10 minutes in, where we are starting the webpack dev server for the first time. I do this and when I travel to: http://localhost:8080/ I receive a white webpage with just the text Cannot GET /.
These are the only packages I have installed so far:
"devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" }
I have a script called "start" that runs webpack serve, which runs successfully and displays:
<i> [webpack-dev-server] Project is running at: <i> [webpack-dev-server] Loopback: http://localhost:8080/
As per the tutorial I have no webpack config, I have however messed around with other webpack things in other coding projects, could one of these be using my 8080 port? I work in firefox mostly but this issue persists across all browsers.
I have also looked at my hosts file and added a line, if you think it could help I will paste it here.
As requested here is my package.json (most of it already posted above):
{ "private": true, "scripts": { "start": "webpack serve", "watch": "webpack --watch", "build": "webpack" }, "devDependencies": { "webpack": "^5.52.0", "webpack-cli": "^4.8.0", "webpack-dev-server": "^4.1.0" } }

Seems even in 7 months the tutorial has gone out of date.
Fix for anyone like me who is following it on a windows pc.
Added a webpack.config.js file in my root directory that looked like this:
module.exports = {
mode: "development",
devServer: {
static: "./dist",
},
};
In the tutorial it uses contentBase as the key in the devServer object, a property that appears to have been deprecated in a recent update, so static is used as a replacement.
Now everything is served to localhost and it works.

You just have to create "public" directory in root folder and move your html, css and images files and folder there and your error will be resolved

How can I incorporate JS libraries into my NPM build script?

My current site is build with html+css (scss) and using a NPM build script (see below). I now want to add a few JS libraries to my website (for example: lozad).
So far I've downloaded the dependencies for it. As I'm not familiar with JS, I don't understand the other steps I need to take. I tried following the documentation but it's not working so far.
I now assume that this is because my current NPM build script doesn't track JS, so any JS wouldn't be shown on my devserver. So maybe it did work, but just not in test?
Can anyone point me in the direction of what I need to do to make it working, and/or how to update my NPM script?
"scripts": {
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"devserver": "live-server --browser=firefox",
"start": "npm-run-all --parallel devserver watch:sass",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"
},
"devDependencies": {
"autoprefixer": "^9.6.0",
"concat": "^1.0.3",
"node-sass": "^4.12.0",
"npm-run-all": "^4.1.5",
"postcss-cli": "^6.1.2",
"webpack": "^4.35.3",
"webpack-cli": "^3.3.6"
},
"dependencies": {
"aos": "^2.3.4",
"lozad": "^1.9.0",
}
}

You just need to give the relative path to the dependency and run the script like so:
"scripts": {
...
"lozad": "npm run ./node_modules/lozad/index.js --argument"
}
Note that this is only assumed data. The real path and file are probably called something else (Just look into the node:modules folder for lozad).
According to this article, you can also omit the path and the npm rum when there is a .bin folder for that dependency, but I have not tested that.
Edit
In case you meant on how to use the library locally.
You have to add the package to your dependencies (Like you did) and then call
npm install
in your project directory. It will install all your dependencies specified in package.json.
You can omit the manual "add dependency to file" step by simply calling:
npm install --save lozad
After that you can use it in your project like so:
// using ES6 modules
import lozad from 'lozad'
// using CommonJS modules
var lozad = require('lozad')
If you don't know which one to use, just try them - your IDE will tell you if something is wrong.
When you imported the library, you can use it like described at the Usage Description.