DESO library NX building get's stuck + Import not found - npm

I want to implement DESO into my app. The most convenient way is probably the DESO library from their developer hub.
I want to be as precise as possible here. So first I downloaded the deso-protocol npm package. In the readme of this library is stated that it is generated with nx. So I downloaded that too. No big issues. And I should: Run nx build deso-protocol to build the library.(in readme). Than I get an error that there is no workspace, when I want to create one with "npx create-nx-workspace deso-protocol --preset=core" , nx gets stuck in that process.
So I decided to do it without the building(I don't quite now if that is needed, am new to npm) and just do it with the classic js imports.
The "import Deso from 'deso-protocol';" from the docs isn't working. Because the module imports have to start with "/" or "./" or sth. similar etc.
So I tried import Deso from './node_modules/deso-protocol/src/index.js';. That's not working. Error:
Uncaught SyntaxError: import not found: default
using import { Deso } from './node_modules/deso-protocol/src/index.js'; doesn't work either because then Deso isn't found. I don't quite now what to do now.
Edit
I use plain JavaScript. deso-protocol uses plain JavaScript too, I hope. There isn't much code yet:
Index.js file:
import Deso from './node_modules/deso-protocol/src/index.js';
test.html file:
<script type="module" src="index.js"></script>
That's it. I use http.server from Python to host the local server.

Just install deso-protocol library from https://www.npmjs.com/package/deso-protocol with npm i deso-protocol
In your app import it as usual
import Deso from "deso-protocol";
And initialize
const deso = new Deso();
Readme file is really confusing, I have no idea what
Run nx build deso-protocol to build the library.
is supposed to mean, it works without that no problem.

Related

SvelteKit breaks npm's import mechanism

I've written several npm library projects, and this is the way I import symbols in one JS file from another JS file, but it won't work in the script section of a svelte file:
My 'package.json' file has a name field (e.g. set to '#jdeighan/something`) and an 'exports' section with entries like "./utils": "./src/lib/utils.js". Then in any other JS file I can import symbols from utils.js with "import {somesymbol} from '#jdeighan/something/utils'. It's how to do imports from a library that you've installed with 'npm install', but it also (cleverly) works inside the project itself. But in a svelte file, this won't work - I get the error message "Failed to resolve import "#jdeighan/something/utils" from "src\routes+page.svelte". Does the file exist?". Here is what I have in my svelte file:
<script>
import {somesymbol} from '#jdeighan/something/utils';
</script>
I know that svelte has a handy $lib alias, but I'd prefer to use the npm standard mechanism, but it seems to be broken when using SvelteKit (not sure about using plain svelte)
I'd prefer to use the npm standard mechanism
This is absolutely not the standard mechanism. I have never seen people import from the current project by package name. While this is supported by Node itself, nothing else seems to support it, including e.g. the VS Code language server which will be unable to provide code navigation.
Using the name makes it less clear that the import is local and not a separate dependency and if the name were to be changed it would have to be adjusted everywhere.
I would recommend just not doing that. SvelteKit has $lib predefined as a default to provide essentially the same functionality in a convention-based way that actually works.
If you create a project with just these 3 files, then execute node foo.js in a console window, you get "Hello, World!":
package.json:
{
"name": "#jdeighan/something",
"type": "module",
"version": "1.0.0",
"exports": {
"./utils": "./utils.js"
}
}
foo.js:
import {message} from '#jdeighan/something/utils'
console.log(message);
utils.js
export let message = 'Hello, World!';

vitetest: Failed to resolve import "$lib/stores/store"

tried running tests with vitest and it can seem to resolve dependencies from $lib/* and $app/* this is the error, Failed to resolve import "$lib/stores/store" from "src/lib/components/Hello.svelte". Does the file exist? here is the link to the playground https://gitlab.com/paulwvnjohi/hello-vitest
It seems Vitest is NOT automatically picking up your Vite config, since it's "hidden" in svelte.config.js and I'm sure there's tons of magic stuff SvelteKit adds, such as the resolve.alias paths for things like the $lib and $app imports to work.
I don't know if Vitest core would do something automatically in the future, but now there's the vitest-svelte-kit package you can use: https://github.com/nickbreaton/vitest-svelte-kit
Install the package:
npm i -D vitest-svelte-kit
Create a file vitest.config.js and put inside the method that magically extracts the correct vite config for you, according to your settings in svelte.config.js:
// vitest.config.js
import { extractFromSvelteConfig } from "vitest-svelte-kit"
export default extractFromSvelteConfig()
Worked for me!

Vuejs - Can't resolve 'moment' in 'app/src' | After a project clone and npm install

I cloned an existant Vuejs project and made a "npm install".
Everything installed well except "moment" and maybe "vue-moment".
i've got this error :
Failed to compile.
./src/main.js
Module not found: Error: Can't resolve 'moment' in '/app/src'
so in installed them with "npm install --save moment vue-moment"
And still got the error.
here some code of my main.js file :
import moment from 'moment'
import VueMoment from 'vue-moment'
// Vue use moment.js
Vue.use(VueMoment, {
moment
});
moment.locale('fr');
the packages are installed and present in the node_modules folder and are present also in the package.log.json and package.json.
The weird things is, when other people clones this project, they don't have the problem. only me...
One (maybe) pist, is when i put my mouse hover the 'moment' (of the import), i see this :
.../node_modules/moment/moment like there is 2 moment folders, but it looks normal in the node_modules folder.
Thanks in advance!
EDIT SOLVED :
The problem was because i started the project with "docker-compose up" and not "npm run serve" on the FRONT. It started but i had this "moment" problem. Now it works well with the good console code to start the project ...
You cannot use the import function with moment.js since exports is not defined for that module. So you have to use require. You can do this :
Vue.use(require('vue-moment'));
If you really want to use moment.js using import you can do this as well.
import * as moment from 'moment';
Reference: https://www.npmjs.com/package/vue-moment
https://momentjs.com/docs/
Webpack / typescript require works but import doesn't

aurelia - error using material-components-web with skelton-esnext project

I've successfully used the material-components-web library from within my aurelia skeleton-esnext-webpack projects but I am strugling to get them working in a skeleton-esnext project.
The problem seems to be with the fact that the skeleton-esnext project uses jspm with system.js as its module loader.
I have added "#material/textfield": "npm:#material/textfield#^0.3.6" to the jspm dependencies section of my package.json which seems to install the correct #material libraries to my jspm_modules/npm/#material.
Now, when I try to access any class from this library from within any my aurelia view models
import {MDCTextfieldFoundation} from '#material/textfield';
I get the following error in the browser when I run the project:
Error: (SystemJS) Unexpected token import
SyntaxError: Unexpected token import
at eval (<anonymous>)
at Object.eval (http://localhost:9000/jspm_packages/npm/#material/textfield#0.3.6.js:1:123)
at eval (....
Any suggestions to whats most likely causing this issue?
SystemJS is importing the raw source file of the plugin instead of the transpiled one (you can see this if you look into jspm_packages/npm/#material/textfield#0.3.6.js.
You can fix it by changing the location in there to point to the dist directory of the directory textfield#0.3.6. However, it gets overriden all the time on potential updates. And it is not saved in CVS.
Another, more simpler approach, would be to import the correct file in your view model:
import {MDCTextfieldFoundation} from '#material/textfield/dist/mdc.textfield';

Errors with importing Select2 into Electron project

I'm using an Electron boilerplate, from here: https://github.com/szwacz/electron-boilerplate/
It's using gulp-rollup to bundle the assets, and a dev server can be run with npm start.
Here are my import statements from app.js:
import os from 'os';
import { remote } from 'electron';
import jetpack from 'fs-jetpack';
import env from './env';
import jquery from 'jquery';
import parsley from 'parsleyjs';
import select2 from 'select2/dist/js/select2.js';
import { setupForm } from './form/form';
Everything works fine on an initial load with npm start, but as soon as I edit a file and save, which triggers the watch to reload the build, I get an error:
Error: Could not load select2/dist/js/select2.js (imported by /##/repo-name-example/src/app.js): ENOENT: no such file or directory, open 'select2/dist/js/select2.js'
at /##/repo-name-example/node_modules/rollup/dist/rollup.js:9428:10
at process._tickDomainCallback (internal/process/next_tick.js:129:7)
If I cancel the process and just npm start again, everything is fine.
Why would it forget where select2 is?
Since you are importing this manually using a file path, rather than a named import like the jquery line, you need to use
import select2 from './select2/dist/js/select2.js';
Note the ./ at the beginning. Otherwise, it effectively looks for a module called select2/dist/js/select2.js, rather than using the path.
You also might need to do change it to
import select2 from './node_modules/select2/dist/js/select2.js';
(Assuming thats where the folder is)