I am facing error while runing sveltekit app (Not found:/) - frontend

I am trying to run my sveltekit app, it was running fine few day's back but suddenly now when I run
"npm run build" it throw error Error: Not found: /, the way I understand is it is couldn't find entry file for app
// my vite.config file
// vite.config.js
import { sveltekit } from '#sveltejs/kit/vite';
/** #type {import('vite').UserConfig} */
const config = {
plugins: [sveltekit()]
};
export default config;
// my package.json
{
"name": "first-pwa",
"version": "0.0.1",
"scripts": {
"dev": "vite dev",
"build": "vite build",
"package": "vite package",
"preview": "vite preview",
"test": "playwright test",
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
},
"devDependencies": {
"#playwright/test": "^1.21.0",
"#sveltejs/adapter-auto": "^1.0.0-next.34",
"#sveltejs/adapter-static": "^1.0.0-next.29",
"#sveltejs/kit": "^1.0.0-next.314",
"eslint": "^7.32.0",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-svelte3": "^3.4.1",
"leaflet": "^1.8.0",
"prettier": "^2.6.2",
"prettier-plugin-svelte": "^2.7.0",
"sass": "^1.50.0",
"svelte": "^3.47.0",
"svelte-leafletjs": "^0.9.0",
"svelte-preprocess": "^4.10.6",
"svelte-range-slider-pips": "^2.0.3",
"svelte-simple-datatables": "^0.2.3",
"vanillajs-datepicker": "^1.2.0",
"vite": "^3.0.4"
},
"type": "module",
"dependencies": {
"#glidejs/glide": "^3.5.2",
"#sveltejs/adapter-node": "^1.0.0-next.73",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.8.1",
"bootswatch": "^5.1.3",
"chartist": "^0.11.4",
"popper": "^1.0.1",
"svelte-loadable": "^2.0.1",
"svelte-speedometer": "^1.1.0",
"sveltestrap": "github:laxadev/sveltestrap",
"ua-parser-js": "^1.0.2"
}
}
I haven't migrated to the latest sveltekit changes yet I want my old app up running first,it would be very helpful if anyone could help me with this
I have tried adding entry path in vite.config.js but it didn't help
import { defineConfig } from 'vite';
import { sveltekit } from '#sveltejs/kit/vite';
/** #type {import('vite').UserConfig} */
export default defineConfig({
plugins: [sveltekit()]
build: {
lib: {
entry: 'src/routes/index.svelte'
}
}
});

Pages have been renamed from index.svelte to +page.svelte. When you rename your routes they should be detected without a custom entry file configuration.

Related

Node - attempt to zip directory does not do anyting

