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
Related
I created a to do list app using html, css and javascript. I'm trying to create the same app using javascript. The problem I'm facing is that I'm getting this error when I include angular in my application.
Angular: disabling automatic bootstrap. <script> protocol indicates an extension, document.location.href does not match.
this could be an IE bug, try bootstrapping your app manually instead of relying on the standard approach with the ng-app directive.
angular.element(document).ready(function () {
angular.bootstrap(document, ['nameOfYourApp']);
});
https://github.com/angular/angular.js/issues/15567
https://github.com/angular/angular.js/issues/15772
https://www.roelvanlisdonk.nl/2017/02/01/fix-in-ie-angular-1-6-1-disabling-automatic-bootstrap-script-protocol-indicates-an-extension-document-location-href-does-not-match/
I have currently a problem with embeding my Applet .jar file into my Angular 2 Project.
Most of the solution mention using the <applet></applet> tag but I get the following error when i try it:
Unhandled Promise rejection: Template parse errors:
'applet' is not a known element:
1. If 'applet' is an Angular component, then verify that it is part of this module.
2. If 'applet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message.
How do I solve this?
Ok, HTML5 replaced <applet></applet> with <object></object>.
Tried it and now it works
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'))
}
}
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}