Trouble running npm start on new react app [duplicate] - reactjs

I was running an Electron project, and everything worked just fine. But now when I run any of the scripts in my package.json (including npm start), it just escapes a line and doesn't do anything.
My package.json:
{
"name": "interclip-desktop",
"version": "0.0.7",
"description": "Interclip for desktop",
"repository": "https://github.com/aperta-principium/Interclip-desktop",
"main": "main.js",
"scripts": {
"start": "electron .",
"package-mac": "electron-packager . --overwrite --asar=true --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . Interclip --overwrite --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"Interclip\"",
"package-linux": "electron-packager . Interclip --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/icon.png --prune=true --out=release-builds",
"win-install": "node installers/windows/createinstaller.js",
"postinstall": "electron-builder install-app-deps",
"build": "electron-builder --linux",
"release": "electron-builder --linux --publish always"
},
"keywords": [
"Desktop",
"Interclip"
],
"author": "Filip Troníček",
"license": "MIT",
"devDependencies": {
"electron": "^7.1.2",
"electron-builder": "^22.1.0",
"electron-installer-dmg": "^3.0.0",
"electron-packager": "^14.1.1",
"electron-reload": "^1.5.0",
"electron-winstaller": "^4.0.0"
},
"dependencies": {
"axios": "^0.19.0",
"mousetrap": "^1.6.3"
},
"build": {
"appId": "com.aperta-principium.interclip",
"productName": "Interclip",
"mac": {
"category": "public.app-category.utilities"
},
"dmg": {
"icon": false
},
"linux": {
"target": [
"AppImage"
],
"category": "Utility"
}
}
}
I tried updating NPM, didn't work. When I tried in different projects, also doesn't work.
Thanks in advance

npm has a ignore-scripts configuration key. It's expected value is a Boolean and it's set to false by default.
Perhaps it has inadvertently been set to true.
To get/set the ignore-scripts configuration you can utilize the npm-config command:
Check its current setting by running:
npm config get ignore-scripts
If the aforementioned command returns true then reset it to false by running:
npm config set ignore-scripts false

If you are using an integrated terminal (such as the VsCode integrated terminal) try running your npm "run dev' command from your PowerShell (or cmd) terminal. This error arises as a result of your integrated terminal not recognizing your command (especially if you created your app with a git bash terminal).
Try this, and I hope it helps someone cause it always works for me. Cheers!!!

Related

Cannot find MDX module in Gatsby