I'm trying to archive an entire folder using Node, archiver and fs, but nothing seems to happen.
This is my implementation:
import { createWriteStream } from 'fs';
import archiver from 'archiver';
await zipDirectory('./work', './work/folderName.zip');
const zipDirectory = async (source: string, out: string): Promise<void> => {
const archive = archiver('zip', { zlib: { level: 9 }});
return new Promise((resolve, reject) => {
const stream = createWriteStream(out);
archive
.directory(source, false)
.on('error', err => reject(err))
.pipe(stream);
stream.on('close', () => resolve());
archive.finalize();
});
}
Running on Node 14.15.4
Package.json
{
"name": "rpj",
"version": "1.0.0",
"description": "",
"main": "./dist/src/main.js",
"author": "David Faizulaev",
"license": "ISC",
"scripts": {
"start": "node ./dist/main.js",
"build": "yarn build:js",
"build:prod": "yarn run build:js",
"build:types": "tsc --emitDeclarationOnly",
"build:js": "babel . --out-dir ./dist --extensions \".ts\" --ignore node_modules --ignore dist --source-maps",
"build-ts": "tsc",
"test": "jest --coverage --verbose",
"lint-test": "npm run lint && npm run test",
"lint": "eslint -c .eslintrc.js --ext .ts ./src",
"lint:fix": "eslint --fix -c .eslintrc.js --ext .ts ./src",
"tslint": "tslint -c tslint.json --project tsconfig.json",
"sonar": "node ./config/sonar-project.js",
"prettier": "prettier --write ./projects/**/*.*",
"sonar-dev": "node ./config/sonar-dev-project.js"
},
"dependencies": {
"archiver": "^5.3.0",
"aws-sdk": "2.861.0",
"cheerio": "^1.0.0-rc.5",
"config": "3.3.6",
"esm": "^3.2.25",
"express": "^4.17.1",
"imagemin": "7.0.1",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-pngquant": "^9.0.2",
"jszip": "3.6.0",
"lodash": "4.17.21",
"node-request-context": "^1.0.5",
"uuid": "^8.3.2",
"winston": "^3.3.3"
},
"devDependencies": {
"#babel/cli": "7.13.10",
"#babel/core": "7.13.10",
"#babel/plugin-proposal-class-properties": "7.13.0",
"#babel/plugin-proposal-object-rest-spread": "7.13.8",
"#babel/plugin-transform-runtime": "7.13.10",
"#babel/preset-env": "7.13.10",
"#babel/preset-typescript": "7.13.0",
"#babel/runtime": "7.13.10",
"#types/archiver": "^5.1.1",
"#types/config": "0.0.38",
"#types/express": "^4.17.11",
"#types/imagemin": "7.0.1",
"#types/imagemin-mozjpeg": "^8.0.1",
"#types/jest": "^26.0.20",
"#types/node": "14.14.33",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "4.17.0",
"#typescript-eslint/eslint-plugin-tslint": "4.17.0",
"#typescript-eslint/parser": "4.17.0",
"aws-sdk-mock": "5.1.0",
"eslint": "7.21.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-jest": "^23.18.0",
"eslint-plugin-jsdoc": "32.2.0",
"jest": "27",
"lint-staged": "^10.5.3",
"sonarqube-scanner": "^2.8.0",
"ts-jest": "27",
"ts-node": "10",
"tslint": "^6.1.3",
"typescript": "4.4.4"
}
}
Please advise on how I can resolve this?
Issue was caused because I did not create the directory to where I wanted to store the zip file.
Once I added the directory creation at startup everything worked.

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module when running script

I'm trying to test imagemin & imagemin-mozjpeg, so I wrote a small project to do so.
index.ts
import imagemin from 'imagemin';
import imageminMozjpeg from 'imagemin-mozjpeg';
(async () => {
const files = await imagemin(["your-image.jpg"], {
destination: "compressed-images",
plugins: [
imageminMozjpeg({quality: 50})
]
});
console.log(JSON.stringify(files, null, 1));
})();
main.ts
require = require('esm')(module/* , options*/);
module.exports = require('./index');
Package.json
{
"name": "1234",
"version": "1.0.0",
"revision": {
"build_ts": 0,
"git_commit": "dummy"
},
"description": "",
"main": "dist/main.js",
"author": "",
"license": "ISC",
"repository": {
"type": "git",
"url": ""
},
"scripts": {
"start": "node ./dist/main.js",
"build": "yarn build:js",
"build:prod": "yarn run build:js",
"build:types": "tsc --emitDeclarationOnly",
"build:js": "babel . --out-dir ./dist --extensions \".ts\" --ignore node_modules --ignore dist --source-maps",
"build-ts": "tsc",
"test": "jest --coverage --verbose",
"lint-test": "npm run lint && npm run test",
"lint": "eslint -c .eslintrc.js --ext .ts ./src",
"lint:fix": "eslint --fix -c .eslintrc.js --ext .ts ./src",
"tslint": "tslint -c tslint.json --project tsconfig.json",
"prettier": "prettier --write ./src/**/*.ts"
},
"dependencies": {
"esm": "^3.2.25",
"imagemin": "^8.0.0",
"imagemin-mozjpeg": "^9.0.0"
},
"devDependencies": {
"#babel/cli": "7.13.10",
"#babel/core": "7.13.10",
"#babel/plugin-proposal-class-properties": "7.13.0",
"#babel/plugin-proposal-decorators": "7.13.5",
"#babel/plugin-proposal-object-rest-spread": "7.13.8",
"#babel/plugin-transform-runtime": "7.13.10",
"#babel/preset-env": "7.13.10",
"#babel/preset-typescript": "7.13.0",
"#babel/runtime": "7.13.10",
"#types/imagemin": "^7.0.1",
"#types/imagemin-mozjpeg": "^8.0.1",
"#typescript-eslint/eslint-plugin": "4.17.0",
"#typescript-eslint/eslint-plugin-tslint": "4.17.0",
"#typescript-eslint/parser": "4.17.0",
"babel-plugin-transform-typescript-metadata": "0.3.2",
"eslint": "7.21.0",
"eslint-config-prettier": "^6.11.0",
"eslint-plugin-jest": "^23.18.0",
"eslint-plugin-jsdoc": "32.2.0",
"prettier": "2.0.5",
"ts-jest": "26.5.3",
"ts-node": "^9.1.1",
"ts-node-dev": "1.1.6",
"tslint": "^6.1.3",
"typescript": "4.2.3"
}
}
I run:
yarn run build
yarn run start
and get the following error:
$ node ./dist/main.js
/testing-project/node_modules/imagemin/index.js:1
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /testing-project/node_modules/imagemin/index.js
require() of ES modules is not supported.
require() of /testing-project/node_modules/imagemin/index.js from /testing-project/dist/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename /testing-project/node_modules/imagemin/index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /testing-project/node_modules/imagemin/package.json.
Please advise on how I can resolve this, thank you.
The issue was a mix of various typescript configurations. Started a new project and issue was resolved.

