Import aws-amplify in Ionic2 - visual-studio

OverView
I develop an ionic mobile app with Visual Studio.
When I added import statement in src/app/main.ts, my app got not working and didn't render expected page.
Please tell me how to solve this.
I published my app to github.
link to my github page
Process of my app not working
I installed aws-amplify by npm command.
$ npm install aws-amplify --save
I selected "Ionic 2 - Tabs" template and created new a project.
Visual Stido "Ionic 2 - Tabs"
I added import statement in src/app/main.ts.
import Amplify, { Auth } from 'aws-amplify';
My app got not working.
Error messages and ScreenShots
JavaScript Console shows messages below.
Failed to load resource: net::ERR_FILE_NOT_FOUND
main.css
Failed to load resource: net::ERR_FILE_NOT_FOUND
main.js
Failed to load resource: net::ERR_FILE_NOT_FOUND
polyfills.js
My app is expected to render the page below.
expected page
But it rendered the page below.
unexpected page

From the error it doesn't look like from aws-amplify. How about first try remove import from aws-amplify?
It more like the visual studio template has problem. I just tried command line it works fine.
ionic start myApp tabs
cd myApp
ionic serve
Here is an aws starter template maybe you could try follow.
https://github.com/ionic-team/starters/tree/master/ionic-angular/official/aws

Related

Laravel 9 with Vite breaks a JS file on 'npm run build'

I am trying to use #yaireo/tagify in my Laravel 9 project. (https://www.npmjs.com/package/#yaireo/tagify)
I imported it with npm i #yaireo/tagify --save
Then put import Tagify from '#yaireo/tagify' in my app.js file, then ran npm run build on my project.
I can verify the code gets added to the project as it appears in my previously empty app.abc123.js file by looking at the sources within Chrome. The file looks compressed / optimized which I expect to happen.
However, I get this error in the console jquery-3.6.1.min.js:2 Uncaught ReferenceError: Tagify is not defined
I've also tried copying the jQuery.tagify.min.js file to /resources/js/jQuery.tagify.min.js and then using #vite(['resources/js/jQuery.tagify.min.js']) within the blade template, then npm run build to build the files. Again this works, and the file is included in the sources, but the exact same error.
The only way I were able to get it to work without the error was by copying jQuery.tagify.min.js directly to /public/build/assets/jQuery.tagify.min.js and using <script type="text/javascript" src="/build/assets/jQuery.tagify.min.js"></script> in the blade template.
This says to me that vite seems to be doing something when it's trying to compress/optimise the file that breaks the functionality.
I recall running into the same issues with bootstrap and JQuery and ultimately decided to reference the CDN for those files.
This is the raw jQuery.tagify.min.js file: https://pastebin.com/PzK7ps25
This is the file after being processed by vite / npm run build: https://pastebin.com/1FCDXyty
What am I doing wrong?
Edit:
Not that it should have any bearing on the issue, the code I am using within the blade template is:
<input name='basic' value='tag1, tag2, group 3, etc...'>
<script>
$( document ).ready(function() {
// The DOM element you wish to replace with Tagify
var input = document.querySelector('input[name=basic]');
// initialize Tagify on the above input node reference
new Tagify(input)
});
</script>

Error during building swagger in laravel application with vite

Get the following error after running npm run build in laravel. If I run npm run dev everything seems to work fine. But in build this error occurs.
rendering chunks (2)...warnings when minifying css:
▲ [WARNING] Expected identifier but found "*" [css-syntax-error]
<stdin>:1:30219:
1 │ ...fter{clear:both}.swagger-ui .cf{*zoom:1}.swagger-ui .cl{clear:le...
╵
Following error is shown during loading the swagger page:
Uncaught TypeError: Cannot read properties of undefined (reading 'isRequired') swagger.67892d56.js:162
at 1543 (swagger.67892d56.js:162:9585)
at Ve (swagger.67892d56.js:191:4143)
at swagger.67892d56.js:193:40222
at swagger.67892d56.js:193:72778
I am building a laravel application and using swagger for route documentation. In production it works well but during build this error occurs.
Looks like this issue which was fixed in Swagger UI v. 4.15.3. Update your app to use the latest version of Swagger UI.

TS2503: Cannot find namespace 'WebDataRocks'

I have a react application and I'm trying to use WebDataRocks to render data from my bd. But, when I try to build I'm getting an error that says:
TS2503: Cannot find namespace 'WebDataRocks'.
I tried several stuff, but I still receive the error. The only things that's working is when I add a flag of ignoring the typescript type of and index.d.js. But, I can't change the modules because it's not gonna work when I send the code for prod area.
My guess is the file should be tsx not ts. But, again I can't change the modules.
Any thoughts?
I kindly suggest creating a new project and embedding WebDataRocks to check how modules should be imported.
Here is a short guide:
If you don’t have a React+TS application yet, create one by running this command in the console:
npx create-react-app my-app --template typescript
cd my-app
Get the WebDataRocks React module from npm:
npm install react-webdatarocks
Add WebDataRocks’ styles to the src/index.tsx file:
import 'webdatarocks/webdatarocks.css'
Import the WebDataRocksReact module to the src/App.tsx file:
import * as WebDataRocksReact from 'react-webdatarocks';
Open src/App.tsx and add WebDataRocks there using the WebDataRocksReact.Pivot component:
function App() {
return (
<div className="App">
<WebDataRocksReact.Pivot
toolbar={true}
componentFolder="https://cdn.webdatarocks.com/"
width="100%"
report="https://cdn.webdatarocks.com/reports/report.json"
/>
</div>
);
}
Run your application:
npm start
Open http://localhost:3000/ in the browser — WebDataRocks is embedded into your React+TS project.

Laravel Vue.js components are not working on server

I am new to Laravel Vue and I recently came to a project. at my localhost everything working fine, but when I pushed my project to the server via git, the Vue components not working. it says this error in the console...
Uncaught SyntaxError: Unexpected token '<' app.js:1
there is no npm install on the server so I run the command locally "npm run production" and pushed the app.js and all other js files via git to the server.. the server files are the same as localhost but Vue components not working on the server, but they are running on localhost..., I am stuck to the problem with 3 days, any help will be highly appreciated.
Thanks
Just for clarity, the CSS file is rendering but the JS file not
In my console:
Resource interpreted as Stylesheet but transferred with MIME type text/html: /rider/auth/public/css/app.css.
Uncaught SyntaxError: Unexpected token '<' app.js:1
So the issue was in the .env file , and there was a variable "ASSET_URL = ./public" , this was not allowing the application to go to the correct path . Thanks #Aless55 for your great support

Debugging Axios requests in React Native

I'm trying to debug axios requests in my React Native app using axios-debug-log.
I've added the library: npm install --save-dev axios-debug-log
Before a user logs in and starts using the app, I set the local storage (or in RN's case, the AsyncStorage): AsyncStorage.setItem('debug', 'axios')
In the top of the file with my axios API requests, I added require('axios-debug-log');
However, I'm not seeing any logs when I use axios. The docs for axios-debug-log don't include any specifics about using the library with RN, so I'm not sure if there's something I'm doing wrong. If there is another library/ techniques I could use to debug axios requests in my RN app I would be open to using those as well.
Using AsyncStorage will not work. You need to set NODE environment variable.
Option 1
Add the following code on top of your index.js file.
let debug = require('debug');
debug.enable('axios');
Option 2
Other way you can do it is using npm 'babel-plugin-transform-inline-environment-variables' npm package.
run
npm install babel-plugin-transform-inline-environment-variables
Now got to .babelrc file inside your react-native app directory and add following code.
// .babelrc
{
“presets”: [“react-native”],
“plugins”: [
“transform-inline-environment-variables”
]
}
Finally run your app with following command. It will set a node env variable DEBUG as axios.
DEBUG=axios react-native run-ios
DEBUG=axios react-native run-android

Resources