#apollo/client using svelte "Named export 'remove' not found." - node.js

Like this problem, same error is occurring while using svelte kit.
here is the error:
import { remove } from "ts-invariant/process/index.js";
^^^^^^
SyntaxError: Named export 'remove' not found. The requested module 'ts-invariant/process/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'ts-invariant/process/index.js';
const { remove } = pkg;
I'm using the current version(^3.5.10) of #apollo/client, and using the beta version(^3.6.0-beta.6) gets other error; while using import { ApolloClient, InMemoryCache, gql } from '#apollo/client/core/index.js', it gets:
Directory import '/node_modules/#apollo/client/core' is not supported resolving ES modules imported from /node_modules/svelte-apollo/dist/svelte-apollo.js
or if I use import { ApolloClient, InMemoryCache, gql } from '#apollo/client/core', it gets:
Directory import 'node_modules/#apollo/client/core' is not supported resolving ES modules imported from node_modules/svelte-apollo/dist/svelte-apollo.js
Did you mean to import #apollo/client/core/core.cjs?
or if I use import { ApolloClient, InMemoryCache, gql } from '#apollo/client/core/core.cjs' it just says
exports is not defined

Related

Nestjs: import modules undefined, but methods and functions from modules can be imported

I am using Nestjs with WebStorm & TS 4.2.3^latest.
The problem that I am facing is a bit strange. For example, some modules, like axios can be installed, imported, and used as usual. But some modules, especially Nodejs Core, like fs or path, can't be imported as modules. BUT their methods can be imported and used just fine!
//ERROR: Module undefined on run:dev, but no error in IDE
import path from 'path';
import fs from 'fs';
//Working fine
import { join } from 'path';
import { readFileSync } from 'path';
I am sure, they have correct TS types, even installed manually. For example:
import axios from 'axios';
import path from 'path'; //path is undefined
import { join } from 'path'; // working fine
import { Injectable } from '#nestjs/common';
#Injectable()
export class AppService {
async test(input: string): Promise<void> {
await axios.get() // working fine
await path.join() // Cannot read property 'join' of undefined
//BUT await join() // Works fine!
}
}
I have only one tsconfig.json which is generated by Nest Cli. I am starting my apps via npm start:dev -name and IDE don't show any errors in code, until I ran code.
tsconfig.json module part, just to be sure: "module": "commonjs", package.json doesn't have module part at all.
IDE in this case, misdirect me a bit. Almost forgot, that I am dealing with TS now. Some modules seem to have no default exports, so:
You should import as with them: import * as fs from 'fs';
Or, another option is enabling: "esModuleInterop": true, in your tsconfig.json

Import Inquirer as module in Node 13

I'm having troubles with import of Inquirer using modules in Node 13.12.0. Any other import works well. As long as I've been using Node 12.x with require() it worked well.
My use-case of anything.mjs
import fs from "fs"; // works well
import inquirer from 'inquirer'; // undefined
So I've tried to import only one exported module
import {prompt} from 'inquirer'; // The requested module 'inquirer' does not provide an export named 'prompt'
also tried:
import * as inquirer from 'inquirer'; // [Module] { default: undefined }
I've also tried to require() but it is not defined in modules anymore.
How should I properly import Inquirer in Node 13.12.0 using modules?
According to the docs, you can use require in ESM in Node 13 as follows:
import { createRequire } from 'module';
const require = createRequire(import.meta.url);
const inquirer = require('inquirer');
inquirer just released v9.0 and migrated to ESM modules.
So now this will simply work:
import inquirer from 'inquirer';
const response = await inquirer.prompt([
{
type: 'input',
name: 'question',
message: 'Want to answer?'
}
]);
console.log(response.question);
Using ES Modules and enquirer 2.3.6 I am using it this way. We could pass types to prompt object.
import enquirer from 'enquirer';
const enquirerObj = new enquirer();
const response = await enquirerObj.prompt({
type:'confirm',
name: 'question',
message: 'Want to answer?'
});
console.log(response);

export/import javascript class like module node into electron with webpack