How to launch supertest files in node?

I have a node/typescript server. I wish to test the api routes with supertest. I've written my first test, but cannot start it because
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /Users/myname/Desktop/Code/Reapr/server/src/tests/search.test.ts
The test.ts file is:
import request from "supertest";
import { server } from "../index";
describe("GET /user/:id", () => {
it("return user information", (done) => {
request(server)
.get("/user/123")
.set("Accept", "application/json")
.expect("Content-Type", /json/)
.expect(200, done);
});
});
The package.json is:
{
"name": "my-server",
"version": "1.0.0",
"main": "index.js",
"license": "",
"scripts": {
"build": "rimraf ./build && tsc",
"dev": "nodemon",
"lint": "eslint . --ext .js,.ts",
"start": "npm run build && node build/index.js",
"test": "node src/tests/search.test.ts"
},
"type": "module",
"dependencies": {
"bcrypt": "^5.0.1",
"body-parser": "^1.19.0",
"cloudinary": "^1.25.1",
"compression": "^1.7.4",
"cookie-parser": "^1.4.5",
"cors": "^2.8.5",
"express": "^4.17.1",
"express-rate-limit": "^5.2.6",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.12.3",
"multer": "^1.4.2",
"nodemailer": "^6.5.0",
"nodemailer-express-handlebars": "^4.0.0",
"socket.io": "^4.0.1",
"stripe": "^8.142.0"
},
"devDependencies": {
"#types/express": "^4.17.11",
"#types/jest": "^26.0.22",
"#types/mongoose": "^5.10.4",
"#types/node": "^14.14.37",
"#types/socket.io": "^2.1.13",
"#types/stripe": "^8.0.417",
"#typescript-eslint/eslint-plugin": "^4.20.0",
"#typescript-eslint/parser": "^4.20.0",
"babel-plugin-module-resolver": "^4.1.0",
"dotenv": "^8.2.0",
"eslint": "^7.23.0",
"nodemon": "^2.0.7",
"rimraf": "^3.0.2",
"supertest": "^6.1.3",
"ts-node": "^9.1.1",
"typescript": "^4.2.3"
}
}
Also, this error is only here when I explicitly write the script "test": node src/tests/search.test.ts". If I write "test": "jest", I got this error:
jest: command not found
So, how to properly launch my supertests files, if possible all at once, instead of changing the script line for every file?
You can execute a ts file directly with ts-node.
"test": "ts-node src/tests/search.test.ts"
Or build it to js file and run it with node.
To execute jest command, you have to install it, and you are using Typescript (?) then you also need ts-jest:
npm install ts-jest jest -D
Create a configuration file for jest: jest.config.js
module.exports = {
roots: ['<rootDir>/src'],
testMatch: [
'**/__tests__/**/*.+(ts|tsx|js)',
'**/?(*.)+(spec|test).+(ts|tsx|js)',
],
transform: {
'^.+\\.(ts|tsx)$': 'ts-jest',
},
};
Now, try to execute jest: npx jest
in package.json:
"jest": {
"preset": "ts-jest",
"testEnvironment": "node",
"setupFilesAfterEnv": [
"./src/test/setup.ts"
]
},
jest does not understand what typescript is, "ts-jest" will add typescript support.
"setupFilesAfterEnv" is optional. if you have a setup file, it will run this to set up extra configuration like adding "beforeAll, beforeEach" etc.
here is the dependencies you need to install for testing environment:
"devDependencies": {
"#types/jest": "^26.0.15",
"#types/supertest": "^2.0.10",
"jest": "^26.6.1",
"supertest": "^6.0.0",
"ts-jest": "^26.4.3"
}
also add this script to package.json:
"test": "jest --watchAll --no-cache"
--no-cache flag is related to typescript setup. jest sometimes does not catch the changes in typescript files.
lastly you imported server but make sure you set up server.ts properly. here I explained: supertest not found error testing express endpoint
this should set your testing environment

