I used create-react-app to create new react application. I have not changed absolutely anything except for adding configuration "Chrome-launch" into launch.json. After debug launching it always requires some authorization. According to chrome.debugger documentation I added to manifest.json this:
"permissions": [ "debugger"]
But it did not help. Now I have no idea how to get through it. Please, could someone give me a hint how to launch chrome-debugger without any authorization?
I have used this debugger many times in the past and it never required authorization, I have no idea what has changed.
Behaviour in the browser:
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}
manifest.json:
{
"short_name": "React App",
"name": "Create React App Sample",
"permissions": [
"debugger"
],
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
package.json:
{
"name": "kinosal",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Related
I recently created my very first package in my project's Package Registry through GitLab.
It was published correctly and I was even able to yarn add ... the package in question to another repo.
Checking the node_modules I can see the package present. However, when I run import I am told that the module was not found.
I assume I'm either importing badly or exporting badly (or maybe both)
My package.json of the file I am exporting from has the following:
{
"name": "#thing/thing2",
"version": "0.1.2",
"private": false,
"dependencies": {
"many packages"
},
"scripts": {
"start": "react-scripts start",
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"publishConfig": {
"something"
},
"main": "./src/index.js",
"type": "module",
"license": "MIT"
}
The component I am after lives in src/thing1/file.jsx
And I'm importing the file as:
import {stuff} from "#thing/thing2"
I'm sure there is documentation online for how to do this but I'm clearly searching for it wrong, thanks.
I needed to add:
"type": "module",
"module": "./src/module-export.jsx",
to the package file.
I am learning Next.js and and want to debug in visual code and chrome. I have tried different combination for launch.json to debug next.js app in visual code. I grab one of the the code from stack overflow itself. but it turns another failure.
can you please help me how to debug in Next.js app in visual studio code using google chrome.
Below is my launch.json file code :
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Example",
"runtimeExecutable": "node",
"runtimeArgs": ["--inspect", "node_modules/.bin/next", "dev"],
"port": 9229,
"cwd": "${workspaceFolder}/frontend",
"sourceMapPathOverrides": {
"webpack:///./*": "${workspaceRoot}/frontend/*"
}
}
]
}
code for my .next.config.js
module.exports = {
webpack(config) {
config.devtool = 'cheap-module-eval-source-map'
return config
},
}
my package.json for frontend
{
"name": "frontend",
"version": "1.0.0",
"description": "Social networking app",
"proxy": "http://127.0.0.1:8080",
"main": "index.js",
"scripts": {
"dev": "cross-env NODE_OPTIONS='--inspect' next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"author": "Vivek padelkar",
"license": "ISC",
"dependencies": {
"#ant-design/icons": "^4.7.0",
"antd": "^4.16.13",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"next": "^12.0.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-toastify": "^8.1.0"
},
"devDependencies": {
"cross-env": "^7.0.3"
}
}
My folder structure is as follows:
outer pacakge.json code (i.e. path : SOCIAL NETWORK/pacakge.json"
{
"name": "socialnetwoek",
"version": "1.0.0",
"description": "social network backend",
"main": "server.js",
"type": "module",
"scripts": {
"start": "node backend/server",
"server": "nodemon backend/server",
"client": "npm run dev --prefix frontend",
"all": "concurrently \"npm run server\" \"npm run client\""
},
"author": "Vivek Padelkar",
"license": "ISC",
"dependencies": {
"bcryptjs": "^2.4.3",
"colors": "^1.4.0",
"cors": "^2.8.5",
"dotenv": "^10.0.0",
"esm": "^3.2.25",
"express": "^4.17.1",
"express-async-handler": "^1.2.0",
"joi": "^17.4.2",
"mongoose": "^6.0.12",
"morgan": "^1.10.0"
},
"devDependencies": {
"concurrently": "^6.4.0",
"nodemon": "^2.0.15"
}
}
Steps that I am following:
while in root folder (i.e.. SOCIAL NETWORK) I am executing command
npm run all.
then I press F5 to run debugger.
Below is my vs screen I am running my Next.js app with chrome and all the debug points are greyed out.(highlighted with red box)
but nothing is working.
Next.js Docs has its dedicated documentation over Debugging.
Your .vscode/launch.json should be:
{
"version": "0.2.0",
"configurations": [
{
"name": "Next.js: debug server-side",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev"
},
{
"name": "Next.js: debug client-side",
"type": "pwa-chrome",
"request": "launch",
"url": "http://localhost:3000"
},
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
]
}
And no changes should be made with next.config.js.
npm run dev can be replaced with yarn dev if you're using Yarn. If you're changing the port number your application starts on, replace the 3000 in http://localhost:3000 with the port you're using instead.
You can select the type of debugging option you need from the dropdown.
Finally found solution , I have edited my launch.json in following way and everything is working as expected , thank you for your valuable time guys.
launch.json
{
"configurations": [
{
"name": "Launch Chrome",
"request": "launch",
"type": "pwa-chrome",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/frontend"
},
{
"name": "Attach to Edge",
"port": 9222,
"request": "attach",
"type": "pwa-msedge",
"webRoot": "${workspaceFolder}/frontend"
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch Edge",
"request": "launch",
"type": "pwa-msedge",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}/frontend"
},
{
"name": "Launch Microsoft Edge and open the Edge DevTools",
"request": "launch",
"type": "vscode-edge-devtools.debug",
"url": "http://localhost:3000" // Provide your project's url to finish configuring
}
]
}
Not a proper solution but I've manage without fixing it to run the "fullstack" debugger with this configuration (the one from the documentation).
{
"name": "Next.js: debug full stack",
"type": "node-terminal",
"request": "launch",
"command": "npm run dev",
"console": "integratedTerminal",
"serverReadyAction": {
"pattern": "started server on .+, url: (https?://.+)",
"uriFormat": "%s",
"action": "debugWithChrome"
}
}
The Next.js documentation over Debugging only works for the frontend or client files, but no to /api/files*, follow theres steps and you can debug your /api/files:
https://blogs.sap.com/2019/07/15/how-to-debug-a-node.js-rest-api-in-visual-studio-code-locally/
I have a react app that works on for example http://localhost:3000/ after I add the config to make it a PWA the url change to http://localhost:3000/my-app.
Is this normal behaviour or is my config?
This is my worker.js
// /my-app/public/worker.js
let CACHE_NAME = "my-app";
let urlsToCache = ["/", "/completed"];
let self = this;
// Install a service worker
self.addEventListener("install", (event) => {
// Perform install steps
event.waitUntil(
caches.open(CACHE_NAME).then(function (cache) {
console.log("Opened cache");
return cache.addAll(urlsToCache);
})
);
});
// Cache and return requests
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then(function (response) {
// Cache hit - return response
if (response) {
return response;
}
return fetch(event.request);
})
);
});
// Update a service worker
self.addEventListener("activate", (event) => {
let cacheWhitelist = ["my-app"];
event.waitUntil(
caches.keys().then((cacheNames) => {
return Promise.all(
cacheNames.map((cacheName) => {
if (cacheWhitelist.indexOf(cacheName) === -1) {
return caches.delete(cacheName);
}
})
);
})
);
});
This is my manifest.json
// /my-app/public/manifest.json
{
"short_name": "My App",
"name": "My App",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}
This is the pachage.json
// /my-app/package.json
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"homepage": "http://<username>.github.io/my-app",
"dependencies": {
"gh-pages": "^3.1.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I have tried to change "my-app" in worker.js, and in package.json but that doesn't seem to change anything, maybe the config of that is in another place?
And now if I go to http://localhost:3000/ I get a blank page and the error
bundle.js:1 Uncaught SyntaxError: Unexpected token '<'
0.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
main.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
(index):39 Worker registration successful http://localhost:3000/
manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.
If this is not normal, how can I change it to just be http://localhost:3000/ again?
Facing this error after calling expo build:android.
Can anyone check what's the issue ? I'm using windows 8 OS and yarn.
app.json
"expo": {
"name": "GTechApp",
"slug": "GTechApp",
"version": "1.0.0",
"icon": "./assets/images/icons/logo.png",
"platforms": [
"ios",
"android",
"web"
],
"assetBundlePatterns": [
"**/*"
],
"ios": {
"bundleIdentifier": "com.gtech.gtechapp",
"buildNumber": "1.0.0",
},
"android": {
"package": "com.gtech.gtechapp",
"versionCode": 1,
"icon": "./assets/images/icons/logo.png"
}
}
Thanks for the help.
I m trying to run a react app, created using create-react-app. App runs successfully, but when I try to run JEST it give me the following error. I have looked and tried various options but could not fix it. Here is my package.json and jest.config.json
please suggest on what I might be doing wrong
Thank you
A
Error
FAIL src/App.test.js
● Test suite failed to run
Jest encountered an unexpected token
This usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.
By default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".
Here's what you can do:
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/en/configuration.html
Details:
SyntaxError: C:\Test\counter-app\src\App.test.js: Unexpected token (7:18)
5 | it('renders without crashing', () => {
6 | const div = document.createElement('div');
> 7 | ReactDOM.render(<App />, div);
| ^
8 | ReactDOM.unmountComponentAtNode(div);
9 | });
package.json
{
"name": "counter-app",
"version": "0.1.0",
"private": true,
"jest": {
"verbose": true,
"moduleDirectories": ["node_modules", "src"],
"transformIgnorePatterns": [
"node_modules/(?!(react-native|react-native-cookies)/)"
]
},
"dependencies": {
"bootstrap": "^4.3.1",
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest --env=jsdom",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
jest.config.js
const {defaults} = require('jest-config');
module.exports = {
"verbose": true,
"transform": {
"^.+\\.js$": "babel-jest",
"^.+\\.(css|scss|less)$": "jest-css-modules",
".+\\.(css|styl|less|sass|scss)$": "<rootDir>/node_modules/jest-css-modules-transform"
},
"globals": {
"NODE_ENV": "test"
},
moduleFileExtensions: [...defaults.moduleFileExtensions, 'js', 'jsx'],
"moduleDirectories": [
"node_modules",
"src/frontend",
"src/shared"
]
};
Modified Package.json as follows:
{
"name": "foo",
"version": "0.1.0",
"private": true,
"dependencies": {
"jest-junit": "^9.0.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-scripts": "3.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"reporters": [ "default", "jest-junit" ],
"test": "react-scripts test --watchAll=false",
"testResultsProcessor": "jest-junit",
"eject": "react-scripts eject"
},
"jest-junit": {
"suiteName": "jest tests",
"outputDirectory": ".",
"outputName": "junit.xml",
"uniqueOutputName": "false",
"classNameTemplate": "{classname}-{hello}",
"titleTemplate": "{classname}-{helloTests}",
"ancestorSeparator": " › ",
"usePathForSuiteName": "true"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
Try removing jest.config.js file completely and let it work with default config.