I'm running a SvelteKit application with the Animate on Scroll (aos) module. This worked like a charm but due to the nature of my project, I needed to modify a few lines in the module, so I pulled the project from GitHub, modified it, rebuilt it and imported it via a local dependency:
"dependencies": {
"aos": "file:/path/to/aos"
}
Whenever I try to import the module now however: import AOS from 'aos';, I get this error message:
Uncaught (in promise) SyntaxError: The requested module '/#fs/C:/path/to/aos/dist/aos.js' does not provide an export named 'default'
Note that this also happens when I pull the repository and try to import it locally without changing it. Why does this happen and how can I fix it?
Related
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.
I'm trying to use tipsi-twitter in snack.expo.io but I'm running into issues. I added the following item into package.json dependencies:
"tipsi-twitter": "*"
Expo then appeared to successfully install this package. In my App.js I included the following import:
import TwitterAuth from 'tipsi-twitter';
The import compiles successfully but when I put the following code after the imports:
TwitterAuth.init({
twitter_key: '<TWITTER_KEY>',
twitter_secret: '<TWITTER_SECRET>',
})
This returns an error of:
"Cannot read property 'init' of undefined"
But this appears to be the exact implementation in the Usage section of the tipsi-twitter github page:
https://github.com/tipsi/tipsi-twitter#usage
Any idea what the issue might be or how to debug? Am I possibly missing some type of configuration step or is it possible that expo.io doesn't support this package/scenario?
Trying to use #angular/flex-layout in an existing npm-enabled Ionic 3 project.
Adding "FlexLayoutModule" to my main module's imports won't allow the app to start, saying that: cannot find module "rxjs/operators" is the cause.
Already cleared node_module, npm install, reinstalled Ionic CLI. Nothing helps. Could it be a version conflict? Moreover, I'm already using Observables in this project. I don't get it. And the import of "FlexLayoutModule" is in cause of this issue (disabling the import removes the issue).
Anyone could be successful at using flex-layout with ionic? I've seen this plunk, but it uses system.js, so not 100% reproducing my goal.
http://plnkr.co/edit/y8R0MF?p=info
Edit: a more verbose issue:
Uncaught (in promise): Error: Cannot find module "rxjs/operators"
Error: Cannot find module "rxjs/operators" at Object.580
(http://localhost:8100/build/22.main.js:319:7) at webpack_require
(http://localhost:8100/build/main.js:48:30) at Object.1021
(http://localhost:8100/build/22.main.js:11:79) at webpack_require
(http://localhost:8100/build/main.js:48:30) at
http://localhost:8100/build/main.js:122015:10 at t.invoke
(http://localhost:8100/build/polyfills.js:3:9283) at Object.onInvoke
(http://localhost:8100/build/main.js:4650:37) at t.invoke
(http://localhost:8100/build/polyfills.js:3:9223) at r.run
(http://localhost:8100/build/polyfills.js:3:4452) at
http://localhost:8100/build/polyfills.js:3:14076
I'm getting a similar error with Angular CLI. Everything is OK until I include FlexLayoutModule in the app's NgModule imports. Then I get the error:
Module not found: Error: Can't resolve 'rxjs/operators' in 'D:\dev\Vms.Signup.Client\node_modules\#angular\flex-layout\esm5'
I updated to the latest rxjs and that seems to have fixed it.
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';
After bundling a simple aurelia application with jspm bundle-sfx I get the following error:
No PLATFORM.Loader is defined and there is neither a System API (ES6) or a Require API (AMD) globally available to load your app.
An example application: https://github.com/Baudin999/jspm-bundling-test
You can use: npm run setup:dev in a non windows env to switch back to the dev settings (which is just a comment/uncomment in the ./src/client/index.html) and you can use npm run setup:prod to switch back to the production environment, bundling will automatically be triggered. all other scripts can be found in the package.json.
I can't link to other questions because I haven't found any questions which relate to this problem. I "think" (which means absolutely nothing) that this might be related to the fact that aurelia needs a full loader even when bundling with bundle-sfx but I haven't found any ways to solve the error.
EDIT (25/01/2017 17:16): I've found out that the error is because I import the aurelia-bootstrapper.
As soon as I add: import * as bootstrapper from 'aurelia-bootstrapper'; I get the error
Please add the code how do you bootstrap your aurelia app.
There is nothing actually to import from bootstrapper apart from bootstrap function.
Which you would use in case of custom manual bootstrapping.
like in
import { bootstrap } from 'aurelia-bootstrapper'
const configure: (au: Aurelia) => {} = async function (au: Aurelia) {
au.use
.standardConfiguration();
await au.start()
au.setRoot() // or au.enchance()
})
bootstrap(configure)
in a happy path scenario with jspm - you System.import('aurelia-bootstrapper')
and it takes over finding the root node of your app and the script to configure Aurelia (main by default)
Have a look at Bootstrapping Aurelia in the docs
Oh.. and bundle-sfx is not supported there are other means to bundle aurelia apps using jspm