Nest js packaging hangs at build process of the serverless framework

So i did a fresh install of nestjs application and i am trying to add the serverless framework with it.I also added few of the packages to support the serverless framework
{
"name": "n1",
"version": "0.0.1",
"description": "",
"author": "",
"private": true,
"license": "UNLICENSED",
"scripts": {
"prebuild": "rimraf dist",
"build": "nest build",
"format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
"start": "nest start",
"start:dev": "nest start --watch",
"start:debug": "nest start --debug --watch",
"start:prod": "node dist/main",
"lint": "eslint \"{src,apps,libs,test}/**/*.ts\" --fix",
"test": "jest",
"test:watch": "jest --watch",
"test:cov": "jest --coverage",
"test:debug": "node --inspect-brk -r tsconfig-paths/register -r ts-node/register node_modules/.bin/jest --runInBand",
"test:e2e": "jest --config ./test/jest-e2e.json"
},
"dependencies": {
"#hewmen/serverless-plugin-typescript": "^1.1.17",
"#nestjs/common": "^7.0.0",
"#nestjs/core": "^7.0.0",
"#nestjs/platform-express": "^7.0.0",
"aws-lambda": "^1.0.6",
"aws-serverless-express": "^3.3.8",
"express": "^4.17.1",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^6.5.4",
"serverless-offline": "^6.5.0",
"serverless-plugin-optimize": "^4.1.4-rc.1"
},
"devDependencies": {
"#nestjs/cli": "^7.0.0",
"#nestjs/schematics": "^7.0.0",
"#nestjs/testing": "^7.0.0",
"#types/express": "^4.17.3",
"#types/jest": "25.2.3",
"#types/node": "^13.9.1",
"#types/supertest": "^2.0.8",
"#typescript-eslint/eslint-plugin": "3.0.2",
"#typescript-eslint/parser": "3.0.2",
"eslint": "7.1.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-import": "^2.20.1",
"jest": "26.0.1",
"prettier": "^1.19.1",
"supertest": "^4.0.2",
"ts-jest": "26.1.0",
"ts-loader": "^6.2.1",
"ts-node": "^8.6.2",
"tsconfig-paths": "^3.9.0",
"typescript": "^3.7.4"
},
"jest": {
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"rootDir": "src",
"testRegex": ".spec.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"coverageDirectory": "../coverage",
"testEnvironment": "node"
}
}
and i have also added the serverless.yml file which is pointing in to lambda.handler
serverless.yml file
service:
name: nest-serverless-framework
plugins:
- '#hewmen/serverless-plugin-typescript'
- serverless-plugin-optimize
- serverless-offline
provider:
name: aws
runtime: nodejs12.x
functions:
main:
handler: src/lambda.handler
events:
- http:
method: any
path: /{any+}
So the handler file is simple it just exported a module that can bootstrap the application
import { Handler, Context } from 'aws-lambda';
import { Server } from 'http';
import { createServer, proxy } from 'aws-serverless-express';
import { eventContext } from 'aws-serverless-express/middleware';
import { NestFactory } from '#nestjs/core';
import { ExpressAdapter } from '#nestjs/platform-express';
import { AppModule } from './app.module';
import express from 'express';
const binaryMimeTypes: string[] = [];
let cachedServer: Server;
// Create the Nest.js server and convert it into an Express.js server
async function bootstrapServer(): Promise<Server> {
if (!cachedServer) {
const expressApp = express();
const nestApp = await NestFactory.create(AppModule, new
ExpressAdapter(expressApp))
nestApp.use(eventContext());
await nestApp.init();
cachedServer = createServer(expressApp, undefined,
binaryMimeTypes);
}
return cachedServer;
}
// Export the handler : the entry point of the Lambda function
export const handler: Handler = async (event: any, context: Context) => {
cachedServer = await bootstrapServer();
return proxy(cachedServer, event, context, 'PROMISE').promise;
}
but when i now try to do sls offline start, the computer just hangs and nothing happen and i have to restart the computer forcefully.
Any help would be appreciated.
I had a similar issue with v8 crashing during the serverless build. Changing packages from #hewmen/serverless-plugin-typescript to the original serverless-plugin-typescript fixed it.
Please note that aws-serverless-express says:
On 11/30 [2022], the AWS Serverless Express library is moving to Vendia and will be rebranded to serverless-express [...]
has become obsolete.
Probably the same job, you wanted to achieve, does the following Vendina example:
vendia serveless basic-starter-nestjs