I'm making a Gatsby site, and I've intially set it up to use markdown files via gatsby-transformer-remark. I've since decided to move it over to MDX in order to have a bit more freedom in what content I can use.
I've followed this guide to migrate the project from MD to MDX, but I keep getting the following error:
Cannot find module 'D:\XXXX\XXXX\gatsby\.cache\caches\gatsby-plugin-mdx\webpack\output.js'
Require stack:
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\utils\render-html.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby\source-nodes.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby-plugin-mdx\gatsby-node.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\validate.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\load.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\bootstrap\load-plugins\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\initialize.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\services\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\services.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\state-machines\develop\index.js
- D:\XXXX\XXXX\gatsby\node_modules\gatsby\dist\commands\develop-process.js
- D:\XXXX\XXXX\gatsby\.cache\tmp-4452-lp3aICfNr8bo
I've tried:
Clearing cache and build files (gatsby clean)
Updating all packages, including Gatsby itself
Various ways to include the plugin in gatsby-config.js
Changing it all back to MD, making sure it works, and then migrating it to MDX once again.
Doing a build. Same thing happens as when running gatsby develop
Deleting package-lock.json and node_modules folder and running npm install again.
Nothing worked. This has to be something really stupid to do with NPM or Webpack but I just don't see it.
gatsby-config.js
module.exports = {
siteMetadata: {
title: "XXXX",
copyright: "XXXX"
},
plugins: [
{
resolve: `gatsby-plugin-mdx`,
options: {
extensions: [`.md`, `.mdx`],
},
},
`gatsby-transformer-remark`,
`gatsby-plugin-image`,
`gatsby-plugin-sharp`,
`gatsby-transformer-sharp`,
{
resolve: `gatsby-source-filesystem`,
options: {
name: `src`,
path: `${__dirname}/src/`,
},
},
]
}
package.json
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"#mdx-js/mdx": "^1.6.22",
"#mdx-js/react": "^1.6.22",
"gatsby": "^3.1.2",
"gatsby-plugin-image": "^1.1.2",
"gatsby-plugin-mdx": "^2.1.0",
"gatsby-plugin-sharp": "^3.1.2",
"gatsby-source-filesystem": "^3.1.0",
"gatsby-transformer-remark": "^3.1.0",
"gatsby-transformer-sharp": "^3.1.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-in-viewport": "^1.0.0-alpha.16",
"react-reveal-text": "^0.1.1",
"react-spring": "^8.0.27",
"react-text-loop": "^2.3.0"
},
"devDependencies": {
"prettier": "2.2.1"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
EDIT:
I should point out that when I go that location in cache that's mentioned in the error, there really is no webpack folder, nor output.js - so it really isn't being generated when I run gatsby develop, I just can't understand why.
I've also tried making a new project by cloning the offical gatsby mdx starter template, and that is working just fine out of the box.

getting error : Found bindings for the following environments: - Linux 64-bit with Node.js 9.x in my ubuntu system

when i try to start my project in react, i am getting this error , i am using Ubuntu system
Found bindings for the following environments: - Linux 64-bit with Node.js 9.x
I am using node -v : 10.13.0 and npm -v : 6.11.2, here i have also attached my package.json file, can anyone please help me how to resolve this issue ?
{
"name": "gatsby-starter-hello-world",
"private": true,
"description": "A simplified bare-bones starter for Gatsby",
"version": "0.1.0",
"license": "0BSD",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
"start": "npm run develop",
"serve": "gatsby serve",
"clean": "gatsby clean",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
},
"dependencies": {
"classnames": "^2.2.6",
"gatsby": "^2.24.48",
"gatsby-background-image": "^1.1.2",
"gatsby-plugin-routes": "^1.0.0",
"gatsby-plugin-sass": "^2.3.12",
"gatsby-plugin-sharp": "^2.6.28",
"gatsby-source-filesystem": "^2.3.25",
"gatsby-transformer-sharp": "^2.5.13",
"node-sass": "^4.14.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.0.1"
},
"devDependencies": {
"prettier": "2.0.5"
},
"repository": {
"type": "git",
"url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
},
"bugs": {
"url": "https://github.com/gatsbyjs/gatsby/issues"
}
}
You just need to use:
npm rebuild node-sass
I would suggest adding a .nvmrc file in the root of your project to avoid this error happen. This is a simple file that fixes the Node version for your project in order to avoid a mismatch between versions and forcing the project to run under a specific version. You just need to add a .nvmrc file with this content:
v10.13.0
Try removing your node_modules and reinstalling. You might also want to check that you don't have something link NVM or and old Node 9 version in your path, that node-sass is picking up while intalling

How do I Create Electron App from existing React Project without disturbing the React Project

