we are using sprockets-es6 to transpile our angular es6 code in our rails-angular app. There seems to be some issues w/ using the es6 modules, I think maybe because sprockets-es6 transpiles to commonJS which causes modules to not work in the browser? Code looks like:
class DirtyAwareModel {
... some code
}
export { DirtyAwareModel };
and imported in a separate file/class like:
import { DirtyAwareModel } from './DirtyAwareModel';
class SnippetModel extends DirtyAwareModel {
... some code
}
SnippetModel.$inject = ['SnippetResource', 'PristineTracker', '$q'];
angular.module('selfalyticsServices.snippetModel', []).service('SnippetModel', SnippetModel);
I get an error in dirty_aware_model.js.self.js:
Uncaught ReferenceError: exports is not defined
the error being thrown here in the transpiled code:
Object.defineProperty(exports, "__esModule", {
value: true
});
Related
I've manage to include bootstrap 5 without any issues, but when I try to include fullcalendar I get this error on browser console:
Failed to load module script: Expected a JavaScript module script but
the server responded with a MIME type of "text/css". Strict MIME type
checking is enforced for module scripts per HTML spec. (main.css:1)
So it looks like the library is imported correctly but the css isn't
my stimulus controller:
import { Controller } from "#hotwired/stimulus"
import moment from "moment"
import { Calendar } from '#fullcalendar/core';
import dayGridPlugin from '#fullcalendar/daygrid';
import timeGridPlugin from '#fullcalendar/timegrid';
import listPlugin from '#fullcalendar/list';
export default class extends Controller {
static targets = [ "calendar" ]
connect() {
console.log(this.calendarTarget)
let calendar = new Calendar(this.calendarTarget, {
plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,listWeek'
}
});
}
}
Any ideias what I'm doing it wrong?
EDIT: looks like is related to:
https://github.com/rails/rails/issues/44239
I have been fiddling with this problem for a while today. I too couldn't get past the issue with the JS trying to pull in the CSS and raising MIME type errors.
However, I have managed to get FullCalendar running with importmaps by vendoring the main.js file provided by the CDN (referenced here), and then manually editing the vendored file to export the FullCalendar function as the default.
main.js -> https://cdn.jsdelivr.net/npm/fullcalendar#5.11.0/main.min.js
Copy this into vendor/javascript/fullcalendar.js
Pin the file in importmap.rb:
pin "fullcalendar" # #5.11.0
At this point I have the following error:
Failed to register controller ... SyntaxError: The requested module 'fullcalendar' does not provide an export named 'default'
Edit your new vendor/javascript/fullcalendar.js file and append to the bottom:
export default FullCalendar;
And then in the stimulus controller:
import { Controller } from "#hotwired/stimulus"
import FullCalendar from 'fullcalendar';
export default class extends Controller {
connect() {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendar.render();
}
}
Css is just brought in via application.scss as normal.
We are currently migrating our frontend from jQuery to Reactjs.NET. We are using React 16.8 which allows us to use React Hooks instead of classes.
We setup our project successfully and tried it first with classes and server side rendering which worked well, but my team rather use React Hooks. I tried using Webpack + Babel to transpile .jsx files since it didn't work anymore using only razor helper #Html.React(), but I still get the same error from my component.
We are using Asp.NET 4.x and NET framework 4.7.
This is my view children.cshtml
#Html.React("ChildrenForm", new {
familyTiesId = Model.FamilyTiesId
},
serverOnly:true
)
This is my ReactConfig.cs:
namespace Nop.Web
{
public static class ReactConfig
{
public static void Configure()
{
// If you want to use server-side rendering of React components,
// add all the necessary JavaScript files here. This includes
// your components as well as all of their dependencies.
// See http://reactjs.net/ for more information. Example:
ReactSiteConfiguration.Configuration
.AddScript("~/Scripts/Components/Customer/ChildrenForm.jsx");
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
}
}
}
My component:
import React, { useState, useEffect } from 'react';
const ChildrenForm = (props) => {
const [ familyTiesId, setFamilyTiesId ] = useState(props.familyTiesId);
...
}
It should work, but instead I get:
SyntaxError: Unexpected identifier
Line 20: #Html.React("ChildrenForm", new {
Line 21: ddtl = Model.DDTL,
Line 22: listFamilies = Model.ListFamilies,
...
[JsCompilationException: SyntaxError: Unexpected identifier
at ChildrenForm.jsx:6:8 -> import React, { useState, useEffect } from 'react';]
JavaScriptEngineSwitcher.V8.V8JsEngine.InnerExecute(String code, String documentName) +258
React.ReactEnvironment.EnsureUserScriptsLoaded() +548
It seems like we cannot import files when using razor helper #Html.React and server side rendering.
How can I do an import and use React Hooks while server side rendering?
Instead of having to import it, you can just use:
const [ familyTiesId, setFamilyTiesId ] = React.useState(props.familyTiesId);
Just call useState directly instead of importing.
I'm trying to make a Angular2 app (bootstrapped with angular-cli) work with Rails's ActionCable by integrating this lib on the frontend https://github.com/mwalsher/actioncable-js
I npm installed the lib,
added this to angular-cli-build.js
'actioncable-js/index.js',
and this in system-config.ts:
/** Map relative paths to URLs. */
const map: any = {
'moment': 'vendor/moment/moment.js',
'ng2-bootstrap': 'vendor/ng2-bootstrap',
'lodash': 'vendor/lodash',
'actioncable-js': 'vendor/actioncable-js'
};
/** User packages configuration. */
const packages: any = {
'ng2-bootstrap': {
format: 'cjs',
defaultExtension: 'js',
main: 'ng2-bootstrap.js'
},
'actioncable-js':{
main: 'index.js'
},
'moment':{
format: 'cjs'
},
'lodash':{
main: "lodash.js"
}
};
added this to my component:
import { ActionCable } from 'actioncable-js';
but the build errors with this message:
Cannot find module 'actioncable-js'.
anyone has any idea why?
My guess is typings are missing, but I'm not sure how to fix this.
Rails has since released an official actioncable package here:
https://www.npmjs.com/package/actioncable
No there is no problem with typings. What you are missing is how to use Javascript library in angular 2 typescript application. If you want to use JavaScript library in your TypeScript application, then you need to import the library import 'actioncable-js' and then you have to declare the variable. declare let ActionCable:any This tells typescript we have a global variable ActionCable present in our application. Now you can access it in your angular 2 component implementations and do whatever you want to do. You can read the discussion here.
angular-cli.build.js
vendorNpmFiles: ['actioncable-js/**/*.js']
systemjs.config.js
map:{ 'actioncable-js':'vendor/actioncable-js/dist/action_cable.js'}
package:{'actioncable-js': defaultExtension: 'js'} }
`
app.component.ts
import 'actioncable-js';
declare let ActionCable:any;
#Component({
....
})
export class AppComponent implements OnInit{
constructor(){}
ngOnInIt(){
//can access *ActionCable* object here
}
}
Lets say I have angular dart module as below
class CarouselModule extends Module {
CarouselModule() {
install(new TransitionModule());
bind(Carousel);
bind(Slide);
}
}
Application app = applicationFactory()
..addModule(new CarouselModule());
app.run();
Now at runtime, I want switch to a different module. Is this possible in angular-dart?
I have a podo class CarStorage for angular to inject.
class CarStorage {
int _carIdCounter = 0;
...
I wire it in using type:
module
..type(CarForm)
..type(CarItemsList)
..type(CarStorage)
;
It works in dartium but fails to load in dart2js. I get the following error:
Illegal argument(s): No type factory provided for CarStorage! (resolving GarageAppController -> CarStorage)
I discovered through some bug reports and guess work you need to add the DI Injectable annotation:
import "package:angular/angular.dart";
#Injectable()
class CarStorage {
...
edit: Fixed the import.
Do NOT use import 'package:di/annotations.dart'; this causes errors