How can i manage to use flow in Cypress?

I want to use Flow in a React application that I test with Cypress I use a web preprocessor plugging with a flow preset. First, I code the preprocessor in ./cypress/plugin/index.js:
const webpack = require('#cypress/webpack-preprocessor')
module.exports = (on) => {
const options = {
// send in the options from your webpack.config.js, so it works the same
// as your app's code
webpackOptions: require('../../webpack.config'),
watchOptions: {}
}
on('file:preprocessor', webpack((options)))
}
Then I install the #cypress/webpack-preprocessor' and the #babel/preset-flow The package.json looks like this:
{
"name": "TimeLogging",
"version": "1.0.0",
"description": "React Time Logging",
"main": "index.js",
"engines": {
"node": "8.11.4",
"npm": "5.6.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"cypress:open": "cypress open",
"cypress:run": "cypress run",
"eslint": "eslint",
"flow": "flow"
},
"author": "CodeMix",
"license": "ISC",
"dependencies": {
"flow-bin": "^0.81.0",
"prop-types": "^15.6.2",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "^1.1.1"
},
"devDependencies": {
"#babel/preset-flow": "^7.0.0",
"#cypress/webpack-preprocessor": "^3.0.0",
"cypress": "^3.1.0",
"enzyme": "^3.6.0",
"enzyme-adapter-react-16": "^1.5.0",
"eslint": "^4.19.1",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-cypress": "^2.0.1",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-standard": "^4.0.0"
}
}
> And the webpack.config.js looks like this:
module: {
rules: [
{{
test: /\.(js|jsx?)$/,
exclude: [/node_modules/],
use: [{
loader: 'babel-loader',
options: {
presets: [
'babel-preset-env',
'babel-preset-react',
'babel-preset-flow'
],
},
}],
},
]
}
}
When I exeutes the test in Cypress I get this error:
/cypress/integration/TogableTimerForm.spec.jsx Module build failed
(from
./node_modules/#cypress/webpack-preprocessor/node_modules/babel-loader/lib/index.js):
Error: Plugin/Preset files are not allowed to export objects, only
functions. In
/Users/stein/Development/TimeLogging/TimeLogging/node_modules/babel-preset-flow/lib/index.js
How do I fix this error?
Install these dependencies
yarn:
yarn add --dev #babel/preset-flow #cypress/browserify-preprocessor
npm
npm install --save-dev #babel/preset-flow #cypress/browserify-preprocessor
Add this to your cypress/plugins/index.js
const browserify = require('#cypress/browserify-preprocessor');
module.exports = (on, config) => {
const options = browserify.defaultOptions;
options.browserifyOptions.transform[1][1].presets.push(
'#babel/preset-flow',
);
on('file:preprocessor', browserify(options));
};

Resources