I have existing React Apps which are published to production web servers but I want to run them from the desktop using Electron. However, I do not want to disturb the React App package.json. I attempted to decouple an existing online tutorial by paachu on Medium but was unsuccessful. It kept failing trying to locate "main...chunk.css" and other resources needed by the React App.
With that said, I have a working React App in directory ./projx/reactApp I would like to create an Electron App in ./projx/electronApp that will build and create a packaged executable using electron-builder. The dev environment is not necessary at this time in that I only need a release package to distribute. Here is a package.json that almost works:
{
"name": "wrappedReact",
"version": "1.0.0",
"main": "./src/electron.js",
"scripts": {
"preclean": "cross-env rm -rf build",
"react-prebuild": "cross-env cp -r ../reactApp/build build",
"build-tsapp": "tsc ./src/electron.ts",
"electron-prebuild": "mv ./src/*.js ../build",
"electron-build": "npm run electron-prebuild && electron-builder",
"build": "npm run preclean && npm run electron-build",
"startdev": "concurrently \"tsc ./src/electron.ts -w\" \"cross-env
NODE_ENV=dev nodemon --exec \"\"wait-on http://localhost:3000 &&
electron src/electron.js\"\""
},
"author": "sfanjoy",
"homepage": "./",
"electron-pack": "build --em.main=build/electron.js",
"build": {
"appId": "com.example.reactApp",
"productName": "ReactApp",
"copyright": "Copyright © 2019 sfanjoy",
"files": [
"build/**/*",
"node_modules/**/*"
],
"directories": {
"buildResources": "assets"
},
"win": {
"target": "portable",
"icon": "assets/app.ico"
}
},
"dependencies": {
"#types/electron": "^1.6.10"
},
"devDependencies": {
"#types/electron": "^1.6.10",
"concurrently": "^4.1.1",
"cross-env": "^5.2.1",
"electron-builder": "^21.2.0",
"electron-is-dev": "^1.1.0",
"nodemon": "^1.19.1",
"typescript": "^3.5.2",
"wait-on": "^3.2.0"
}
}
I think the solution is with electron-builder if it would allow you to inject the ./src/electron.js into the prebuilt reactApp\dist\win-unpacked\resources\app.asar. I could then copy the reactApp/build directory, inject into the asar, and call electron-builder.
This by far (IMO) is the best starting setup (Boilerplate) I have come accross:
https://github.com/nateshmbhat/electron-react-ts-starter/

How do I run my mocha.js tests in visual studio online build process

