How can I export a class with multiple static methods - node.js

I am trying to export this class in node.js:
export class className {
static method1(param1) {
// do something
}
static method2(param1, param2) {
// do something
}
}
But it's getting me the following errors in terminal:
complete_path.....\node_modules#babel\runtime\helpers\esm\classCallCheck.js:1 [2] (function (exports, require, module, __filename, __dirname) {
export default function _classCallCheck(instance, Constructor) { [2]
^^^^^^ [2] [2] SyntaxError: Unexpected token export [2] at new
Script (vm.js:83:7) [2] at createScript (vm.js:267:10) [2] at
Object.runInThisContext (vm.js:319:10) [2] at Module._compile
(internal/modules/cjs/loader.js:685:28) [2] at
Object.Module._extensions..js (internal/modules/cjs/loader.js:733:10)
[2] at Module.load (internal/modules/cjs/loader.js:620:32) [2]
at tryModuleLoad (internal/modules/cjs/loader.js:560:12) [2] at
Function.Module._load (internal/modules/cjs/loader.js:552:3) [2]
at Module.require (internal/modules/cjs/loader.js:658:17) [2] at
require (internal/modules/cjs/helpers.js:22:18) [2] [nodemon] app
crashed - waiting for file changes before starting...

The export keyword is not supported by Node.js yet. You have to use the exports or module.exports ones.
In your case you should use the module.exports:
module.exports = class className {
static method1(param1) {
// do something
}
static method2(param1, param2) {
// do something
}
}
For more information about the difference between the exports and module.exports I suggest you this post.

Use module.exports and not export
module.exports = class className {
static method1(param1) {
// do something
}
static method2(param1, param2) {
// do something
}
}

Related

trouble with modules in repl

i am having a hell of time trying to set up a custom repl app. I did a bunch of googling and managed to wrange the code below and got a working repl shell.
script.js
const repl = require("repl")
function evaluate(command, context, filename, callback) {
callback(null, command)
}
repl.start({
prompt: ": ",
eval: evaluate
});
so after getting this prototype working i decided to add a module to split the routing of the command processing. I made a tracker.js module and required it in my script.js
tracker.js
export default class Tracker {
static Process(command) {
console.log(command)
}
}
script.js added the require statement.
const repl = require("repl")
const Tracker = require("./tracker")
function evaluate(command, context, filename, callback) {
callback(null, command)
}
repl.start({
prompt: ": ",
eval: evaluate
});
after i reran this i got an error saying,
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153: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> (C:\Users\e212034\repository\repl\script.js:2:17)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
PS C:\Users\e212034\repository\repl>
so i went back to google and found some tips saying to add type:module to the package.json. so i did this and reran and now i get this error,
ReferenceError: require is not defined in ES module scope, you can use import instead
This file is being treated as an ES module because it has a '.js' file extension and 'C:\Users\e212034\repository\repl\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///C:/Users/e212034/repository/repl/script.js:1:14
at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
at async loadESM (node:internal/process/esm_loader:88:5)
at async handleMainPromise (node:internal/modules/run_main:65:12)
PS C:\Users\e212034\repository\repl>
i tried changing the module to .mjs no luck. i tried changing the type to commonjs and the module to .cjs no luck on either.
any ideas on how to resolve this issue?

NextJS - Unexpected Token Import

While integrating react-syntax-highlighter into my next-js project I've used the following code:
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
...
<SyntaxHighlighter language="jsx" style={okaidia}>
{some code goes here}
</SyntaxHighlighter>
...
I get the following error upon running npm run dev, but only if I run the page directly.
Unexpected token export
/Users/johndetlefs/repos/tal-gel-framework/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js:1
(function (exports, require, module, __filename, __dirname) { export { default as coy } from './coy';
^^^^^^
SyntaxError: Unexpected token export
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Module._compile (module.js:617:28)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object.react-syntax-highlighter/dist/esm/styles/prism (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:7242:18)
at __webpack_require__ (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:23:31)
at Module../pages/components.js (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:6839:104)
at __webpack_require__ (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:23:31)
at Object.3 (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:7175:18)
at __webpack_require__ (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:23:31)
at module.exports../js/config/libs/_theme-foundation--colors.js.config.themes.list.name (/Users/johndetlefs/repos/tal-gel-framework/.next/server/static/development/pages/components.js:91:18)
If I navigate to the page via another page then everything works great. If I then refresh the page I get the error.
Removing the line
import { okaidia } from "react-syntax-highlighter/dist/esm/styles/prism";
and removing the style attribute from the component fixes everything, but uses the default prism style, which is not the desired outcome.
Looking around I can see people have similar issues, and that the fix probably has something to do with the next.js.config file, and how the css file is being loaded server-side, but I'm not 100% what to do there.
Assuming the next.js.config file is a part of the solution, here are the current contents.
const withSass = require("#zeit/next-sass");
const withCSS = require("#zeit/next-css");
module.exports = withCSS(
withSass({
webpack(config) {
config.module.rules.push({
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
use: {
loader: "url-loader",
options: {
limit: 100000
}
}
});
config.module.rules.push({
test: /\.svg$/,
use: ["#svgr/webpack"]
});
return config;
}
})
);
I've tried both with & without withCSS and the issue stays the same.
Any help would be much appreciated! 👍
After digging around for a while, I checked out the npm packages directory and found that there are two types of dists: cjs & esm. The simple fix is just using the cjs dist instead of the esm dist.
import { darcula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
Hope this helps :)

Extend SchemaDirectiveVisitor To Use Apollo Server Schema Directives in NodeJS

I'm trying to extend SchemaDirectiveVisitor in order to make a custom directive in Apollo Server 2. I'm specifically using the 2.2.6 hapi node module.
Here's my server.js code:
const { ApolloServer } = require('apollo-server-hapi');
const { SchemaDirectiveVisitor } = ApolloServer;
class ViewTemplateGroup extends SchemaDirectiveVisitor {
visitFieldDefinition(field) {
console.log('Im calling this directive!');
return;
}
}
When I start up my server I immediately get the following error:
TypeError: Class extends value undefined is not a constructor or null
at Object.<anonymous> (/Users/garrett.kim/Desktop/Projects/Test Web/poc-graphQL-forms-gyk/server.js:36:33)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Function.Module.runMain (module.js:701:10)
at startup (bootstrap_node.js:193:16)
at bootstrap_node.js:617:3
To my knowledge, I'm following the Apollo Server 2 example very closely.
https://www.apollographql.com/docs/apollo-server/features/creating-directives.html
Any help getting directives working would be appreciated.
The ApolloServer class does not have a SchemaDirectiveVisitor property on it; therefore, calling ApolloServer.SchemaDirectiveVisitor results in undefined and a class cannot extend undefined as the error indicates. Just import SchemaDirectiveVisitor directly from the apollo-server-hapi module:
const { ApolloServer, SchemaDirectiveVisitor } = require('apollo-server-hapi')

Vuex without Vue?

I'd like to use Vuex to power a server-side application that doesn't use Vue. Is this possible?
const Vuex = require('vuex');
const store = new Vuex.Store({
state: {
potatoes: 1,
},
getters: {
doublePotatoes(state) {
return state.potatoes * 2;
},
},
mutations: {
addPotato(state) {
state.potatoes += 1;
},
}
});
store.watch((state, getters) => getters.doublePotatoes, console.log);
store.commit("addPotato");
Here's the error I get:
$ node index.js
/private/tmp/vtest/node_modules/vuex/dist/vuex.common.js:99
if (!condition) { throw new Error(("[vuex] " + msg)) }
^
Error: [vuex] must call Vue.use(Vuex) before creating a store instance.
at assert (/private/tmp/vtest/node_modules/vuex/dist/vuex.common.js:99:27)
at new Store (/private/tmp/vtest/node_modules/vuex/dist/vuex.common.js:279:5)
at Object.<anonymous> (/private/tmp/vtest/index.js:3:15)
at Module._compile (module.js:573:30)
at Object.Module._extensions..js (module.js:584:10)
at Module.load (module.js:507:32)
at tryModuleLoad (module.js:470:12)
at Function.Module._load (module.js:462:3)
at Function.Module.runMain (module.js:609:10)
at startup (bootstrap_node.js:158:16)
I wound up adding Vue without creating a Vue app:
const Vue = require('vue');
Vue.use(Vuex);
My tiny test store works now. I don't know if Vue.use(Vuex) without creating a Vue app will cause any problems.
Of note for server-side use cases, Vuex doesn't call my watcher for every commit; it batches changes and calls the watcher once. I don't see this documented.

proper way of using es6 classes in a nodejs project

I'd like to be able to use the cool es6 classes feature of nodejs 4.1.2
I created the following project:
a.js:
class a {
constructor(test) {
a.test=test;
}
}
index.js:
require('./a.js');
var b = new a(5);
as you can see I create a simple class that it's constructor gets a parameter. and in my include i require that class and create a new object based on that class. pretty simple.. but still i'm getting the following error:
SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:413:25)
at Object.Module._extensions..js (module.js:452:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object.<anonymous> (/Users/ufk/work-projects/bingo/server/bingo-tiny/index.js:1:63)
at Module._compile (module.js:434:26)
at Object.Module._extensions..js (module.js:452:10)
any ideas why ?
Or you can run like this:
node --use_strict index.js
i'm still confused about why 'use strict' is needed, but this is the code that works:
index.js:
"use strict";
var a = require('./a.js');
var b = new a(5);
a.js:
"use strict";
class a {
constructor(test) {
a.test=test;
}
}
module.exports=a;

Resources