how do i import mapbox in my backend?
I installed mapbox (npm install #mapbox/mapbox-sdk) then imported (import mbxGeocoding from "#mapbox/mapbox-sdk/services/geocoding";)
const mapBoxToken = process.env.MAPBOX_TOKEN;
const geocoder = mbxGeocoding({ accessToken: mapBoxToken });
Problems in vscode is showing Mapboc is an unknown word..
I was not expecting any error because i was watching colt steele video on mapbox and i followed through.
This is what my backend terminal is showing
can't find /server/node_modules/#mapbox/mapbox-sdk/services/geocoding' #mapbox/mapbox-sdk/services/geocoding.js?
Related
I initiated a basic ReactJS app using npx create-react-app, then I ejected using npm run eject. Now when I am trying to import the Casual library by import casual from 'casual';, I get the following error:
Compiled with problems:
ERROR in ./node_modules/casual/src/casual.js 3:13-37
Module not found: Error: Can't resolve 'fs'
in '/home/me/project/node_modules/casual/src'
And the code around line number 3 in casual.js looks like this:
var helpers = require('./helpers');
var exists = require('fs').existsSync;
var safe_require = function(filename) {
if (exists(filename + '.js')) {
return require(filename);
}
return {};
};
...
I found answers to similar questions. Those were mainly Node or Angular related. I also tried answers suggesting some changes in webpack config, but no luck.
The reason is Casual doesn't work on the front end. It runs on Node.js only.
You need to install maybe a new package to make things work.
Fs is unavailable on the browser so it won't work. Instead, you should use casual-browserify, it will work on browsers.
I need to use nodejs library in my angular project but got example code in nodejs. I have installed library through npm command and import to my component. But it always show undefined.
npm install phenix-edge-auth --save
const TokenBuilder = require('phenix-edge-auth');
// Create a token to access a channel
const token = new TokenBuilder()
.withApplicationId('my-application-id')
.withSecret('my-secret')
.expiresInSeconds(3600)
.forChannel('us-northeast#my-application-id#my-channel.1345')
.build();
How to use this code with angular app?
Import it as angular way..
import * as TokenBuilder from 'phenix-edge-auth'
In my node.js (express.js) project, I try to wrap axios to create a HttpClient like this:
import axios from 'axios';
const httpClient = axios.create({ baseURL: 'http://locahost:3003' });
...
export const httpClient = {
...
};
When I run it, I get error SyntaxError: Cannot use import statement outside a module which complains the line import axios from 'axios'. How can I get rid of this error? (I come from React-native world, I used the same thing in React-Native, it is fine)
The issue is by default express uses CJS format of importing as you might have seen const axios = require("axios").
What you are trying to do is an ESM format of import which is not understood by the JS as natively. To work import statements you can either add the following property to your package.json file - "type": "module" or you can use ".mjs" extension instead of default ".js" extension.
Hope this link helps further.
When I try using workers (aka multithreading) in my Angular - NativeScript app the compiled worker file is not found during app execution. I've found a similar issue on GitHub, but the instructions there did not help me.
Running the app results in the following output:
Project successfully built.
Installing on device 4865d3ab...
Successfully installed on device with identifier '4865d3ab'.
Refreshing application on device 4865d3ab...
Successfully synced application org.nativescript.app on device 4865d3ab.
JS: Angular is running in the development mode. Call enableProdMode() to enable the production mode.
JS: Warning: Setting the 'itemWidth' property of 'ListViewGridLayout' is not supported by the Android platform.
JS: Warning: Setting the 'itemHeight' property of 'ListViewGridLayout' is not supported by the Android platform.
JS: Warning: Setting the 'itemHeight' property of 'ListViewGridLayout' is not supported by the Android platform.
JS: Scan!
JS: Subnet: 192.168.2
JS: Permission is not granted (Error: com.tns.NativeScriptException: Failed to find module: "307b720bbe3cb7a8458a.worker.js", relative to: app/tns_modules/
JS: com.tns.Module.resolvePathHelper(Module.java:146)
JS: com.tns.Module.resolvePath(Module.java:55)
JS: com.tns.Runtime.callJSMethodNative(Native Method)
JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1160)
JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:1040)
JS: com.tns.Runtime.callJSMethod(Runtime.java:1027)
JS: com.tns.Runtime.callJSMethod(Runtime.java:1007)
JS: com.tns.Runtime.callJSMethod(Runtime.java:999)
JS: com.tns.NativeScriptActivity.onRequestPermissionsResult(NativeScriptActivity.java:58)
JS: android.app.Activity.dispatchRequestPermissionsResult(Activity.java:7630)
JS: android.app.Activity.dispatchActivityResult(Activity.java:7480)
JS: android.app.ActivityThread.deliverResults(ActivityThread.java:4489)
JS: android.app.ActivityThread.handleSendResult(ActivityThread.java:4538)
JS: android.app.servertransaction.ActivityResultItem.execu...
How can I solve this problem?
Many thanks for your help.
EDIT
I am importing the worker with:
import TestWorker from 'worker-loader!./workers/test.worker.js'
The worker itself has the file name test.worker.ts and the following content:
const context: Worker = self as any;
context.onmessage = msg => {
setTimeout(() => {
console.log('Inside TS worker...');
console.log(msg);
(<any>global).postMessage('TS Worker');
}, 500);
};
What am I doing wrong here? Many thanks for the help. Very nice of you.
If you are using the nativescript-worker-loader plugin as Manoj suggested, you will need to import the worker with
import TestWorker from 'nativescript-worker-loader!./workers/test.worker.js'
not with
import TestWorker from 'worker-loader!./workers/test.worker.js'
You can also use
import TestWorker from 'nativescript-worker-loader!./workers/test.worker'
that should not make any difference.
Also make sure that you declare the module of the typings/custom.d.ts file as described in the nativescript-worker-loader readme as nativescript-worker-loader!*
I'm trying to use Markdown-it in Ember Helper. First I installed it with Bower and tried to import it.
app.import('bower_components/markdown-it/dist/markdown-it.js');
In helper:
import MarkdownIt from "markdown-it";
This is showing error Could not find module: markdown-it. Then I tried to use Ember-browserify and install Markdown-it via npm. I tried to import it in helper
import MarkdownIt from "npm:markdown-it";
export default Ember.Handlebars.makeBoundHelper(function(input){
var result = MarkdownIt.render(input);
return new Ember.Handlebars.SafeString(result);
});
This is showing error TypeError: a.default.render is not a function.
I also tried
import MarkdownIt from "npm:markdown-it";
export default Ember.Handlebars.makeBoundHelper(function(input){
var md = new MarkdownIt();
var result = md.render(input);
return new Ember.Handlebars.SafeString(result);
});
This is showing Error: Could not find module npm:markdown-it imported from my-new-app/helpers/format-markdown
The library you're trying to use doesn't provide a name for itself when using AMD, so there's no way to import it via a name. See https://github.com/ember-cli/ember-cli/issues/770 for more information about this.
It does look like "markdown-it" also exposes itself as a global, so you can always access it that way: