When I run this nestjs code, I encounter an error:
SyntaxError: Invalid or unexpected token
what is the reason?
import {Controller, Get, Bind, Req, Post} from '#nestjs/common';
#Controller('cats')
export class catsController {
#Post()
create() {
return "this is a action 1ss"
}
#Get()
#Bind(Req())
findAll(request) {
return "this is a action";
}
}
If you are just using JavaScript, not Typescript, you need to have a babel config like the following
// .babelrc
{
"presets": ["#babel/preset-env"],
"plugins": [
["#babel/plugin-proposal-decorators", { "legacy": true }],
[
"#babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
And then use babel-node instead of node so that babel can properly interpret the decorators.
The docs even mention this on the getting started page
Nest takes advantage of the latest language features, so to use it with vanilla JavaScript we need a Babel compiler.
Related
I'm trying to understand how to fix the following error using Jest in my unit tests in NodeJS.
The test run with this command "test": "NODE_ENV=test jest spec/* -i --coverage --passWithNoTests",
I'm also using babel and this is my config
{
"presets": [["#babel/env", { "targets": { "node": "current" } }]],
"plugins": [
"#babel/plugin-syntax-dynamic-import",
["babel-plugin-inline-import", { "extensions": [".gql"] }],
["#babel/plugin-proposal-decorators", { "legacy": true }]
]
}
In package.json I have this
"jest": {
"verbose": true,
"collectCoverageFrom": [
"spec/**/*.js"
]
},
I tried several guides online but cannot find a solution to this
You've got Jest successfully configured to transform your code, but it is not transforming modules that you're importing—in this case node-fetch, which has the import keyword in its source code (as seen in your error). This is because, by default, Jest is configured not to transform files in node_modules:
transformIgnorePatterns [array]
Default: ["/node_modules/", "\.pnp\.[^\/]+$"]
An array of regexp pattern strings that are matched against all source file paths before transformation. If the file path matches any of the patterns, it will not be transformed.
You can set transformIgnorePatterns to exclude certain packages in node_modules with a jest.config.js like this:
const esModules = [
'node-fetch',
'data-uri-to-buffer',
'fetch-blob',
'formdata-polyfill',
].join('|');
module.exports = {
transformIgnorePatterns: [
`/node_modules/(?!${esModules})`,
'\\.pnp\\.[^\\/]+$',
],
};
(see https://github.com/nrwl/nx/issues/812#issuecomment-429420861)
If you have .babelrc try to rename it to babel.config.js
Source:
https://babeljs.io/docs/en/configuration#whats-your-use-case
but also this (there's more in the discussion)
Jest won't transform the module - SyntaxError: Cannot use import statement outside a module
This question already has answers here:
Unexpected token '=' in React Component [duplicate]
(2 answers)
Closed 4 years ago.
I have the following .babelrc in the root directory of a React project that I build with Webpack (created with create-react-app).
{
"presets": ["react-app", "env"],
"plugins": [
[
"react-intl",
{
"messagesDir": "./public/messages/"
}
]
]
}
When I run the build, I get the following error
Syntax error: Missing class properties transform.
1 | export default class ValidationUtils {
> 2 | static isPhoneNumber = 'whatever'
| ^
3 | }
If I remove "env" from the presets list I no longer get this error, but instead, I get an error that complains about the usage of an ES6 import in a script that is run as part of the build
/apps/my-app/scripts/mergeMessages.js:3
import * as fs from "fs";
^^^^^^
SyntaxError: Unexpected token import
Is there some presets setting (or anything else) that will overcome both of these issues?
You need the transform-class-properties plugin: https://babeljs.io/docs/en/babel-plugin-transform-class-properties
You babelrc will then look like this:
{
"presets": ["react-app", "env"],
"plugins": [
[
"react-intl",
{
"messagesDir": "./public/messages/"
}
],
"transform-class-properties"
]
}
I've been trying to set up tests for some Angular components, but I keep running into an issue as all of my components use ng-lightning, which results in the following error:
/angular-lightning-test/node_modules/ng-lightning/ng-lightning.js:1
({"Object.":function(module,exports,require,__dirname,__filename,global,jest){import
{ NgModule } from '#angular/core';
SyntaxError: Unexpected token import
I've tried multiple ways to get this going through Babel, though I'm not sure that should be required as Jest can handle it for every other file using import in this project.
I'm using jest-preset-angular to handle the setup for these tests. You can see the configuration it uses here.
I've created a very small sample project where you can see this error:
https://github.com/humantree/angular-lightning-test
The component is as simple as this:
#Component({
selector: 'badge',
template: '<ngl-badge>{{text}}</ngl-badge>'
}) export class BadgeComponent {
text = 'Test Badge';
}
and the test is as simple as this (I realize an actual test is missing, but the error still occurs before that would happen):
describe('BadgeComponent', () => {
let badge: BadgeComponent;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [BadgeComponent],
imports: [NglModule.forRoot()]
});
badge = TestBed.get(BadgeComponent).instance;
});
});
Can anyone see anything that I could add to my Jest configuration (or anything else) that would solve this error?
Note: For what it's worth, I also have these tests set up running in Mocha using mocha-webpack, and am having the exact same issue with that setup.
Thanks!
Try the following:
1) install the following packages: babel-jest, babel-preset-env
2) Add a .babelrc file at the your project root.
{ "presets": ["env"]}
3) Edit your jest.config.js file so babel process ng-lightning
{
"preset": "jest-preset-angular",
"transform": {
"^.+\\.(ts|html)$": "<rootDir>/node_modules/jest-preset-angular/preprocessor.js",
"^.+\\.js$": "babel-jest"
},
"transformIgnorePatterns": [
"node_modules/(?!ng-lightning)"
]
}
I have used create-react-app for my project. I am getting an error of
Uncaught SyntaxError: Unexpected token export
The error is in this code
export const ENGLISH = {
lang: 'en',
messages: {
'nav.translatedMessage': 'Social',
}
};
I tried installing babel-preset-es2015 and babel-preset-stage-0. Also i included the babel dict/object in package.json as
"babel": {
"presets": [
"es2015",
"stage-0"
]
},
I am still getting an error.
I got my answer on README.md of create-react-app. There it says
You may create subdirectories inside src. For faster rebuilds, only
files inside src are processed by Webpack. You need to put any
JS and CSS files inside src, or Webpack won’t see them.
I think its because of the comma
export const ENGLISH = {
lang: 'en',
messages: {
'nav.translatedMessage': 'Social'
}
};
Try doing this !
I am using JSDOC and all it supported npm plugins to create nice documentation. Getting hard time when jsdoc is running and parsing JSX file it always throws error as below near = sign
SyntaxError: unknown: Unexpected token
export default class SaveDesign extends Component {
static displayName = 'SaveDesign';
}
conf.json file
{
"source": {
"include": [ "src/app/test.js", "src/app/components/Modals/Template/SaveDesign.jsx"],
"exclude": [ "src/fonts", "src/icons", "src/less", "src/vector-icon" ],
"includePattern": ".+\\.js(doc|x)?$",
"excludePattern": "(^|\\/|\\\\)_"
},
"plugins": ["node_modules/jsdoc-babel"],
"babel": {
"extensions": ["js", "es6", "jsx"],
"presets": ["es2015"]
},
"jsx": {
"extensions": ["js", "jsx"]
}
}
Class properties aren't part of the ES2015 spec, so they're not part of the ES2015 Babel preset either. The proposal to add class properties to the language is currently at Stage 3 of the standardization process, so you need the Stage 3 preset.
https://babeljs.io/docs/plugins/preset-stage-3/
Alternatively, you could just install the class properties plugin on its own:
https://babeljs.io/docs/en/babel-plugin-proposal-class-properties
As stage-2 , stage-3 or any other stage preset are removed in babel 7 or newer so you have to add plugin separately.
Please use "require()" for importing plugin otherwise it wont work.
Here is the .bablerc file -
module.exports = {
plugins: [
[require("#babel/plugin-proposal-class-properties"), { loose: false }]
],
presets: ["#babel/preset-env", "#babel/preset-react"]
};
#Joe thanks yes the plugin which you mentioned will help to solve the problem. In my case the way I solved it was by making sure to have all .babelrc dependency copied to jsdoc babel property as well I was missing this piece which was giving me all the errors.