MDbootstrap materialSelect is not a function Rails and Webpacker app - mdbootstrap

Im trying to figure out why the function materialSelect() is doesn't exist in the app context.
The MDboostrap select field is created correct with behaviour and style but I am trying to destroy and re-initialize using materialSelect() such as:
const $select = $('.mdb-select');
$select.materialSelect({destroy: true});
$select.materialSelect();
I get the follow error:
materialSelect is not a function
This app uses Rails 6/Webpacker. I think there is a file missing here since this app was created without the min.js file, instead each mdbootrap dependency was downloaded and added to the project.

The reason why this is not working is because of the MDBoostrap version. This project uses 2.2.1 and materialSelect() doesn't exist under this version. I was able to get it working on latest version 4.20.0

Related

How to prevent Create React App from forcing me to install TypeScript because a dependency has a ts file in it

I have a React app created using Create React App that was running fine until today. Something must have updated the last time I installed a new package. Anyhow, so whenever I try to start the app, it complains that there are .ts files (within node_modules folder) and forces me to install TypeScript.
Is there any way to stop this behaviour? Because currently, installing TypeScript just opens a bottle of worms, where I need to resolve the TypeScript errors that arises.
Also, as the screenshot suggests, removing the tsconfig.json file doesn't resolve the issue, it gets automatically created on every run..
Currently because it's preventing me to work, I've done the following modification until they fix it on the Create React App:
Current solution until they fix the create react app
On the file node_modules/react-scripts/scripts/utils/verifyTypeScriptSetup.js, find the definition of verifyNoTypeScript() (line 24). Replace the function to the following:
function verifyNoTypeScript() {
return true;
}

Source map generated by webpack works, but can't debug properly

I'm new to Webpack and React. I'm building an app using react, and today tried to create a build for the first time (i'm using create-react-app).
When trying to debug using Chrome dev tools, I can see all my Components using the map file generated by webpack/babel, however I get an error when placing a breakpoint inside a basic map method, and trying to access the value of the current item, or the mobx store items.
It's obviously working fine in development mode.
I guess i'm missing something with the configuration?
Thanks,
Currently fixed it by setting mangle=false in the uglify plugin. This causes uglify to not change variable names, so the map file has no problem to map to the real variables.

Access JS created constant in TypeScript code

I am new to TypeScript but trying to work out a way to manage my environment variables as I deploy and build through each. We are using gulp and I found gulp-ng-config. Issue with this is it writes out a js file but the rest of my site is written in TypeScript. So it creates this JS.
angular.module('myModule', []).constant('EnvironmentConfig', {"environment":"dev"});
In my TypeScript code I want to be able to access this constant but just cannot figure out how to. I read this post on SO and tried what is said there but no go.
Here is what I have done:
Created a TypeScript Interface for it:
export class IEnvironmentConfig {
environment: string
}
Imported and declared a variable in my service:
import EnvironmentConfig = require("../EnvironmentConfig");
declare var mEnviornmentConfig: EnvironmentConfig.IEnvironmentConfig;
Tried to use this variable in my service:
console.info(mEnviornmentConfig.environment);
So TypeScript does not complain now but when I run the code I get this error:
mEnviornmentConfig is not defined
What am I missing? The myModel is declare at the start of my app and does other module and controller configuration so I know it is getting registered.
Thanks to #keithm for getting me in the right direction.
Figured it out. Once I realized that injecting it into my main module was working my thought turned to how gulp is doing webpack. And sure enough the webpack was just skipping the .js file this other gulp package was creating. Once I updated webpack to account for this new file all was good.

Requiring 'fetch' is returning an empty object in a React-Native app

I'm currently working on my second react-native application. Previously I had simply required fetch like so:
var fetch = require('fetch');
I never installed it with npm, as it was already available by default.
I just started a new react-native project (after updating my react native cli) and now when I require fetch in the same fashion and try to call a fetch method my app crashes and I get an error that says
Object is not a function(evaluating 'fetch(API_URL, fetchObject)')
When I console out fetch with
console.log(fetch);
I get
{}
Any suggestions?
Alright, it looks you don't event have to require fetch any more. It's just available globally.
Try to include React/RCTNetwork subspec in native.

built ExtJs 4.2, app doesn't run without old classes

I minified/built my app that uses ExtJS 4.2.0 (free version) using Sencha SDK Tools 2.0.0 beta3, and the app was built successfully. However, when I try deleting the old "app" folder containing my old classes, the app no longer works.
I also tried generating a new app using Sencha CMD 4.0.1.45 and then adding my classes, but the results are the same.
I am confused why this happens, because as I understood it, your old classes are not needed to deploy production app. In fact, the only javascript files you need to include in your "index.html" file are "ext.js" and "app-all.js".
I used Firebug and saw in the DOM that the app, along with my classes, are loaded.
I also noticed that "app-all.js" defines classes like this:
Ext.define("MyApp.view.MyClass"...
Is this really how it is supposed to behave? or am I missing something?
Thanks in advance!
Okay, I got it. A .js file in my application calls Ext.require on itself, causing the app wiring go crazy.

Resources