This is my 1st question in this site :)
I'm pretty new to coding and I'm currently working in react.
I was making my first project yesterday, today I went back to it and initialized live-server and babel compiler for my jsx component, this is the code I put in:
C:\Users\asus\Desktop\Adolf\react-course-projects\indecision-app>babel src/playg
round/play.js --out-file=public/scripts/app.js --presets=env, react --watch
But after I hit enter all it answers its:
"react doesn't exist"
if I take "react" off the code and leave just env it works fine , but I think it must be there for correct parsing or something... i already did npm install again...
This is my package.json
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1"
}
}
Seems like both dependencies are there...
Any ideas?
Thanks in advance! :)
It looks like you're missinng react package.
But if you're new to React, I would suggest to start with create-react-app https://github.com/facebook/create-react-app. That will setup everything for you, it's easier to start with that.
{
"name": "indecision-app",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"dependencies": {
"babel-preset-env": "1.5.2",
"babel-preset-react": "6.24.1"
"react": "16.3.1",
"react-dom": "16.3.1",
}
}
you need to install react and react-dom use npm install --save react react-dom to add those on you dependencies.
In this tutorial, you're supposed to cut the JSX written in public/scripts/app and pasted it in src/app . Your babel command then requests that the JSX in src/app gets transpiled into the 'output file' public/scripts/app.
Unless the JSX is in the right file, you'll also get the same error you described.
the following command should not have a space between env and react
babel src/playg round/play.js --out-file=public/scripts/app.js --presets=env, react --watch
try this
babel src/playg round/play.js --out-file=public/scripts/app.js --presets=env,react --watch
it should work
Related
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
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.
I am learning JS and I am trying to install ESlint but I keep having the same error.
Just trying to install ESlint on VSC, but never got it working. I have uninstalled and reinstalled eslint, cache clean, installed and removed several packages without success, it comes back with the same error.
package.json
{
"name": "11_06",
"version": "1.0.0",
"description": "",
"main": "script.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {},
"devDependencies": {
"tslib": "^1.10.0"
}
}
Error message:
"ESLint: Unexpected token n in JSON at position 173. Please see the 'ESLint' output channel for details."
How/where/which file can I look at line 173 for the issue?
UPDATE:
I found the source of the problem, despite installing eslint several times properly using the recommended methods by npm or auto install, globally and locally, then cleaning cache and trying it again and again, I eventually found a problem with the way eslint was installing on my VSC, I don't know why but it was not creating the eslintrc.json file with the basic info. Once I created it manually eslint started working. Still don't know what I have done wrong initially. Good luck.
I am trying to expo start in my project and running it on tunnel using IOS. I have tried searching for it, creating new project and tried everything I found on internet but nothing works.
My package.json
{
"name": "test_proj",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"expo": "32.0.0",
"react": "16.6.3",
"react-native": "0.58.5"
},
"devDependencies": {
"babel-core": "7.0.0-bridge.0",
"babel-jest": "24.1.0",
"jest": "24.1.0",
"metro-react-native-babel-preset": "0.52.0",
"react-test-renderer": "16.6.3"
},
"jest": {
"preset": "react-native"
}
}
App.json
{
"name": "test_proj",
"displayName": "test_proj",
"expo": {
"sdkVersion": "32.0.0"
}
}
From the Expo documentation
Expo SDK v32.0.0 is based once again on React Native 0.57 “September 2018”, the same major version as SDK 31.
So as far as I am aware SDK 32 only works with react-native: 0.57.1 so trying other versions won't work.
In Expo projects the react-native dependency usually looks like this in the package.json
react-native: "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
So returning your react-native dependency to what it was originally may fix the issue.
An alternative reason for the mismatch error is that it can be caused by using the bundler with one version of react-native and then trying to use a different version without clearing the bundler.
To fix this error you can do it by:
Closing the bundler
Clearing the cache
Restarting the bundler
Restarting the app
I wrote a small Excel add-in using node.js with jQuery. The source code was generated by "yo office". Below is the content of package.json file.
{
"name": "my-office-add-in",
"description": "",
"author": "",
"version": "0.1.0",
"scripts": {
"start": "browser-sync start --config bsconfig.json",
"validate": "./node_modules/.bin/validate-office-addin"
},
"dependencies": {
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"datatables.net": "^1.10.16",
"datatables.net-dt": "^1.10.16",
"office-addin-validator": "^1.0.1",
"office-ui-fabric-js": "^1.3.0"
},
"devDependencies": {
"browser-sync": "^2.18.5",
"#types/office-js": "^0.0.37"
}
}
I need to get rid of BrowserSync usage and use another command to start my application. The reason I need to do that is my Excel add-in is being placed onto a shared folder and used by multiple users. BrowserSync synchronizes views in browsers of different users who work simultaneously.
Can someone show me the alternative solution? Thanks in advance.
You can use any package that spins up an https web server.
http-server is an alternative you can get using npm.
https://www.npmjs.com/package/http-server
To install:
npm install http-server --save-dev
From there change your start script to "start": "http-server --ssl"
That will start a server at your root directory and you can navigate to your index file.