I have a simple react app created by the latest version of create-react-app (that only support node version 14+). I am trying to make this app run in IE11. So as recommended, I did following:
installed react-app-polyfill
added two imports at the beginning of index.js: import "react-app-polyfill/ie11", import "react-app-polyfill/stable"
added "ie 11" under the development in the package.json
I installed a chrome extension, IE Tab, and tested there. But still not working, I see following error when I open the chrome devtool:
IE: Error: Object doesn't support property or method 'endsWith'. Source: http://localhost:3000/static/js/bundle.js:63700
Can anyone help?
I can reproduce the issue. You can add a polyfill for endsWith() so that it can work well in IE 11.
You can include the polyfill within <script> tag in index.html.
Found this solution on the 3rd page of google. It's going to help you:
The first thing you have to do - include polyfills from react-app-polyfill at the top of your app
Then in package.json set up browserlist (add ie11, ie10, etc)
In the end - add meta tag in your public/index.html
Related
When I run my Vue app, the Vue devtools extension detects Vue.js, but complains:
Devtools inspection is not available because it's in production mode or explicitly disabled by the author.
I'm serving the app locally using yarn serve, which runs vue-cli-service serve.
vue: 3.0.0
vue devtools: 6.0.12
#vue/vue-cli: 5.0.1
#vue/vue-cli-service: 4.5.14
node: 16.14.0
yarn: 1.22.4
Chrome: 98.0.4758.102
Vue devtools DOES work if:
Another dev runs the app in Chrome from a clean local repo (same versions of everything above)
I create and run a new Vue app (vue create) in Chrome
Vue devtools DOES NOT work (same error message) if:
I run my app from a new local repo
I clear all browsing data from Chrome
I add vue.config.performance = true to my main.ts file
I add --mode=development to my vue-cli-service build command
I use Edge (Chromium) instead of Chrome
I update vue to 3.0.14
I access the app via http://localhost:8080 or a hosts file alias https://myalias:8080
AFAIK I never did anything to force a production build or disable vue devtools, so I'm stumped why it doesn't just work out of the box. What am I missing?
[UPDATE]
.env files have only VUE_APP_* variables defined.
Vue is installed locally (not using CDN version).
vue.config.devtools is not available in vue3. vue.config.performance appears to be the replacement.
Using the Vue devtools beta (6.0.0.21) does not help.
[UPDATE 2]
I upgraded all matching packages in my project to match the versions in the new Vue app for which the dev tools were working. The dev tools are now working on my app, but I don't know which package upgrade did the trick. Would still be nice if the Vue owners could provide more insight into why this occurs and how exactly to fix it.
For my situation, go to Chrome's More Tools > Extensions > Vue.js devtools > Details, and switch on the Allow access to file URLs option. Finally it works for me again.
Check that you do not have explicitly defined mode NODE_ENV in a local .env file
https://cli.vuejs.org/guide/mode-and-env.html#environment-variables
Having that would completely explain the behaviour you're experiencing and also why it works as expected on other machines.
I bought and installed TailwindUI. I copied and pasted one of the Navigation components just to see how it looks in the app and the hamburger menu and the notification bell (both part of Heroicons) aren't appearing.
When I click on the part where the menu should dropdown it works. But all that's present is a little square that sort of looks like a checkbox.
Here is what it looks like in Firefox (mobile debugger):
Testing on Safari and it looks like Chrome.
In node_modules I can see heroicons are present:
The app uses Elixir/Phoenix, Vue, Webpack, and Tailwindcss.
Anyone know what the issue is or how I'd go about debugging it?
If you are not using SVG syntax, you have to install and import #heroicons/react package into your project using npm/yarn
npm install #heroicons/react
TailwindUI supports Vue 3, which does not appear to include #vue/compat. #vue/compat is a compatibility build for when one wants to migrate from Vue 2 to Vue 3. the compat build (aka, migration build) is supposed to be Vue 3 compatible but I guess it's still not enough for TailwindUI.
I've built a small notes app using Vue.js with TailwindCSS. To publish it, I've put it on codesandbox.io but due to some unknown reasons, styles does not apply. If I use CDN to import TailwindCSS, it works fine. Other configurations are same as my local environment in which it also works as expected.
Thank you! :)
I have used two social login and both are refers the react-native-webview dependency.
installed versions:
react-native-linkedin(it uses react-native-webview 7.0.5),
react-native-instagram-login (it uses react-native-webview 7.5.1),
react-native-webview ^7.5.1
Can you please tell me how to resolve this issue
screenshot
https://i.stack.imgur.com/ETW5J.png
facing same issue with same library . It is cause of different versions of webview which these library are using and as much as i know we can update those npm module directly so we can solve this issue temporary by following these steps
Create file InstaWebView.js(name can be any)
Copy code from
https://github.com/hungdev/react-native-instagram-login/blob/master/Instagram.js
Paste in InstaWebView.js and use as normal
I know it is hack but for now we can do this
Note :- For this hack , you need to install webview module so you may install webview module of same version as linkedin has so there will be no issue
I am trying to access my VueJS application running on my node server on IE11 by accessing the URL http://localhost:8080. However I cant access the same as only a blank screen appears. I have babel polyfill installed and imported in my main file and have babel presets already setup in babelrc file.
My app is currently running and is accessible on Chrome but not on IE11.
I don't get a single error message in console and have no clue what could be going wrong. Has anyone ever faced this?
You need to use polyfills. IE11 does not support ES2015, it needs to be transiled by babel. There seem to be various ways of doing this.
Please check this guide: jacklyons.me/how-to-fix-vuejs-not-working-in-ie11
or here: cli.vuejs.org/guide/browser-compatibility.html