I am trying to use Zurb Foundation 6.2.3 with Aurelia, I started to use skeleton-esnext-webpack. The problem that I am running into is when i try to initialize $(document).foundation(). Below is snippet from my main.js
const rootElement = document.body;
rootElement.setAttribute('aurelia-app', '');
await aurelia.start().then(a => a.setRoot('app', rootElement)).then(a => {
$(document).foundation();
console.log('foundation loaded')
});
I am new to webpack and esnext, but based on my understanding I need to include foundation using require or import. Can someone point me in the right direction and guide me in resolving this problem?
Your help is greatly appreciated.
Regards,
TiKi
As it turns out what was happening was two part problem. one zurb foundation is not jQuery 3.0 compliant and second webpack was pulling in transitive dependencies. I ended up including jquery-migrate 1.3.0 as dependency and also updated the webpack.config.js with resolve alias as below to make sure that jQuery was only loaded once.
resolve: {
alias: {
'jquery': path.resolve(path.join(__dirname, 'node_modules', 'jquery'))
}
}
Related
I have a ASP.NET Core application which renders tables on the serverside, some are quite complex.
I used to use sorttable: Make all your tables sortable for make the tables sortable; now as I have included vue.js (2.0, without npm / webpack), the jquery plugin obviously does no longer work properly.
Now, before i transition fully over to 100% clientside table rendering - which I want to avoid for now, if its possible, cause its complex - is there something similar to add sorting to a rendered html with vue or is that concept that old and no longer viable in vue.js and other modern frameworks?
So, questions are:
How to make sorttable work in vue.js are (without npm / webpack)
Or how to add something like that to a already server rendered html with vue?
Looking forward and regards, Peter
Okay, got it. That was a journey :-)
Sorttable script: https://www.kryogenix.org/code/browser/sorttable/
The script:
Vue.component('date-table', {
template: '<div><slot></slot></div>',
props: ['innerHtml'],
mounted: function () {
var self = this;
sorttable.makeSortable(this.$el.firstChild);
},
beforeDestroy: function () {
}
});
The markup:
<date-table v-once>
HERE IS MY ORDINARY HTML WHICH SHOULD BE SORTED BY
"sortable.makeSortable(...."
</data-table>
I am trying to get a React project to work with being packaged using Webpack and Babel using #babel/pollyfill. When I try to run on IE I get the following error...
SCRIPT1002: Syntax error
It is failing here...
class HealthCheck extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]{
render(){
return _HealthCheck_jsx__WEBPACK_IMPORTED_MODULE_1__["HealthCheckTemplate"].call(this);
}
}
So I am guessing it can't handle class so how do I fix this?
Try using #babel/plugin-transform-classes .
https://babeljs.io/docs/en/babel-plugin-transform-classes
My gulp file has this in it:
gulp.task('bower2',function () {
return gulp.src(mainBowerFiles('**/*.css'), {debugging:true})
.pipe(gulp.dest(dist_path+'/styles'))
;
});
But it's not finding the CSS files, none of them. I've been successful with the js files though.
I'm not trying to do anything fancy, just build all of the css files into a single vendor.css file (in the case, font-awesome and bootstrap, that's it).
Thanks,
Nick
Try like this.
gulp.task('bower2',function () {
return gulp.src('**/*.css')
.pipe(gulp.dest(dist_path+'/styles'));
});
For some reason gulp has issue with mainBowerFiles() function when you are trying to use it for css task.
I was playing with Angular2 beta tutorials, and discovered how magnificient are ES6 new way of importing modules & systemjs.
However, there's a thing I can't make it to work.
Everything works fine, UNTIL you have second level page, system.js is configured only for 1st level page
here is plnkr with the issue http://plnkr.co/edit/afsJY6tzrSeYMOtzUnXQ?p=preview
once run, as you can see, homepage works but the second level page is not working.
Must be something with systemjs configuration, I have my explanations and I fully understand why it does not work, and I have found a workaround, but I don't like it, can you please point me to the correct way?
this part:
System.import('app/boot').then(null, console.error.bind(console));
could be easily fixed by using
System.import('/app/boot.js').then(null, console.error.bind(console));
but then there in the boot.ts
import {bootstrap} from 'angular2/platform/browser'
import {AppComponent} from './app.component'
bootstrap(AppComponent);
I don't know how to fix the './app.component' because if I do '../app/app.component.js' then the typescript compiler blames, so, how's the correct strategy?
I'm not sure what the recommended way would be, as I'm still a beginner as well, but one way is to add maps to the config:
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
},
map: {
app: '../app' // <--
}
});
You could of course replace the relative ../app with something absolute like /app when you are running it locally.
I'm using React for my components, and in order to package up the styles with my components, I'm requiring them in as per the documented webpack method:
require('./style.css');
But when I try to render on the server, node-jsx throws an error when it attempts to transform the css. Is there another way of transforming the jsx which won't break on css? I'd rather not break the styles out into their own pipeline as that would defeat the advantage of webpack packaging components up nicely.
This can be solved setting webpack's "target" configuration to "node".
This simple example app should explain it clearly.
https://github.com/webpack/react-webpack-server-side-example/blob/master/webpack.config.js
You could use require.extensions like this:
require.extensions['.css'] = function() {return null}