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.
Related
I cannot post exact code due to NDAs, so I will do my best.
Javascript is not my string suit, but I took it up for my team.
Background:
I built a module which basically will perform a very simple task and can be imported as a dependency in other projects and then added into the project by adding the tag.
I wanted to keep this as lightweight as possible and let the app which was adding it in do the heavy lifting and have the imports to run and compile Angular code.
Code for SimpleApp:
Everything seems to work fine except for places marked with /* Potential Issue */
Within the simple module, I have a few file:
simpleApp.js -- the main js file which does the work necessary
simpleApp.html -- the html of simpleApp.js
innerProvider.js -- a module.service which does some work when called from the simpleApp.js -- this import seems to be the issue causer.
All within the companySimpleApp package:
simpleApp.js:
import angular from "angular"
/* I believe this to be the issue */
import innerProviderModule from "./pathToFile/innerProvider /* Potential Issue */
/* Potential Issue */
angular.module('simpleApp', [innerProviderModule]).component('simpleComponent, {
controller: ['$scope, 'innerProvider', ..., function($scope, innerProvider, ...) {
/* does work */
}],
template: require("./simpleApp.html"),
bindings: {
bind1: '#',
bind2: '#'
}
simpleApp.html:
<div>
do stuff
call stuff
</div>
innerProvider.js:
import angular from "angular"
const innerProviderModule = angular.module('innerProvider', [])
.service('innerProvider', function (%http, ...) {
this.doWork = function (param1) {
retStmt = doSomething(param1)
return retStmt
}
});
export default innerProviderModule.name;
Everything here builds correctly and will do as is told. I am able to build this package as well as the one which uses it and have a working webpage with the simpleApp's services. However, this is when I host everything myself.
Code for Larger Service using SimpleApp:
In another project I have this listed as a dependency "simpleApp = 1.0" this may be different than expected due to my company's internal workings, but this works.
It appears in the node_module directory
I then have a module for the webpage which loads in simpleApp and has all of the other packages like angular, babel, uglify, webpack, etc:
/* Potential Issue */
import "companySimpleApp/simpleApp.js"
export default angular
.module("app", [otherDependencies, simpleApp])
.config(function ($stateProvider, $stuff){
someMappingsForUrls
});
...
<script src="../node_modules/companySimpleApp/simpleApp.js"></script>
...
and another html and js file which use the simpleApp
<div>
<simpleApp bind1='{{value}}'></simpleApp>
</div>
Error:
Now, everything will run fine on my localhost and I can fully use the larger service using SimpleApp site with the simpleApp. However, when I build this (npm run webpack) on the service using simpleApp, I get the following error even though everything seems to run fine on my localhost:
ERROR in bundle.js from UglifyJs
Invalid assignment [bundle.js:146461,67]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! # webpack: `webpack -p`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the # webpack script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
........
The code seems to build when I remove the import innerProviderModule from "./pathToFile/innerProvider from simpleApp.js but I then get an error saying that innerProvider is an unresolved reference or something along the line.
What I am asking is for some help on why I may be seeing this error when I import the innerProviderModule I built. Do I need to add webpack and all that to my simpleApp project even though it all seems to run fine physically on my localhost?
Any help or ideas is very much so appreciated. Thanks!
Bumping this as I posted it late at night.
Edit: It seems to not like "=>" in the innerProvider which I have
I built the package which uses the simpleApp with 'webpack -p' which was not done on simpleApp. So, what it looked like that happened was that the simpleApp was not minified or something and didnt like a few lines in the provider code (ie: "=>", "let", etc...)
So instead of having the simpleApp have more dependencies, I simply wrote code which would pass webpack -p.
You should also be able to just remove the "-p" flag
Hope this helps someone.
I work with Augmented UI in my Gatsby project, every thing works great in dev mode.
When I go with build command, I got this log error:
info bootstrap finished - 4.630 s
⠀
failed Building production JavaScript and CSS bundles - 9.761s
ERROR #98123 WEBPACK
Generating JavaScript bundles failed
Parse error on line 1:
...n-x, calc(var(--aug-_TlJoinRX, 0px)/2 + var(--aug-_TrJoinLX, 100%)/2)) + var(--...
------------------------------------------------------------------------^
Expecting end of input, "ADD", "SUB", "MUL", "DIV", got unexpected "RPAREN"
not finished run queries - 9.857s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project#1.0.0 build: `gatsby build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project#1.0.0 build script.
After some researches, it seems that PostCSS is unable to work along with Augmented UI (on calc functions).
I'm unable to find a way to disable PostCSS on this.
My dependencies versions are:
"gatsby": "^2.18.5",
"gatsby-plugin-postcss": "^2.1.16"
My current postcss.config.js looks like that:
module.exports = () => ({
plugins: [require('tailwindcss')],
})
Thanks for any help on this subject.
#Zooly, the problem is related with the use of calc function in the CSS preprocessor or minifier. From the Augmented UI's documentation:
Compatibility with Create React App (And in my situation, Vue)
Create React App depends on PostCSS and cssnano. Both of these libraries have parsing bugs that block augmented-ui so you'll need to copy augmented-ui.min.css into the public folder and manually include it in the index.html file to avoid them until they're fixed.
https://augmented-ui.com/docs/#install
As you can see at this support answer on GitHub https://github.com/propjockey/augmented-ui/issues/3#issuecomment-579671714, you can add this key to your package.json config file:
"cssnano": {
"preset": [
"default",
{
"calc": false
}
]
},
I use this workaround and it works fine to build my Vue project. Hope it works for yours too.
I ran into the same problem (also with Argument UI), and did not fix it. But here is a quick work around:
<Helmet>
<link rel='stylesheet' href='https://unpkg.com/augmented-ui/augmented.css' />
</Helmet>
And just a heads up: I had to delete my public and .cache folder to get the build to include the link to the CDN.
I've installed a few plugins, but getting an error with hyperterm-transparent-bg
plugins: [
'hyperterm-material',
'hyperterm-transparent-bg',
'hyperterm-blink'
],
The following don't work, and I keep getting a Cannot find module error, even though my paths are correct.
hyperterm-transparent-bg
bundle.js:1 Error: Cannot find module '/Users/leongaban/.hyper_plugins/node_modules/hyperterm-transparent-bg'
at Module._resolveFilename (module.js:455:15)
I re-installed Hyperterm and it doesn't look like it can rebuild the npm-debug.log file :(
Here is the gist to the last one I had saved off.
Try setting the shell property in .hyper.js .
I have been having the same issue and got it fixed by setting the shell property after reading this https://github.com/zeit/hyper/issues/1513#issuecomment-281414846
Thanks to this answer in their repo: https://github.com/dfrankland/hyper-transparent-bg/issues/9#issuecomment-284415902
Apparently it changed to this plugin instead: https://www.npmjs.com/package/hyper-transparent
I used yarn instead of npm to install it: yarn add npm i hyper-transparent
Then in my .hyper.js config:
plugins: [
'hyperterm-material',
'hyperterm-blink',
'hyper-transparent'
]
Got it working! Took me a sec to realize that the transparency controls where in the view menu of the OSX toolbar.
I am new to aurelia, and I need create a prototype project of the framework. At the beginning, I planed to use skeleton-typescript-aspnetcore skeleton, but when I tried the vs2017rc, I found it uses .csproj as the default format(while vs2015 is project.json/.xproj), I think we should follow the vs2017 because we will upgrade our IDE after it's been launched.
The vs2017 have a wizard to upgrade .xproj project, but after the upgrading(skeleton-typescript-aspnetcore), there still lots of error ahead me...
I also tried aurelia-cli, but seems it has not support vs2017 yet, does anyone could give a guide to create the prototype project? I will integrate some plugins like the skeleton mentioned above, such as gulp,karma,breeze...
thank you in advance.
Since Visual Studio 2017 just launched I thought I'd answer how I solved this, as there are still many errors when using "skeleton-typescript-aspnetcore".
Using https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 as a starting point, these are the steps to get it running:
When you first run the project you will get errors complaining that some files located in /test/ is not under 'rootDir'. In your tsconfig.json the rootDir is defined as "src/", this can be solved simply by moving your test folder inside your src folder. This will cause new errors because the paths defined in those files has now changed. You will need to edit app, child-router and users imports like this:
import {Users} from '../../users'; IntelliSense should help you out here.
The command gulp test will also not run before changing to the new path, you can change the path in karma.conf.js:
files: [
'src/test/unit/setup.ts',
'src/test/unit/*.ts'
],
Next the file users.ts will throw errors like Type 'Response' is not assignable to type 'any[]'. You will need to tell TypeScript what you're declaring like this: public users : Object = []; or simply: public users = {};
The final problem is that you're going to have a lot of duplicate identifier errors, at the time of writing this the cause of this seems to be from the changes brought on by TypeScript version 2.2.1. I don't know what specifically breaks, but I know that previous version 2.1.5 still works. So what you need to do is to run npm install typescript#2.1.5 --save in your src/skeleton directory, the --save is just to update your package.json file, you can do this on your own later as well if you wish.
After you've done that your gulp errors (20~ of them) should be resolved. But there are still some errors remaining caused by duplicate signatures. Again, things have changed in TypeScript 2.0+, there is now a simplified way of getting and using declaration files. Here is an answer on SO on how to use the #types feature: How should I use #types with TypeScript 2 , but to keep this short and sweet you will have to go to your tsconfig.json file and explicitly tell where to find the #types/node folder. It would look something like this:
"compilerOptions": {
...
"typeRoots": [
"node_modules/#types"
],
"types": [ "node" ]
...
},
Hope this helps, with these changes the project should now build and launch correctly.
EDIT:
I recently ran into some problems again with building my project. I got a lot of duplicate identifiers again... I however ran across this answer on SO: TypeScript throws multiple duplicate identifiers
Apparently TypeScript latest ships with fetch definitions out of the box, so I was able to run the command from the answer in the link:
npm uninstall #types/whatwg-fetch
And upgrading from typescript 2.1.5 to latest:
npm install typescript --save
You might even want to install typescript globally by appending -g.
Also this will continue to be an issue unless you comment out/delete url and whatwg-fetch from typings.json globalDependencies in order to prevent it from recreating itself:
"globalDependencies": {
//"url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
//"whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
}
Then you can either delete the typings folder, running typings install again or edit index.d.ts in the typings folder and delete the reference paths to whatwg-fetch and url.
Hope this helps someone who might've encountered the same problems even after "fixing" it.
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();
...