Recently i started playing with aurelia-framework and so far so good but when i edited config.js to add some of my files that are not installed via jspm things worked fine i was importing my scripts no errors but when i cloned to another machine and run jspm install it fails cause it does't like that i have other paths other than npm and github in my config.js
Configjs
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"lib:*": "lib/*",
"styles:*": "styles/*"
},
map: {
"app-styles": "styles:app-styles",
"uisearch": "lib:uisearch/uisearch#1.0.0",
"component": "lib:component/component",
"classie": "lib:classie/classie#2.0.0",
"material": "lib:material/material",
"ripples": "lib:ripples/ripples",
"bootstrap-select": "lib:bootstrap-select/bootstrap-select#1.7.2"
other deps...
}
Error Message
err Registry lib not found.
err Unable to load registry lib
warn Installation changes not saved.
Please help am new to this :)
Avoid making changes to the map section of your config.js by hand. Instead use the jspm command line interface to add packages. The jspm CLI will maintain your config.js for you. For example, to add classie to your project you would execute the following:
jspm install npm:desandro-classie
More information at jspm.io.
Note: you don't need to edit the config.js to enable importing javascript/css that is part of your project.
If I'm interpreting your original post correctly you have a lib folder containing a ripples subfolder which has a ripples.js file inside of it. You could access this "ripples" module like this:
import ripples from 'lib/ripples/ripples';
ripples.foo();
...
Related
I am building a framework, in which I want to have examples folder, like this:
./framework-core
./framework-constants
./framework-helpers
./examples
I want to be able to run the examples with rollup when I download the framework from github, using commands in my package.json such as:
"app0": "rollup examples/app0/app.js --format iife --name 'bundle' --file examples/app0/bundle.js"
In my app0/app.js file I include the framework's main parts, like this:
import { FrameworkClass } from '../../framework-core'
Upon running my app0 command from the cli, I get the following error [!] Error: Could not resolve '../../akira-core' from examples/app0/app.js
I understand this has to do with my relative paths, but am unable to get it working. Is this how it should be done? Is there a smarter way I am missing? Any help is more then welcome.
I am trying to use this with my webpack project
https://blog.meteor.com/leverage-the-power-of-meteor-with-any-client-side-framework-bfb909141008
but I get this error
ReferenceError: __meteor_runtime_config__ is not defined
Here are the steps I did
create a new meteor project
then I run the client bundler like this
meteor-client bundle —source=./ —destination=./meteor-client.bundle.js —config=meteor-client.config.json
and here is the config
{
"runtime": {
"DDP_DEFAULT_CONNECTION_URL": "http://localhost:3000"
},
"import": [
"meteor-base#1.3.0",
"mongo#1.4.2",
"reactive-var#1.0.11",
"jquery#1.11.10",
"tracker#1.1.3",
"shell-server#0.3.1",
"react-meteor-data"
]
}
then I copy my meteor-client.js to my webpack project node_modules
and import it like this
import 'meteor-client'
then I bundle webpack and run dev-server and I get the above mentioned error.
I had the same issue, and fixed that by putting my meteor-client.js to node_modules and exclude node_modules from processing by babel-loader with webpack (or you could just exclude meteor-client.js). Raw loading will workaround that.
In case someone still searching.
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.
Is it possible to configure where WebStorm is looking for modules without adding the project itself as a library in the settings?
I have added the following part to webpack and compiling works fine, but I also need code completion
resolve: {
root: [
path.resolve('./asset/js')
]
},
Now I can change something like this:
import { ViewContainer } from './../../application';
to:
import { ViewContainer } from 'application';
But with this I have no code completion and adding /asset/js to the Library seems not to work. It also disables checking for errors on this directory.
WebStorm gives me the warning that no module 'application' is found in package.json
package.json only accept npm modules or git repositories
Do you have any solutions for this problem?
Right click on the directory and go to 'Mark Directory as' and select 'Resource Root'
Meteor application directory layout:
imports/
api/
collections/
MyCollectionFile.js
packages/
mypackage/
mypackageMain.js
I can export anything from the package file and use it inside the application, that's ok. But how can I use "import" in the package, like the other way around?
// mypackageMain.js
if (Meteor.isServer) {
require ('/imports/api/collections/MyCollectionFile.js');
};
OR
import '/imports/api/collections/MyCollectionFile.js';
I tried using the path '../../imports/api/collections/MyCollectionFile.js' but it simply does not work. I can not access this file from a package.
I get the following Error for both the import and the require:
W20160618-23:25:59.486(3)? (STDERR) Error: Cannot find module '../../imports/api/collections/MyCollectionFile.js'
W20160618-23:25:59.487(3)? (STDERR) at require (packages/modules-runtime/.npm/package/node_modules/install/install.js:85:1)
Figured out that this was not possible.
However, moving the collections to a package and exporting them would make the collections available to other packages and the application.
I've also been running in to this issue and have found two solutions, both are sub-par though.
Install the thing you want to import as a npm package. $npm install --save ./imports/<the thing>.
Use npm link to create a link to the thing you want to import.
Both solutions require that you have a package.json in the directory you want to import and both won't be transpile the code and just run it against the provided version of node.
A possible solution for the transpile issue would be using a loader plugin, or somehow provide a additional configuration to System.js to tell it to transpile the code on import.