I have a react web application, that uses webpack.
Due to the issue with Left-pad I am including my node_modules folder in source control.
I have mocha and enzyme set up to unit test my react modules and my packages.json has the following test configuration.
"test": "mocha-webpack --webpack-config webpack.config-test.js \"source/**/*.test.js\""
It all works great. when I run
npm run test
on my local development machine. All my test's get executed.
The problem I have is when I run "npm run test" as part of a build process on a dedicated build machine I get the following error
Error: Cannot find module 'enzyme'
After some digging around, I discovered that if I ran
npm install enzyme
on the build machine before I ran the test, then it worked fine.
The reason this worked is that the install modified my node_modules/enzyme/packages.json file. There are 2 full paths stored in this file that had the paths to my local dev environment in them, and they got changed to the full path to where my project was run on the build machine.
One under _Args and one under _where
{
"_args": [
[
{
"raw": "enzyme#^2.6.0",
"scope": null,
"escapedName": "enzyme",
"name": "enzyme",
"rawSpec": "^2.6.0",
"spec": ">=2.6.0 <3.0.0",
"type": "range"
},
"C:\\Dev\\UnifiedWeb"
]
],
"_from": "enzyme#>=2.6.0 <3.0.0",
"_id": "enzyme#2.6.0",
"_inCache": true,
"_location": "/enzyme",
"_nodeVersion": "7.0.0",
"_npmOperationalInternal": {
"host": "packages-12-west.internal.npmjs.com",
"tmp": "tmp/enzyme-2.6.0.tgz_1478746866117_0.454174768878147"
},
"_npmUser": {
"name": "ljharb",
"email": "ljharb#gmail.com"
},
"_npmVersion": "3.10.8",
"_phantomChildren": {},
"_requested": {
"raw": "enzyme#^2.6.0",
"scope": null,
"escapedName": "enzyme",
"name": "enzyme",
"rawSpec": "^2.6.0",
"spec": ">=2.6.0 <3.0.0",
"type": "range"
},
"_requiredBy": [
"#DEV:/",
"#USER"
],
"_resolved": "https://registry.npmjs.org/enzyme/-/enzyme-2.6.0.tgz",
"_shasum": "148d742b25e2565f7e80870a0c92aea9be1b90ea",
"_shrinkwrap": null,
"_spec": "enzyme#^2.6.0",
"_where": "C:\\Dev\\UnifiedWeb",
"author": {
"name": "Leland Richardson",
"email": "leland.richardson#airbnb.com"
},
"bugs": {
"url": "https://github.com/airbnb/enzyme/issues"
},
"dependencies": {
"cheerio": "^0.22.0",
"function.prototype.name": "^1.0.0",
"in-publish": "^2.0.0",
"is-subset": "^0.1.1",
"lodash": "^4.16.4",
"object-is": "^1.0.1",
"object.assign": "^4.0.4",
"object.entries": "^1.0.3",
"object.values": "^1.0.3",
"uuid": "^2.0.3"
},
"description": "JavaScript Testing utilities for React",
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.2",
"babel-eslint": "^7.1.0",
"babel-loader": "^6.2.7",
"babel-preset-airbnb": "^2.1.1",
"babel-register": "^6.18.0",
"chai": "^3.5.0",
"coveralls": "^2.11.14",
"enzyme-example-jest": "^0.1.0",
"enzyme-example-karma": "^0.1.1",
"enzyme-example-karma-webpack": "^0.1.4",
"enzyme-example-mocha": "^0.1.0",
"enzyme-example-react-native": "^0.1.0",
"eslint": "^3.9.1",
"eslint-config-airbnb": "^13.0.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3",
"eslint-plugin-react": "^6.6.0",
"gitbook-cli": "^1.0.1",
"istanbul": "^1.0.0-alpha.2",
"jsdom": "^6.1.0",
"json-loader": "^0.5.4",
"karma": "^1.3.0",
"karma-chrome-launcher": "^1.0.1",
"karma-firefox-launcher": "^1.0.0",
"karma-mocha": "^1.2.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^1.8.0",
"mocha": "^3.1.2",
"rimraf": "^2.5.4",
"safe-publish-latest": "^1.1.1",
"sinon": "^1.17.6",
"webpack": "^1.13.3"
},
"directories": {},
"dist": {
"shasum": "148d742b25e2565f7e80870a0c92aea9be1b90ea",
"tarball": "https://registry.npmjs.org/enzyme/-/enzyme-2.6.0.tgz"
},
"gitHead": "5c37d91715a88d393f3c260447a189a446d76e0c",
"homepage": "https://github.com/airbnb/enzyme#readme",
"keywords": [
"javascript",
"shallow rendering",
"shallowRender",
"test",
"reactjs",
"react",
"flux",
"testing",
"test utils",
"assertion helpers",
"tdd",
"mocha"
],
"license": "MIT",
"main": "build",
"maintainers": [
{
"name": "airbnb",
"email": "jordan.harband+npm#airbnb.com"
},
{
"name": "intelligibabble",
"email": "leland.m.richardson#gmail.com"
},
{
"name": "ljharb",
"email": "ljharb#gmail.com"
}
],
"name": "enzyme",
"optionalDependencies": {},
"peerDependencies": {
"react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x"
},
"readme": "ERROR: No README data found!",
"repository": {
"type": "git",
"url": "git+https://github.com/airbnb/enzyme.git"
},
"scripts": {
"build": "babel src --out-dir build",
"check": "npm run lint && npm run test:all",
"clean": "rimraf build",
"docs:build": "npm run docs:prepare && gitbook build",
"docs:clean": "rimraf _book",
"docs:prepare": "gitbook install",
"docs:publish": "npm run docs:clean && npm run docs:build && cd _book && git init && git commit --allow-empty -m 'update book' && git fetch git#github.com:airbnb/enzyme.git gh-pages && git checkout -b gh-pages && git add . && git commit -am 'update book' && git push git#github.com:airbnb/enzyme.git gh-pages --force",
"docs:watch": "npm run docs:prepare && gitbook serve",
"lint": "eslint --ext js,jsx src test",
"postversion": "git push && git push --tags && npm run clean && npm run docs:publish",
"prepublish": "not-in-publish || (npm run clean && npm run build && safe-publish-latest)",
"pretest": "npm run lint",
"preversion": "npm run clean && npm run check",
"react:13": "npm run react:clean && npm i react#0.13",
"react:14": "npm run react:clean && npm i react#0.14 react-dom#0.14 react-addons-test-utils#0.14",
"react:15": "npm run react:clean && npm i react#15 react-dom#15 react-addons-test-utils#15",
"react:clean": "rimraf node_modules/react node_modules/react-dom node_modules/react-addons-test-utils",
"test": "npm run clean && npm run build && npm run test:only",
"test:all": "npm run react:13 && npm run test:only && npm run react:14 && npm run test:only && npm run react:15 && npm run test:only",
"test:env": "sh ./example-test.sh",
"test:karma": "karma start",
"test:only": "mocha --recursive test",
"test:single": "mocha --watch",
"test:watch": "mocha --recursive --watch test",
"travis": "babel-node ./node_modules/.bin/istanbul cover --report html _mocha -- test --recursive",
"version": "npm run build"
},
"version": "2.6.0"
}
This problem will also affect other developers in my team, as the paths will need to be changed to their local development if they want to run the tests locally.
Why is the full path in the enzyme package? Is there a better way of handling this? Am I missing something, or is npm not portable?
Have you tried npm link ext/* --prefix=node_modules
As per this thread - Local dependency in package.json

VSCode: Can't start node javascript project in debugger on mac OSX

While trying to start the angular-phonecat tutorial project from VSCode debug the following error appears
program '/Users/xxxx/src/node/angular-phonecat/8000' does not exist
The project was cloned as follows
git clone --depth=14 https://github.com/angular/angular-phonecat.git
Here is the generated configuration
{
"version": "0.1.0",
// List of configurations. Add new configurations or edit existing ones.
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch 8000",
// Type of configuration.
"type": "node",
// Workspace relative or absolute path to the program.
"program": "8000",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": [],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Optional arguments passed to the runtime executable.
"runtimeArgs": ["--nolazy"],
// Environment variables passed to the program.
"env": {
"NODE_ENV": "development"
},
// Use JavaScript source maps (if they exist).
"sourceMaps": false,
// If JavaScript source maps are enabled, the generated code is expected in this directory.
"outDir": null
},
{
"name": "Attach",
"type": "node",
// TCP/IP address. Default is "localhost".
"address": "localhost",
// Port to attach to.
"port": 5858,
"sourceMaps": false
}
]
}
The package.json is as follows
{
"version": "0.0.0",
"private": true,
"name": "angular-phonecat",
"description": "A tutorial application for AngularJS",
"repository": "https://github.com/angular/angular-phonecat",
"license": "MIT",
"devDependencies": {
"karma": "^0.12.16",
"karma-chrome-launcher": "^0.1.4",
"karma-firefox-launcher": "^0.1.3",
"karma-jasmine": "~0.1.0",
"protractor": "^2.1.0",
"http-server": "^0.6.1",
"tmp": "0.0.23",
"bower": "^1.3.1",
"shelljs": "^0.2.6"
},
"scripts": {
"postinstall": "bower install",
"prestart": "npm install",
"start": "http-server -a 0.0.0.0 -p 8000",
"pretest": "npm install",
"test": "node node_modules/karma/bin/karma start test/karma.conf.js",
"test-single-run": "node node_modules/karma/bin/karma start test/karma.conf.js --single-run",
"preupdate-webdriver": "npm install",
"update-webdriver": "webdriver-manager update",
"preprotractor": "npm run update-webdriver",
"protractor": "protractor test/protractor-conf.js",
"update-index-async": "node -e \"require('shelljs/global'); sed('-i', /\\/\\/##NG_LOADER_START##[\\s\\S]*\\/\\/##NG_LOADER_END##/, '//##NG_LOADER_START##\\n' + cat('bower_components/angular-loader/angular-loader.min.js') + '\\n//##NG_LOADER_END##', 'app/index-async.html');\""
}
}
you need to run "npm start" from console, before using "Launch Localhost with sourcemaps" Debug options.
configurations will be something like
{
"name": "Launch localhost with sourcemaps",
"types": "chrome",
"request": "launch",
"url": "http://localhost:8000/app",
"sourceMaps": true,
"webRoot": "${workspaceRoot}"
}
BTW, I am using version 0.2.0 launch.json.

Resources