I'm currently working on a project using Vue and Firebase. The issue is that my dev server is no longer rendering new routes from my vue router after building and deploying to prod.
For ex: I have several vue components and they all render properly for their corresponding vue router routes, although now when I add new components(Test.vue)/new routes, nothing is rendered when loading the web page.
I've spent quite a while looking at just about every helpful article relevant to this issue but have had no luck. I have tried manually setting the webpack config in a vue.config.js file and setting the root path to './' as well as '/' and even ''. None work.
I'm really lost at this point.
package.json (in root folder of project):
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"#firebase/firestore": "^1.4.10",
"#google-cloud/firestore": "^2.2.7",
"core-js": "^2.6.5",
"firebase": "^6.4.0",
"vue": "^2.6.10",
"vue-router": "^3.0.3"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.10.0",
"#vue/cli-service": "^3.10.0",
"vue-template-compiler": "^2.6.10",
"webpack-cli": "^3.3.7"
}
}
//
package.json (in node_modules/webpack-dev-server/schema-utils/src/package.json):
{
"_args": [
[
"schema-utils#1.0.0",
"/home/b-rad/Documents/AustinKratom/frontend"
]
],
"_development": true,
"_from": "schema-utils#1.0.0",
"_id": "schema-utils#1.0.0",
"_inBundle": false,
"_integrity": "sha512-i27Mic4KovM/lnGsy8whRCHhc7VicJajAjTrYg11K9zfZXnYIt4k5F+kZkwjnrhKzLic/HLU4j11mjsz2G/75g==",
"_location": "/webpack-dev-server/schema-utils",
"_phantomChildren": {},
"_requested": {
"type": "version",
"registry": true,
"raw": "schema-utils#1.0.0",
"name": "schema-utils",
"escapedName": "schema-utils",
"rawSpec": "1.0.0",
"saveSpec": null,
"fetchSpec": "1.0.0"
},
"_requiredBy": [
"/webpack-dev-server"
],
"_resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-1.0.0.tgz",
"_spec": "1.0.0",
"_where": "/home/b-rad/Documents/AustinKratom/frontend",
"author": {
"name": "webpack Contrib",
"url": "https://github.com/webpack-contrib"
},
"bugs": {
"url": "https://github.com/webpack-contrib/schema-utils/issues"
},
"dependencies": {
"ajv": "^6.1.0",
"ajv-errors": "^1.0.0",
"ajv-keywords": "^3.1.0"
},
"description": "webpack Validation Utils",
"devDependencies": {
"#commitlint/cli": "^7.0.0",
"#commitlint/config-conventional": "^7.0.0",
"#webpack-contrib/eslint-config-webpack": "^2.0.0",
"del-cli": "^1.0.0",
"eslint": "^5.0.0",
"eslint-plugin-import": "^2.0.0",
"eslint-plugin-prettier": "^2.0.0",
"jest": "^21.0.0",
"prettier": "^1.0.0",
"standard-version": "^4.0.0"
},
"engines": {
"node": ">= 4"
},
"files": [
"src"
],
"homepage": "https://github.com/webpack-contrib/schema-utils",
"license": "MIT",
"main": "src/index.js",
"name": "schema-utils",
"repository": {
"type": "git",
"url": "git+https://github.com/webpack-contrib/schema-utils.git"
},
"scripts": {
"clean": "del-cli coverage",
"commits": "commitlint --from $(git rev-list --tags --max-count=1)",
"lint": "eslint --cache src test",
"release": "npm run commits && standard-version",
"test": "jest --env node --verbose --coverage"
},
"version": "1.0.0"
}
Please let me know if I need to provide additional information or files. I also have this project up on Github here: https://github.com/austin-kratom/AustinKratom
There are no error messages in console when on localhost dev server. Simply just a blank web page and nothing else. All my previous vue components/routes work fine, but new ones do not.
Thank you!
When I moved the /test route above dynamic routes related to show and edit routes /test url is loading the Test.Vue.
{
path: '/test',
name: 'test',
component: Test
},
{
path: '/edit/:product_id',
name: 'edit-product',
component: EditProduct
},
{
path: '/:product_id',
name: 'show-product',
component: ShowProduct
}
Before making this change, /test url was matching the path: '/:product_id route pattern with product_id parameter value being set to value "test". So rule is to always define the specific routes before the dynamic routes.
Related
I'm trying to implement the Allure reports in Playwright with Cucumber. I'm running the features in the next way:
npm run test -- --tags "#Something"
After an execution I type: npm run allure generate but the browser displays an Allure Report Unknown NaN%
This is my package.json file:
{
"name": "playwright",
"version": "1.0.0",
"description": "E2E Automation Framework",
"main": "index.js",
"type": "module",
"scripts": {
"allure:generate": "npx allure generate ./allure-results --clean",
"allure:open": "npx allure open ./allure-report",
"allure:serve": "npx allure serve",
"test": "./node_modules/.bin/cucumber-js --require cucumber.cjs --require step-definitions/**/*.cjs --require features/**/*.js",
"allure-reports": "node_modules/.bin/allure generate ./reports/allure/allure-results/ -o ./reports/allure/allure-report/ --clean && allure open ./reports/allure/allure-report",
"posttest": "npm run allure:generate",
"allure": "allure serve reports/allure-results"
},
"author": "X",
"license": "ISC",
"dependencies": {
"#cucumber/cucumber": "^8.7.0",
"chai": "^4.3.6",
"prettier": "^2.7.1",
"ts-jest": "^29.0.3"
},
"jest": {
"verbose": true,
"moduleDirectories": [
"node_modules",
"src"
],
"preset": "ts-jest/presets/js-with-ts",
"testEnvironment": "node",
"allowJs": true,
"transform": {
"^.+\\.jsx?$": "babel-jest"
},
"transformIgnorePatterns": [
"<rootDir>/node_modules/(?!variables/.*)"
]
},
"devDependencies": {
"#babel/core": "^7.19.6",
"#babel/preset-env": "^7.19.4",
"#babel/register": "^7.18.9",
"#jest/globals": "^29.3.0",
"#playwright/test": "^1.27.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"allure-commandline": "^2.18.1",
"allure-playwright": "^2.0.0-beta.19",
"babel-jest": "^29.2.2",
"experimental-allure-playwright": "^0.0.3",
"identity-obj-proxy": "^3.0.0",
"jest": "^29.2.2",
"playwright": "^1.27.1",
"react-test-renderer": "^18.2.0"
}
}
If anybody could help me with this? Thanks in advance.
I have something setup as below in package.json for Playwright-jest-allure.
{
"name": "playwright",
"version": "1.0.0",
"description": "Sab Playwright",
"main": "index.js",
"author": "Sab",
"license": "MIT",
"dependencies": {
"jest": "^27.5.1",
"jest-playwright-preset": "^1.7.0",
"playwright": "^1.20.2"
},
"scripts": {
"test": "jest"
},
"devDependencies": {
"jasmine-allure-reporter": "^1.0.2",
"jest-allure": "^0.1.3",
"jasmine":"^3.7.0",
"#wdio/allure-reporter": "^7.16.14",
"#wdio/cli": "^7.5.2",
"allure-commandline": "^2.17.2"
}
}
Below is the allure-results and allure-report , latter gets generated once run is successful and command - npx allure generate ./allure-results --clean
allure-results please make sure xmls' are generated here for the tests run
Allure report:
With cucumberjs, nothing much different other than hooks,cucumber config file. Still if you are facing issue, let me know. I can post the setup I have made on it.
What I discover is that you are executing the test cases with "test": "./node_modules/.bin/cucumber-js. That means that the configuration should be under your cucumber.js
// cucumber.js
let options = [
'--require-module ts-node/register', // Load Typescript module
'--require ./steps/**.ts', // Load steps
'--format progress', // Load custom formatter
'--format json:reports/cucumber_report.json', // JSON report
'--format html:reports/cucumber-report.html',
//'--format ./reporter.ts', // Allure report
'--publish-quiet',
'--tags #mytag',
'--parallel 2',
'--retry 0',
].join(' ')
let run_features = [
'./features/', // Specify our feature files location
options,
].join(' ')
module.exports = {
test_runner: run_features,
parallel: 2,
}
As you can see there is a commented line for allure. When we uncomment this line the reporter.js is going to be the report format, in my case I copied from here
And my scripts at the package.json are:
"scripts": {
"test": "cucumber-js -p test_runner",
"allure:generate": "npx allure generate ./allure-results --clean",
"allure:open": "allure open allure-report",
"all": "npm test && npm run allure:generate && npm run allure:open"
},
I have recently been put on a project that has a mixture of ES5/6+ code.
It uses Babel for compilation of some of the newer syntax.
I'd like to debug this (breakpoints etc.) using Visual Studio Code, but the problem I am having is that the breakpoints are hitting the transpiled files instead of the source files that I write.
Here is my package.json file:
{
"name": "xxxxx",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"prestart": "npm install",
"start": "node index.js",
"test": "jest --collect-coverage --verbose",
"lint": "eslint **/*.js",
"prettier": "prettier --ignore-path .gitignore \"**/*.+(js|json)\""
},
"husky": {
"hooks": {
"pre-commit": "pretty-quick --staged --compilers js:babel-core/register --require babel-polyfill"
}
},
"keywords": [
"OAI"
],
"license": "Unlicense",
"private": true,
"dependencies": {
"aws-sdk": "^2.874.0",
"body-parser": "^1.18.3",
"express": "^4.16.3",
"https": "^1.0.0",
"js-yaml": "^3.14.1",
"lodash": "^4.17.21",
"moment": "^2.29.1",
"mongoose": "^5.4.0",
"oas-tools": "2.1.7",
"request-promise": "^4.2.6",
"uuid": "^3.4.0"
},
"devDependencies": {
"#babel/core": "^7.13.13",
"#babel/plugin-proposal-optional-chaining": "^7.13.12",
"#babel/preset-env": "^7.13.12",
"#babel/register": "^7.13.8",
"babel-loader": "^8.2.2",
"babel-polyfill": "^6.26.0",
"chai": "^4.3.4",
"eslint": "^6.8.0",
"husky": "^6.0.0",
"jest": "^26.6.3",
"mocha": "^6.2.3",
"nyc": "^14.1.1",
"prettier": "2.2.1",
"pretty-quick": "^3.1.0",
"swagger-parser": "^8.0.3"
}
}
Here is my babel.config.js file:
module.exports = {
presets: [["#babel/preset-env"]],
plugins: ["#babel/plugin-proposal-optional-chaining"],
sourceMaps: true
};
And finally, here is my launch.json file:
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"env": {
"NODE_ENV": "development",
"AWS_PROFILE": "xxxxxx",
"PORT": "1171",
// "NO_CACHE": "true",
},
"name": "Launch DEV",
"outFiles": [
"${workspaceFolder}/compiled/**/*.js"
],
"program": "${workspaceFolder}/index.js",
"request": "launch",
"type": "node",
"sourceMaps": true
// "outputCapture": "std"
},
{
"env": {
"NODE_ENV": "qa",
"AWS_PROFILE": "xxxxxx",
"PORT": "1171",
// "NO_CACHE": "true",
},
"name": "Launch QA",
"outFiles": [
"${workspaceFolder}/compiled/**/*.js"
],
"program": "${workspaceFolder}/index.js",
"request": "launch",
"type": "node",
"sourceMaps": true
// "outputCapture": "std"
}
]
}
The only posts/questions on this problem that I've found are somewhat dated and aren't too helpful.
Here is what I've already looked at on this topic:
https://www.juandebravo.com/2019/05/20/debug-node-babel-docker/
https://github.com/microsoft/vscode/issues/103556
JavaScript Development in ES6 With Debugging
https://medium.com/#drcallaway/debugging-es6-in-visual-studio-code-4444db797954
Any help, or a solution to this problem would be greatly appreciated. Thanks in advance!
You have to generate source maps files. Their purpose is to map the source files to generated files, and they are being used by the debugger.
Do this by adding the devtool: 'source-map' setting to the configuration
I have a setup that integrates electron with svelte along with typescript support.
when I run the rollup script to compile svelte app, i am getting cannot find module ./App.svelte error as shown below.
Plugin typescript: #rollup/plugin-typescript TS2307: Cannot find module './App.svelte' or its corresponding type declarations.
Here's my package.json configuration :
{
"name": "tapwire-electron-first",
"productName": "tapwire-electron-first",
"version": "1.0.0",
"description": "My Electron application description",
"main": "dist/index.js",
"scripts": {
"electron-start": "tsc && electron-forge start",
"electron-package": "electron-forge package",
"electron-make": "electron-forge make",
"electron-publish": "electron-forge publish",
"electron-lint": "eslint --ext .ts .",
"svelte-build": "rollup -c",
"svelte-dev": "rollup -c -w",
"svelte-start": "sirv public",
"svelte-validate": "svelte-check",
"start": "run-p svelte-dev electron-start"
},
"keywords": [],
"author": {
"name": "nateshmbhat",
},
"license": "MIT",
"config": {
"forge": {
"packagerConfig": {},
"makers": [
{
"name": "#electron-forge/maker-squirrel",
"config": {
"name": "tapwire_electron_first"
}
},
{
"name": "#electron-forge/maker-zip",
"platforms": [
"darwin"
]
},
{
"name": "#electron-forge/maker-deb",
"config": {}
},
{
"name": "#electron-forge/maker-rpm",
"config": {}
}
]
}
},
"devDependencies": {
"#electron-forge/cli": "^6.0.0-beta.53",
"#electron-forge/maker-deb": "^6.0.0-beta.53",
"#electron-forge/maker-rpm": "^6.0.0-beta.53",
"#electron-forge/maker-squirrel": "^6.0.0-beta.53",
"#electron-forge/maker-zip": "^6.0.0-beta.53",
"#rollup/plugin-commonjs": "^15.1.0",
"#rollup/plugin-node-resolve": "^9.0.0",
"#rollup/plugin-typescript": "^6.0.0",
"#types/node": "^14.11.2",
"#typescript-eslint/eslint-plugin": "^2.34.0",
"#typescript-eslint/parser": "^2.34.0",
"cross-env": "^7.0.2",
"electron": "10.1.3",
"eslint": "^7.10.0",
"eslint-plugin-import": "^2.22.1",
"npm-run-all": "^4.1.5",
"rollup": "^2.28.2",
"rollup-plugin-livereload": "^2.0.0",
"rollup-plugin-svelte": "^6.0.1",
"rollup-plugin-terser": "^7.0.2",
"svelte": "^3.29.0",
"svelte-check": "^1.0.55",
"svelte-preprocess": "^4.3.2",
"typescript": "^4.0.3"
},
"dependencies": {
"concurrently": "^5.3.0",
"electron-reload": "^1.5.0",
"electron-squirrel-startup": "^1.0.0",
"sirv-cli": "^1.0.6"
}
}
Turns out i had to install #tsconfig/svelte as a dev dependency first then extend this with my tsconfig.json as shown below :
Install #tsconfig/svelte
npm i --save-dev #tsconfig/svelte
Add this tsconfig as the base config file in your tsconfig.json :
{
"extends": "#tsconfig/svelte/tsconfig.json",
}
The culprit on my end was a stale global.d.ts. I had /// <reference types="#sveltejs/kit" /> set, but was trying to change the project to vanilla Svelte. Fixing it to have /// <reference types="svelte" /> instead did the trick.
If Natesh's answer doesn't work for you, this file should work as a basic shim:
// svelte-shim.d.ts
declare module "*.svelte" {
import type { ComponentType } from "svelte";
const component: ComponentType;
export default component;
}
This essentially tells TypeScript that any .svelte files it doesn't otherwise know what to do with should be read in as Svelte components. You won't get any of their exported props or methods, but if all you need is to use their basic ComponentType interface, this should work fine.
I had the same problem with a default react-ts vite project when compiling Typescript with tsc
I had to remove following line in tsconfig.json
"skipLibCheck": false,
I've just checked a node.js web framework called feathers.js. I followed the example
``` bash
$ npm install -g #feathersjs/cli
$ mkdir my-new-app
$ cd my-new-app/
$ feathers generate app
$ npm start
In the example package.json file, I found a script look like this: "start": "node src/". I read through node.js cli options, I didn't found anything relate. So, I want to know how that script work, because normally node.js cli run by node foo.js
edit:
Folder structure
package.json file
{
"name": "feathersjsExplore",
"description": "",
"version": "0.0.0",
"homepage": "",
"main": "src",
"keywords": [
"feathers"
],
"author": {
"name": "",
"email": ""
},
"contributors": [],
"bugs": {},
"directories": {
"lib": "src",
"test": "test/"
},
"engines": {
"node": "^8.0.0",
"npm": ">= 3.0.0"
},
"scripts": {
"test": "npm run eslint && npm run mocha",
"eslint": "eslint src/. test/. --config .eslintrc.json",
"dev": "nodemon src/",
"start": "node src/",
"mocha": "mocha test/ --recursive --exit"
},
"dependencies": {
"#feathersjs/configuration": "^2.0.2",
"#feathersjs/errors": "^3.3.2",
"#feathersjs/express": "^1.2.5",
"#feathersjs/feathers": "^3.2.1",
"compression": "^1.7.3",
"cors": "^2.8.4",
"helmet": "^3.13.0",
"serve-favicon": "^2.5.0",
"winston": "^3.0.0"
},
"devDependencies": {
"eslint": "^5.5.0",
"mocha": "^5.2.0",
"nodemon": "^1.18.4",
"request": "^2.88.0",
"request-promise": "^4.2.2"
}
}
It will run the index.js file in that folder or whatever is specified in the folder's package.json main property (https://docs.npmjs.com/files/package.json#main).
If none of that can be found an Error: Cannot find module will be thrown.
This is a similar logic to require('folder/') (see https://nodejs.org/api/modules.html#modules_folders_as_modules).
SSR is a cool donejs feature. But in my current project I have no use of it because I am building a page which gets wrapped in a cordova app only.
{
"name": "abc",
"version": "0.0.0",
"description": "abc.org",
"homepage": "www.abc.org",
"repository": {
"type": "git",
"url": "git+https://github.com/xyz/xyz.git"
},
"author": {
"name": "xyz",
"email": "xyz#gmail.com",
"url": "www.abc.org"
},
"private": true,
"scripts": {
"test": "testee test.html --browsers firefox --reporter Spec",
"start": "done-serve --port 8080",
"develop": "done-serve --develop --port 8080",
"build": "node build"
},
"main": "spotwizard/index.stache!done-autorender",
"files": [
"src"
],
"keywords": [
"",
"donejs-app"
],
"steal": {
"main": "spotwizard/index.stache!done-autorender",
"directories": {
"lib": "src"
},
"configDependencies": [
"live-reload",
"node_modules/can-zone/register"
],
"plugins": [
"done-css",
"done-component",
"steal-less",
"steal-stache"
],
"envs": {
"server-production": {
"renderingBaseURL": "/dist"
}
},
"serviceBaseURL": ""
},
"dependencies": {
"ajax-request": "^1.2.3",
"can-ajax": "^1.1.4",
"can-component": "^3.3.10",
"can-connect": "^1.5.9",
"can-define": "^1.5.5",
"can-route": "^3.2.3",
"can-route-pushstate": "^3.1.2",
"can-set": "^1.3.2",
"can-stache": "^3.11.1",
"can-view-autorender": "^3.1.1",
"can-zone": "^0.6.13",
"done-autorender": "^1.4.0",
"done-component": "^1.0.0",
"done-css": "^3.0.1",
"done-serve": "^1.5.0",
"generator-donejs": "^1.0.7",
"http-parser-js": "^0.4.10",
"lodash": "^4.17.5",
"steal": "^1.5.15",
"steal-less": "^1.2.0",
"steal-stache": "^3.1.2"
},
"devDependencies": {
"can-fixture": "^1.1.1",
"donejs-cli": "^1.0.0",
"funcunit": "^3.2.0",
"steal-qunit": "^1.0.1",
"steal-tools": "^1.9.1",
"testee": "^0.3.0"
},
"license": "MIT"
}
The app has been scaffolded with the usual donejs cli commands:
donejs add app abc
By doing so SSR is by default active which is not desired in my particular case.
Is there a configuration switch to disable this behaviour?