Develop Reference

Importing a JS npm library in Svelte

I don't understand how to import a random npm library in Svelte.
Take the scrapegoat library for example, a library to read CalDAV objects. I created a brand new Svelte project:
$ npx degit sveltejs/template my-svelte-project
$ cd my-svelte-project/
$ npm install
$ npm install -D scrapegoat
Not sure if it should be added to the devDependencies but it doesn't seem to make a lot of difference if it is not. Now, in the src/App.svelte I add this singe line in the existing <script> tag.
import scrapegoat from 'scrapegoat'
Running npm run dev throws the following error:
[!] Error: Unexpected token (Note that you need #rollup/plugin-json to import JSON files)
node_modules/scrapegoat/package.json (2:9)
1: {
2: "_from": "scrapegoat#^2.0.0",
^
3: "_id": "scrapegoat#2.0.0",
4: "_inBundle": false,
Error: Unexpected token (Note that you need #rollup/plugin-json to import JSON files)
at error (node_modules/rollup/dist/shared/rollup.js:158:30)
at Module.error (node_modules/rollup/dist/shared/rollup.js:12420:16)
at Module.tryParse (node_modules/rollup/dist/shared/rollup.js:12823:25)
at Module.setSource (node_modules/rollup/dist/shared/rollup.js:12726:24)
at ModuleLoader.addModuleSource (node_modules/rollup/dist/shared/rollup.js:22197:20)
This is what I understood from Rich Harris' reply but I am clearly missing something.

The package you’re importing imports its own package.json. Rollup won’t handle JSON imports by default, so you will need to install the json plugin and add it to your Rollup config.

Mobx(4.0.1) and mobx-state-tree(1.3.1) not compatible

OS - Windows 10 x64
NodeJs v8.9.3
npm 5.7.1
repository for sample code - https://github.com/niral3737/testMobxStateTreeApp
I am working with mobx-state-tree and I have created a model Invoice with a field name.
I am using that model in App.js class.
When it compiles, it throws
Failed to compile.
./node_modules/mobx-state-tree/dist/mobx-state-tree.module.js
2247:12-18 'mobx' does not contain an export named 'extras'.
what is the problem here?

warning " > mobx-state-tree#1.4.0" has incorrect peer dependency "mobx#^3.1.15".
Drop your dependencies down to:
"dependencies": {
"mobx": "3.1.15",
..and away you go!
P.S. Always use Yarn, when developing in React.JS and always run:
Yarn check
..before you commence with development.

react or npm issue: Module not found: [CaseSensitivePathsPlugin] `...\react.js` does not match the corresponding path on disk `react`

I'm getting the following errors when I execute the npm start command on a react project.
Failed to compile.
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin] `C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\React\react.js` does not match the corresponding path on disk `react`.
# ./~/react-scroll-pagination/dist/index.js 3:27-43
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin] `C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.js` does not match the corresponding path on disk `jquery`.
# ./~/react-scroll-pagination/dist/index.js 3:45-62
I'm new to react - but from what I can tell it's a pathing issue where npm install adds modules into the node_modules folder, all with lowercase folder names, but the compiler resolves to folder names with mixed case paths.
How do I fix this? The code is from the MongoDb Stitch PlateSpace tutorial project
Do I updated the existing code (maybe the import statements) or is it a npm or react issue?
Thanks
Tim

I come across the same problem.
I replaced :
import React, {Component} from 'React', with :
import React, {Component} from 'react'.
React is case-sensitive, so be careful and good luck.

For anyone facing this issue who is using CRA, I was getting this error and was not understanding why. My VS Code clearly showed the correctly named file, so I decided to check in the terminal:
ls -la [path/to/file/location]
I then actually saw that the file was in fact lowercase!
I renamed the file via the terminal and re-listed it to confirm:
mv src/create_page/createPage.jsx src/create_page/CreateDashboard.jsx
ls -la [path/to/file/location]
This fixed my issue, so at the end, I am not sure why this happened, maybe because my VS Code was not autosaving before I set the settings flag.

Solved it...
I haven't import all the libraries. So, I went to my root folder and excecute.
npm install
then
npm start

You may be executing the npm install / start inside of the wrong folder. I would delete the current directory and make sure to run the install in:
cd /stitch-examples/helloworld/react-example/
then
npm install
npm start

For this error :
import React from 'react'; in your index.js file . For this error : Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin]C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.jsdoes not match the corresponding path on diskjquery.
replace this code import React from 'react'; in your index.js file .
For this error :
Error in ./~/react-scroll-pagination/dist/index.js
Module not found: [CaseSensitivePathsPlugin]C:\Users\timhu\Dev\MongoDbStitch\PlateSpace\Web\node_modules\jQuery\dist\jquery.jsdoes not match the corresponding path on diskjquery.
replace the code with import Jquery from './jquery';
Don't worry this errors will shows pretty commonly its because react is a case sensitive.

For me the issue was the files on my disk was named filename.js, but my imports were doing this import thing from 'fileName.js'.
Renaming the file from filename.js to fileName.js on disk fixed the issue.

Bootstrap v4 runtime/load error in Aurelia

I have the following in my aurelia.json file, among the rest of what you'd usually find. I copied it directly from the reference implementation, and as you'd therefore expect, it works fine.
{
'build': {
'bundles': [
'name': 'vendor-bundle.js'
'dependencies': [
"jquery",
{
"name": "bootstrap",
"path": "../node_modules/bootstrap/dist",
"main": "js/bootstrap.min",
"deps": ["jquery"],
"exports": "$",
"resources": [
"css/bootstrap.css"
]
}
]
]
}
}
However, I'm trying to migrate to Bootstrap 4, and it just doesn't seem to be working. In order to update the package, I've tried changing build.bundles.dependencies[].path to ../jspm_packages/github/twbs/bootstrap#4.0.0-beta as well as to ../node_modules/bootstrap-v4-dev/dist, but it doesn't change the error code or make the error manifest any less. I've also tried copying the v4 files into the dist folder for v3, which also causes the same problem.
Build is always clean; the error occurs at run-time:
DEBUG [templating] importing resources for app.html
Uncaught TypeError: plugin.load is not a function
Unhandled rejection Error: Failed loading required CSS file: bootstrap/css/bootstrap.css
EDIT:
Thanks to Ashley Grant's answer, I have updated Bootstrap through NPM, obviating any changes to aurelia.json. The error remains unchanged, which would seem to indicate a bug were it not for the fact that other people have successfully performed this migration without errors using the same toolchain.
EDIT2:
I've created steps to reproduce the bug:
$ au new
name # can be any valid value
2 # Selects TypeScript as the language
1 # Create project structure
1 # Install dependencies
cd into the project directory.
Add the two entries listed above to build.bundles[1].dependencies in aurelia_project/aurelia.json
$ npm install jquery --save
$ npm install bootstrap#^4.0.0-beta --save
Change src/app.html to the following:
<template>
<require from="bootstrap/css/bootstrap.css"></require>
</template>
Finally, execute either of the following and browse to the provided URL.
$ au run
OR
$ au build
$ serve
This yields the errors described in both Google Chrome Version 55.0.2883.87 (64-bit) and Mozilla Firefox 55.0.3 on my Arch Linux systems. I've not yet had the opportunity to test it on other systems.
Edit3:
Thanks to #vidriduch, everything appears to be working. However, if you look at the console, you find the following:
Uncaught SyntaxError: Unexpected token export
vendor-bundle.js:3927Uncaught Error: Mismatched anonymous define() module: [entirety of vendor-bundle.js printed here]
These are the two very first messages when the page loads in debug mode, but no other errors arise.

You are missing popper.js dependency for Bootstrap 4.0.0-beta.
In order for Aurelia to accept this add
"node_modules/popper.js/dist/umd/popper.js"
on the top (as per comment from #hxtk) of prepend part of aurelia.json (assuming that you are using RequireJS, otherwise have a look at webpack dependency linking for Bootstrap https://getbootstrap.com/docs/4.0/getting-started/webpack/)
Just to mention, the version of popper.js you need to install is 1.11.0 (https://github.com/twbs/bootstrap/issues/23381), so
npm install popper.js#1.11.0
or
yarn add popper.js#1.11.0
and it should work :)

Your aurelia.json configuration is correct. I'm going to guess you never ran npm install bootstrap#^4.0.0-beta --save as you are mentioning copying files in to a versioned node_modules folder, and NPM doesn't use versioned folders like JSPM does.
So run npm install bootstrap#^4.0.0-beta --save and things should start working. I have your exact configuration working in an application for one of my clients.

exception while importing module in ember js

I need to remove diacritics from string in emberjs app.
I found a plugin for this: fold-to-ascii
but I don't know how to use it in my app.
I added this plugin via npm and it is visible under node_modules folder in my app
In docs usage of this plugin is:
var foldToAscii = require("fold-to-ascii");
foldToAscii.fold("★Lorém ïpsum dölor.")
but i get an exception:
Uncaught Error: Could not find module fold-to-ascii
also tried importing it like #Kori John Roys suggested:
import foldToAscii from 'fold-to-ascii'
but it gives me only new exception:
Error while processing route: transports.index
Could not find module fold-to-ascii imported from test-ember/pods/transport/model
What am I doing wrong ?

Assuming you are using ember-cli:
npm install --save-dev ember-browserify
then you can import like this:
import foldToAscii from "npm:fold-to-ascii"