I am trying to build some tests that i have on my code, but i am not able to run it because it does not recognize the import statements.
when I run "npm test" to check my tests, i receive this error:
({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import React from 'react'
^^^^^^
SyntaxError: Unexpected token import
at ScriptTransformer._transformAndBuildScript (node_modules/jest-cli/node_modules/jest-runtime/build/ScriptTransformer.js:289:17)
at <anonymous>
These are my .babelrc and package.json files:
package.json:
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"dev": "^0.1.3",
"react": "^15.6.1",
"react-google-button": "^0.3.0",
"react-google-login": "^2.9.2",
"react-google-login-component": "^0.7.0",
"react-native-google-signin": "^0.10.0",
"react-redirect": "^1.0.0",
"react-router-dom": "^4.1.2",
"react-scripts": "0.9.5"
},
"devDependencies": {
"babel-jest": "^20.0.3",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"enzyme": "^2.9.1",
"enzyme-to-json": "^1.5.1",
"identity-obj-proxy": "^3.0.0",
"jest-cli": "^20.0.4",
"react-addons-test-utils": "^15.6.0",
"react-dom": "^15.6.1"
},
"jest": {
"transform": {}
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"eject": "react-scripts eject"
}
}
.babelrc:
{
"plugins":["transform-react-jsx"],
"presets": ["es2015", "react"],
"env": {
"test": {
"plugins": ["transform-es215-modules-commonjs"]
}
}
}
Related
I just have some of problem here at my scss files at any parts of my folder wherein it doesn't work anymore and I don't understand why..I tried to research it but I couldn't find the same error that I have?
Its on my react or any normal html in my react I already install it my package.json
{
"name": "my-messages",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.6",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.2.2",
"emoji-picker-react": "^4.4.5",
"firebase": "^9.12.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^8.0.4",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"redux": "^4.2.0",
"sass": "^1.55.0",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
And here in the image as you see its not working anymore..
I didn't touch anything that changes on my terminal or does the SCSS changes???
Here is my bottom right corner thing
Maybe the location of CSS file is changed.
Invalid CSS format.
Try a different browser.
When I run firebase deploy --only functions I get this error:
Build failed: node:internal/errors:477
ErrorCaptureStackTrace(err);
^
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /workspace/src/index.ts
at new NodeError (node:internal/errors:387:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:76:11)
at defaultGetFormat (node:internal/modules/esm/get_format:118:38)
at checkSyntax (node:internal/main/check_syntax:57:26) {
code: 'ERR_UNKNOWN_FILE_EXTENSION'
}; Error ID: 037e0eb0
Functions deploy had errors with the following functions:
triggerMe(us-central1)
I'm also getting an error in the Firebase Console showing a red triangle next to this function, saying Function deployment failed. Please try again.
I ran npm outdated and npm update, everything is the latest version.
Here's my index.ts file:
const functions = require('firebase-functions');
const admin = require('firebase-admin');
admin.initializeApp();
exports.triggerMe = functions.firestore.document('Triggers/{docId}').onWrite((data, context) => {
console.log("Trigger warning!")
console.log(data.message);
return 30
});
I was getting errors about the data and context parameters being implicit any type so I added "noImplicitAny": false, to tsconfig.json:
{
"compilerOptions": {
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"noImplicitAny": false,
"target": "es2017"
},
"compileOnSave": true,
"include": [
"src"
]
}
I also tried switching strict to false. This didn't help.
In my environments.ts file I added useEmulators: true. I get this error whether this property is set to true or false.
Here's my functions/package.json:
{
"name": "functions",
"scripts": {
"build": "tsc",
"build:watch": "tsc --watch",
"serve": "npm run build && firebase emulators:start --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "16"
},
"main": "src/index.ts",
"dependencies": {
"firebase-admin": "^10.2.0",
"firebase-functions": "^3.21.0"
},
"devDependencies": {
"typescript": "^4.8.4"
},
"private": true
}
And the other package.json file:
{
"name": "triggerable-functions-tutorial",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"private": true,
"dependencies": {
"#angular/animations": "^14.2.0",
"#angular/common": "^14.2.0",
"#angular/compiler": "^14.2.0",
"#angular/core": "^14.2.0",
"#angular/fire": "^7.4.1",
"#angular/forms": "^14.2.0",
"#angular/platform-browser": "^14.2.0",
"#angular/platform-browser-dynamic": "^14.2.0",
"#angular/router": "^14.2.0",
"firebase": "^9.12.1",
"firebase-admin": "^11.2.0",
"firebase-functions": "^4.0.1",
"rxjs": "~7.5.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.2.6",
"#angular/cli": "~14.2.6",
"#angular/compiler-cli": "^14.2.0",
"#types/jasmine": "~4.3.0",
"jasmine-core": "~4.4.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.0.0",
"typescript": "~4.8.4"
}
}
And firebase.json:
{
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
],
"emulators": {
"functions": {
"port": 5001
},
"firestore": {
"port": 8080
},
"ui": {
"enabled": true
},
"singleProjectMode": true
}
}
Try the following solution:
Remove the "type": "module" from the package.json if added, it looks like you don't have it.
In tsconfig.json, under the compilerOptions, set the "moduleResolution": "Node".
Like so:
{
"compilerOptions": {
"module": "CommonJS",
"moduleResolution": "Node"
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"noImplicitAny": false,
"target": "es2017"
},
"compileOnSave": true,
"include": [
"src"
]
}
Source: Can't run my Node.js Typescript project TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for /app/src/App.ts
I added "type": "module", to package.json. This got rid of the ERR_UNKNOWN_FILE_EXTENSION error. I also upgraded the dependencies to the latest versions.
{
"name": "functions",
"type": "module",
"scripts": {
"build": "tsc",
"build:watch": "tsc --watch",
"serve": "npm run build && firebase emulators:start --only functions",
"shell": "npm run build && firebase functions:shell",
"start": "npm run shell",
"deploy": "firebase deploy --only functions",
"logs": "firebase functions:log"
},
"engines": {
"node": "16"
},
"main": "src/index.ts",
"dependencies": {
"firebase-admin": "^11.2.0",
"firebase-functions": "^4.0.1"
},
"devDependencies": {
"typescript": "^4.8.4"
},
"private": true
}
I now get this error:
Function failed on loading user code. This is likely due to a bug in the user code.
I changed (data, context) to (data: any, context: any) and that error was replaced with this error:
SyntaxError: Unexpected token ':'
I have "noImplicitAny": false, in tsconfig.json. Changing that to true throws the expected error (indicating that the property is working):
Parameter 'data' implicitly has an 'any' type.
I removed noImplicitAny and set strict to false. This threw this error:
Function failed on loading user code. This is likely due to a bug in the user code.
I'm giving up and using JavaScript.
This is the error:
SyntaxError: Unexpected token } in JSON at position 322. But JSON file
is correct.
JSON file:
{
"name": "gl",
"version": "1.0.0",
"description": "GL online CV",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Alex Guzhyk",
"license": "ISC",
"dependencies": {
"express": "^4.16.2",
"react": "^16.1.1",
"react-dom": "^16.1.1",
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1",
}
}
Validate your JSON to know if the format is correct.
Remove the trailing comma at the end of the collection.
{
"name": "gl",
"version": "1.0.0",
"description": "GL online CV",
"main": "index.html",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Alex Guzhyk",
"license": "ISC",
"dependencies": {
"express": "^4.16.2",
"react": "^16.1.1",
"react-dom": "^16.1.1"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"webpack": "^3.8.1"
}
}
You can check it here:
https://jsonlint.com/
In JSON, you can not have a trailing comma.
Incorrect usage
"person": {
"age": 31,
"gender": "male",
}
Unlike javascript, JSON is a strict data format which is not javascript! It has only been derived from it.
Therefore in JSON, you are not allowed to add a trailing comma.
Correct usage
"person": {
"age": 31,
"gender": "male"
}
I'm getting this error while running my gulpfile. I'm assuming that there's something wrong with my Babel version.
Here is my package.json
{
"name": "riotjs-es6-structure",
"version": "1.0.0",
"description": "",
"main": "gulpfile.js",
"dependencies": {},
"devDependencies": {
"babel-core": "^6.10.4",
"babel-preset-es2015": "^6.9.0",
"babelify": "^7.3.0",
"browserify": "^13.0.1",
"graceful-fs": "^4.1.4",
"gulp": "^3.9.1",
"gulp-livereload": "^3.8.1",
"gulp-plumber": "^1.1.0",
"gulp-riot": "^0.5.1",
"gulp-sourcemaps": "^1.6.0",
"gulp-uglify": "^1.5.4",
"riot": "^2.4.1",
"riotify": "^1.0.1",
"vinyl-buffer": "^1.0.0",
"vinyl-source-stream": "^1.1.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
This is my .babelrc file
{
"presets": ["es2015"]
}
What did I miss? :(
I am using gulpfile.js but it is throwing compile time error for gulp-notify
Following is structure of package.json
{
"name": "flux-pricing",
"version": "0.0.1",
"description": "Pricing component with flux",
"main": "gulpfile.js",
"dependencies": {
"flux": "^2.0.0",
"react": "^0.12.0",
"underscore": "^1.7.0"
},
"devDependencies": {
"envify": "~1.2.1",
"browserify": "~4.2.0",
"gulp": "~3.9.0",
"gulp-notify": "~1.4.0",
"gulp-util": "~2.2.19",
"reactify": "~0.13.1",
"vinyl-source-stream": "~0.1.1",
"watchify": "~0.10.2"
},
"scripts": {
"start": "watchify -o js/bundle.js -v -d .",
"build": "browserify . | uglifyjs -cm > js/bundle.min.js"
},
"author": "Ken Wheeler",
"browserify": {
"transform": [
"reactify",
"envify"
]
}
}