I tried to use express-react-views as an express view engine, but it only compile React code in JSX without ES6. How can i switch to ES6 please.
This is the code im using for Error page:
import React, { Component } from "react";
class Error extends Component {
render() {
return <p>{this.props.error}</p>;
}
}
export default Error;
This is the error im having:
SyntaxError: /Users/mac/Documents/ReactJS-dev/test/views/error.jsx: Unexpected token (4:8)
[0m [90m 2 | [39m
[90m 3 | [39m[36mclass[39m [33mError[39m [36mextends[39m [33mComponent[39m {
[31m[1m>[22m[39m[90m 4 | [39m state [33m=[39m {}[33m;[39m
[90m | [39m [31m[1m^[22m[39m
[90m 5 | [39m render() {
[90m 6 | [39m [36mreturn[39m [33m<[39m[33mp[39m[33m>[39m{[36mthis[39m[33m.[39mprops[33m.[39merror}[33m<[39m[33m/[39m[33mp[39m[33m>[39m[33m;[39m
[90m 7 | [39m }[0m
at Parser.pp$5.raise (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:4454:13)
at Parser.pp.unexpected (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:1761:8)
at Parser.pp$1.parseClassProperty (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:2571:50)
at Parser.parseClassProperty (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:6157:20)
at Parser.pp$1.parseClassBody (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:2516:34)
at Parser.pp$1.parseClass (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:2406:8)
at Parser.pp$1.parseStatement (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:1843:19)
at Parser.parseStatement (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:5910:22)
at Parser.pp$1.parseBlockBody (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:2268:21)
at Parser.pp$1.parseTopLevel (/Users/mac/Documents/ReactJS-dev/test/node_modules/babylon/lib/index.js:1778:8)
Related
I have an issue where I am trying to import an object from a types package in my project, built with yarn work spaces and Turbo-repo. But I am unable to because I get this error.
import {Injectable} from "#nestjs/common"
import {SAMPLE_SONG_INFO, Song} from "types"
#Injectable()
export class CurrentSongService {
private currentSong: Song = SAMPLE_SONG_INFO
get() {
return this.currentSong
}
set(song: Song) {
this.currentSong = song
}
}
I import it with "types": "*", in package.json. I have no project references setup in tsconfig.json
A brief overview of types file:
const SAMPLE_SONG_INFO: Song = {
name: "While My Guitar Gently Weeps",
album: "The Beatles",
artist: "The Beatles",
imageUrl: "sample-album-cover.jpeg"
}
interface Song {
name: string
album: string
artist: string
imageUrl: string
}
export type {Song}
export {SAMPLE_SONG_INFO}
When I run the application the error I get is:
const SAMPLE_SONG_INFO: Song = {
^^^^^^^^^^^^^^^^
SyntaxError: Missing initializer in const declaration
at compileFunction (<anonymous>)
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/media/joshua/379a09fe-3da5-4787-9a8c-cb522be8375d/code/personal/music-circle/apps/api/src/websockets/current-song/current-song.service.ts:2:1)
I run the program with NestJS run dev.
In NextJS I fixed this with next-transpile-modules.
Any help would be appreciated.
Thanks.
I am stuck with an issue,
I have to generate a 6 digit alphanumeric CODE which should be unique and for that i am using nanoid,
Now when i code this:
const {nanoid} = require("nanoid");
const ID = nanoid();
I got error:
const {nanoid} = require("nanoid");
^
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Users\HP\Desktop\test\node_modules\nanoid\index.js from C:\Users\HP\Desktop\test\server.js not supported.
Instead change the require of index.js in C:\Users\HP\Desktop\test\server.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> (C:\Users\HP\Desktop\test\server.js:1:18) {
code: ←[32m'ERR_REQUIRE_ESM'←[39m
}
if I code this:
import { nanoid } from 'nanoid'
const id = nanoid() //=> "V1StGXR8_Z5jdHi6B-myT"
i got error:
(node:4636) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
C:\Users\HP\Desktop\test\server.js:4
import { nanoid } from 'nanoid'
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1033:15)
at Module._compile (node:internal/modules/cjs/loader:1069:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:77:12)
at node:internal/main/run_main_module:17:47
Now I have tried changing package.json file
"type":"module"
but my project use babel and it will automatically convert import to require and as result first error come again.
could you please tell me how to do nanoid with require'
Thank you
This is a feature, not a bug. See the changelog for details of the breaking change in version 4.0
https://github.com/ai/nanoid/issues/365
I am trying to annotate my variables with types but when running the code it simply gives off an error:
let foo: number = 23;
console.log( foo );
// let foo: number = 23;
^
// SyntaxError: Unexpected token ':'
// [90m at Object.compileFunction (node:vm:352:18)[39m
// [90m at wrapSafe (node:internal/modules/cjs/loader:1031:15)[39m
// [90m at Module._compile (node:internal/modules/cjs/loader:1065:27)[39m
// [90m at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)[39m
// [90m at Module.load (node:internal/modules/cjs/loader:981:32)[39m
// [90m at Function.Module._load (node:internal/modules/cjs/loader:822:12)[39m
// [90m at Function.executeUserEntryPoint [as runMain] // (node:internal/modules/run_main:79:12)[39m
// [90m at node:internal/main/run_main_module:17:47[39m
You have two options:
First compile it to plain JS with tsc myfile.ts and run the JS file with node myfile.js.
Or npm install ts-node which lets you run TS files like you would run JS files: ts-node myfile.ts
I use Nuxt, and sometimes, when I want to use some npm packages, I have this error:
SyntaxError
Unexpected token '<'
The stack:
vm.js:102:7
new Script
internal/modules/cjs/loader.js:1114:10
Module._extensions..js
internal/modules/cjs/loader.js:950:32
Module.load
internal/modules/cjs/loader.js:790:14
Module._load
internal/modules/cjs/loader.js:974:19
Module.require
webpack:/external "vue-typeahead-bootstrap":1:
Object.vue-typeahead-bootstrap
webpack/bootstrap:25:
__webpack_require__
pages/account/tabs/addresses.js:693:81
Module../node_modules/babel-loader/lib/index.js?!./node_modules/vue-loader/lib/index.js?!./components/address/form/country.vue?vue&type=script&lang=js&
webpack/bootstrap:25:
I have this error for example on this package: vue-typeahead-bootstrap
If I import the package:
import VueTypeaheadBootstrap from ['vue-typeahead-bootstrap'](https://github.com/mattzollinhofer/vue-typeahead-bootstrap)
export default {
components: { VueTypeaheadBootstrap },
}
It throws the error.
Is it because the package is not supported or something ?
You may try to transpile it. https://nuxtjs.org/docs/2.x/configuration-glossary/configuration-build#transpile
Add the package name like this
{
build: {
transpile: [
({ isServer }) => 'vue-typeahead-bootstrap'
]
}
}
As answered here: https://github.com/mattzollinhofer/vue-typeahead-bootstrap/issues/19#issuecomment-645510809
This question already has answers here:
Node.js - SyntaxError: Unexpected token import
(16 answers)
Closed 3 years ago.
I'm experimenting with ECMAScript modules in Node.js 12 but I'm struggling with. Following the official docs just by adding the top-level field "type" with a value of "module" it should be enough to keep using the extension .js in this Node.js version but I can not find why is not working as expected. Am I missing something?
$ node --version
v12.14.1
$ cat package.json
{
"type": "module",
"scripts": {
"start": "node test.js"
}
}
$ npm start
> app# start /usr/src/app
> node test.js
/usr/src/app/test.js:1
import { myFunction } from './module.js';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11
$ cat test.js
import { myFunction } from './module.js';
myFunction();
$ cat module.js
function myFunction() {
console.log('hello from module');
}
export { myFunction };
https://nodejs.org/docs/latest-v12.x/api/esm.html#esm_code_import_code_statements
Version 12 docs for that import statement show that you can only import the default export via import ... from ...
So import myFunction from './module.js'; would work if you exported myFunction as export default myFunction;