In context of basic electon-vue app, I want to create my own javascript class and use it into main process or renderer or into vue component.
I created JS Class but I never find a good way for exporting my class.
All possibility of writing import/export module find in the web finished by same error : Undefined exports
"use strict"
import fs from 'fs'
import typeorm from 'typeorm'
import Public from './../entity/Public'
class ConnectionManager
{
constructor(){}
getConnection(type, name, options) {
}
}
module.exports = ConnectionManager
But it seeams that others js file work perfectly like the vue-router js for routing into vue.js app :
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: require('#/components/Home').default
}
]
})
I package my code with Webpack and libraryTarget Output is : commonjs2
I seems that use babel-loader with webpack
node version : 10.13.0
electron : 3.0.10
Babel : 6
EDIT :
I try this syntax class js file :
"use strict"
import * as fs from 'fs'
import * as typeorm from 'typeorm'
import {Public} from './../entity/Public'
export default class ConnectionManager
{
constructor(){}
getConnection(type, name, options) {
}
}
with this import syntax :
import ConnectionManager from './../service/connectionManager'
But I have this error when I execute code into electron :
Uncaught TypeError:
_service_connectionManager__WEBPACK_IMPORTED_MODULE_8__.default.getConnection
is not a function
I console logged this service class "ConnectionManager" and I have this result (so it really exist) :
ƒ ConnectionManager() {
babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, ConnectionManager);
}
It seems that the final js module webpack contain the ConnectionManager class
It seems that you mix commonjs modules with ES modules by the wrong way.
There are a lot of modules (include node built-in) which have no default export. To import such a module you need to use * as moduleAlias or { exportedField } in your import statement. Try to rewrite your code by this way:
import * as fs from 'fs'
import * as typeorm from 'typeorm'
import { Public } from '../entity/Public'
export default class ConnectionManager
{
constructor(){}
getConnection(type, name, options) {
}
}
Because this class is exported as a default value, you can use the following construction to import it as a default field, where ConnectionManager is an alias for the current scope:
import ConnectionManager from '../service/connectionManager'

cant import createBatchingNetworkInterface from apollo-client

I am trying to integrate graphql with my vue project.
I am following these instructions: https://github.com/Akryum/vue-apollo
I have npm installed 'apollo-client' as required, but for some reason i can't import 'createBatchingNetworkInterface'.
this is my main.js file:
import Vue from 'vue'
import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
import VueApollo from 'vue-apollo'
import App from './App'
import router from './router'
and this is the index.d.ts file of my apollo-client:
export { print as printAST } from 'graphql/language/printer';
export { ObservableQuery, FetchMoreOptions, UpdateQueryOptions, ApolloCurrentResult } from './core/ObservableQuery';
export { WatchQueryOptions, MutationOptions, SubscriptionOptions, FetchPolicy, FetchMoreQueryOptions, SubscribeToMoreOptions, MutationUpdaterFn } from './core/watchQueryOptions';
export { NetworkStatus } from './core/networkStatus';
export * from './core/types';
export { ApolloError } from './errors/ApolloError';
import ApolloClient, { ApolloClientOptions } from './ApolloClient';
export { ApolloClientOptions };
export { ApolloClient };
export default ApolloClient;
I don't see here the 'createBatchingNetworkInterface' desired object.
I don't know what am i doing wrong here.
It sounds like you're using Apollo Client 2.0.You should downgrade to an older version (1.9.3) to continue using network interfaces, including the batching one.
The newest version of the client uses Links instead. You can check out the upgrade guide here if you are interested. you can still batch requests in 2.0 using apollo-link-batch-http.

How to export and use multiple custom modules in the same library with React Native

So I have a React Native custom library that I made that has 2 modules made, moduleA and moduleB. How do I export them so that I can call both of the modules in my project?
Before when I had only one module it would work perfectly like this:
//Index.js file of my library
import { NativeModules } from 'react-native';
const { moduleA } = NativeModules;
export default moduleA;
and then in my React native project I could call it like this
//Home.js file of my project
import moduleA from 'custom_library';
moduleA.method(); //Works fine
But now that I have two modules, I'm not sure how to change the modules and the import such that both can be used. Is it even possible? The end goal that I want to be able to do is
//Home.js file of my project
import { moduleA, moduleB } from 'custom_library';
moduleA.method();
moduleB.method();
Sorry for the basic question, but I'm getting frustrated that nothing I've tried is really working.
Just use the export keyword. You will find more detailed examples here.
index.js of custom_library
import { NativeModules } from 'react-native';
const { moduleA, moduleB } = NativeModules;
export { moduleA, moduleB };
home.js
import { moduleA, moduleB } from 'custom_library';
moduleA.method();
moduleB.method();

Resources