I am using polymer in my project. My polymer version is 1.12.0 and webcomponent version is 0.7.24. Even I used the webcomponent, I am getting HTML Import error (HTML Imports is deprecated and has now been removed as of M80). Is there any way to resolve this error or it won't works in this version.
Polymer is deprecated, too...
You could try to use the HTML Import polyfill, but it's not sure it will always work.
https://github.com/webcomponents/html-imports
Related
Example:
<h1 translate="no" className="clientName">Jay</h1>
Hi Guys, the code above is in my react project and its apparent that the attribute translate is not working in React
Does anyone know an alternative solution, even through Javascript, as I do not want google to translate the names of people on my site?
Thanks!
As per the doc, Not all browsers support this attribute. Verify the doc whether the browser in which you work supports that attribute.
Please check browser support of translate="no" here, not supported by most of then
You can also test the same thing in the browser you want to test : https://j74bu.csb.app/
For specific google translate as alternate solution, you can use className="notranslate"
<h1 className="notranslate">agradável</h1>
WORKING DEMO : (Link to test)
While translate attribute is not supported in a few browsers, I think that issue in your case is that React isn't passing the translate attribute to the DOM element.
This could happen if you are using a version of react older than 16.0.0. Prior to 16.0.0, react would omit custom attributes from being passed to the DOM. In doing so it also did not honour some valid HTML attributes as the valid attribute list is quite huge.
From v16.0.0, react doesn't omit these attributes from being passed to the DOM and hence you would be able to properly use it.
Please check the migration guide for more details
All you need to do is to upgrade your version of react to the latest version using
yarn upgrade --latest react react-dom
or you can simply try to upgrade to v16.0.0 with
yarn upgrade react#16.0.0 react-dom#16.0.0
<html translate="no">
you can basically do this at the top of your html file
I have tried updating my old dependencies in current react project, but encountered this issue
Module not found: Can't resolve 'react-select/dist/react-select.css
I have manually checked react-select folder in node_modules couldn't find any react-select.css file.
couldn't find any reference regarding this thing,
Package version 3.0.8
Solution: removing css imports clear my error
They removed the CSS-class-based styling and therefore you don't need to import the CSS file anymore.
More info can be found in the upgrade Guide: https://react-select.com/upgrade-guide#new-styles-api
Thank You #Mastacheata for the details
If you upgraded from v1 to v2, you should definitely read their upgrade guide. The new major version is a major release for a good reason.
They removed the CSS-class-based styling and therefore you don't need to import the CSS file anymore. Instead they now define the CSS styles for their components right inside the code.
More info can be found in the upgrade Guide:
https://react-select.com/upgrade-guide#new-styles-api
I have successfully managed to render a React component inside of ember.
You can see the relevant code here.
The basics being adding an addon, that uses the preprocessTree hook, to use broccoli-react to parse the jsx files as per here. And a ReactComponent (which is an ember component) to wrap any react component.
This works well in ember cli 2.11.0 and 2.12.0, but in 2.13.0 and 2.14.0 something has changed and I can't figure out what.
I have narrowed the error down to this line in ember-resolver, for some reason this._moduleRegistry in the newer versions don't have the react component but the older versions do...
Any ideas?
I uninstalled everything node. And started matching package versions 1 for 1 from the newer app into the older one, and it all works.
I am using bootstrap in my react app generated with create-react-app
Below are two imports that I am using in my index.html
<script src="./vendor/jquery-3.1.0.min.js"></script>
<script src="./vendor/bootstrap.min.js"></script>
However in code when I use something like
$('.dropdown').dropdown()
I get an error as - error '$' is not defined no-undef
Can someone help me with this. Thanks!
If you need jQuery, run:
npm install --save jquery
Then you can use it in the app code:
import $ from 'jquery';
Note that this only works with versions 2.x and above.
You can also use it as a script tag.
This is not encouraged.
To do it, put jQuery into the public folder and add this to HTML:
<script src="%PUBLIC_URL%/jquery-3.1.0.min.js"></script>
Then you can use it from the app:
const $ = window.$;
In general I would recommend trying React Bootstrap instead of Bootstrap in React projects. It provides similar looking components but doesn't need jQuery and works on top of React.
I hope this helps! Please file issues if you're confused about something. We are happy to help.
You might need to require the jquery package. Include var $ = require ('jquery') (after installing it -- npm install --save jquery) on all the components that reference jQuery.
I am following www.angular-meteor.com tutorial on a windows computer.
But when I run meteor in console I only see:
A blank screen besides socially...
So it seems like some angular packages does not work with Meteor 1.3.1.
Here is output from meteor list:
accounts-password 1.1.7 Password support for accounts
angular 1.3.9_2 Everything you need to use Angu...
angularui:angular-google-maps 2.3.2 angular-google-maps (official)
angularui:angular-ui-bootstrap 0.13.0 Native AngularJS (Angular) direc...
angularui:angular-ui-router 0.2.15 angular-ui-router (official): Fl...
angularutils:pagination 0.9.1_2 Magical automatic pagination fo...
check 1.1.3 Check whether a value matches a p...
dotansimha:accounts-ui-angular 0.0.4 AngularJS wrapper for Meteor's Ac...
email 1.0.11 Send email messages
es5-shim 4.5.9 Shims and polyfills to improve EC...
jquery 1.11.7 Manipulate the DOM using CSS sel...
less 2.5.7 Leaner CSS language
meteor-base 1.0.3 Packages that every Meteor app needs
mobile-experience 1.0.3 Packages for a great mobile user ...
mongo 1.1.6 Adaptor for using MongoDB and Min...
reactive-var 1.0.8 Reactive variable
standard-minifier-css 1.0.5 Standard css minifier used with M...
standard-minifier-js 1.0.5 Standard javascript minifiers use...
tmeasday:publish-counts 0.7.3 Publish the count of a cursor, in...
tracker 1.0.12 Dependency tracker to allow reac...
twbs:bootstrap 3.3.6 The most popular front-end framew...
For example angularui:angular-ui-router seems not be working. But it works with meteor 1.2 version.
Is there someone out there that have the same problem? Maybe a solution as well?
Best Regards
EDIT
Removing dotansimha:accounts-ui-angular resulted in that I can see the map and search box. But The app is still broken. No parties are shown, pagination does not work and so on... Any ideas how to fix it?
I think I got it working now:
meteor list
accounts-password 1.1.7 Password support for accounts
angular-meteor-auth 1.0.1 Angular-Meteor authentication module
angular-templates 1.0.2 Compile angular templates into th...
angular:angular 1.5.3_1 AngularJS (official) release. F...
angularui:angular-google-maps 2.3.2 angular-google-maps (official)
angularui:angular-ui-bootstrap 0.13.0 Native AngularJS (Angular) direc...
angularui:angular-ui-router 0.2.15 angular-ui-router (official): Fl...
angularutils:pagination 0.9.1_2 Magical automatic pagination fo...
check 1.1.3 Check whether a value matches a p...
dotansimha:accounts-ui-angular 0.0.4 AngularJS wrapper for Meteor's Ac...
email 1.0.11 Send email messages
es5-shim 4.5.9 Shims and polyfills to improve EC...
jquery 1.11.7 Manipulate the DOM using CSS sel...
less 2.5.7 Leaner CSS language
meteor-base 1.0.3 Packages that every Meteor app needs
mobile-experience 1.0.3 Packages for a great mobile user ...
modules 0.5.2 CommonJS module system
mongo 1.1.6 Adaptor for using MongoDB and Min...
pbastowski:angular-babel 1.3.2 Babel compiler and ng-annotate fo...
reactive-var 1.0.8 Reactive variable
standard-minifier-css 1.0.5 Standard css minifier used with M...
standard-minifier-js 1.0.5 Standard javascript minifiers use...
tmeasday:publish-counts 0.7.3 Publish the count of a cursor, in...
tracker 1.0.12 Dependency tracker to allow reac...
twbs:bootstrap 3.3.6 The most popular front-end framew...
So I do use accounts-ui-angular!
I followed this link
What I did was:
First:
Remove the angular meteor package you installed via atmosphere: meteor remove angular
Make sure you have the ecmascript package installed. If you had the atmosphere angular package installed previously you may have removed it after getting a notice that multiple compilers were trying to handle files with .js extension. So check out meteor list and if ecmascript isn't there do: meteor add ecmascript
Install angular and angular meteor via npm: npm install angular angular-meteor --save
List 'angular-meteor' as a module dependency for your main module: angular.module('myApp', ['angular-meteor']);
meteor remove ecmascript
meteor add modules (ecmascript implies modules so you have to add it manually if you remove ecma)
meteor add pbastowski:angular-babel
Note that I do not need to import angular in app.js (no import angular from 'angular'; or import 'angular-meteor';)
Now:
Hope that helps if someone have the same problem:)
I found that the problem is the incompatibility with this package:
meteor remove dotansimha:accounts-ui-angular
Don't forget to remove the dependency 'accounts.ui' on 'app.js'
Just removed and the result:
Possibly the problem is why somehow this package uses the "blaze-html-templates"