I'm creating an app made with vuejs. This app i using AWS Appsync services for communicating.
Unfortunately i need to support old browsers like ie 10/11 and the module developed by amazon aws-mobile-appsync-sdk-js and other sub dependencies are build using es6.
So, i have tried to transpile dependencies using webpack and babel but when i run app in any browser (ff, chrome too) i got this error: exports is not defined.
Is refereed to a row of a dependency how i have tried to transpile
node_modules/aws-appsync/node_modules/debug/src/browser
exports.log = log;
Any ideas? Thank you
I think your code should be module.exports.log = log instead. At least according to this article.
Or if you want to use ES6 native exports: export {log}.
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've just created a new "vue native" project. I didn't change anything in the default blank app.
I managed to run it on my android device, but impossible to run it on my browser.
I run "npm start" => "metro bundler" opens.
Then I click on "Run in web browser" and I get the error below :
Again, I didn't change anything. I just want to start the default app generated automatically when starting a new project.
Anyone already faced this problem?
Thank you
"This is a known issue, and it seems running vue-native app in web is not possible at the moment, because AppEntry.js tries to import ../../App. The default packager configuration specifies .json as a valid file extension. For some reason, in web, Expo seems to be looking for App.json and ignores App.vue."
https://github.com/GeekyAnts/vue-native-core/issues/268
See the official statement from vue-native creators 2020 7th of July:
"On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.
On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.
From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet.On iOS and Android, Metro is the only component required in the JS build pipeline. We have a custom transformer (in vue-native-scripts) which Metro uses to convert .vue files into equivalent React Native code, which then effectively gets piped into the default Babel transformer used by Metro (for .js) files.
On web, though, Webpack needs to be used for intermediate transformations so that the code can run on web. Metro is used here too, but not for the transformation.
From my findings, the Expo Webpack config uses the babel-loader for handling .js files. So we'd probably need a custom Webpack loader for .vue files (or maybe some other mechanism which can do the job). My guess is that the transformer exported by vue-native-scripts would help in making a loader. But the loader needs to meet the Webpack loader API requirements and expose raw, pitch etc. as described here. We haven't worked out the details of the implementation yet."
https://github.com/GeekyAnts/vue-native-core/issues/268#issuecomment-640222479
Good news that devices and on simulator running works with expo, and mostly vue-native was designed to run on mobile devices not on web :)
For the web you can have a similar codebase using vuejs.
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 would like to share my Vue js application project which is in my repository with a friend. So I used vue-cli, npm/yarn and webpack to develope.
I would like to know if he needs to install also cli to run the app on his computer, or just npm install and npm run? thanks
No, the vue-cli is not strictly necessary. However, if you're used to using vue build to build & run your app, your friend might want that too. He/she could just use some other way to run the webpack build operation if installing vue-cli isn't an option.
I want to create PDF's clientside (in the browser). I'm using WebPack to bundle my javascript application and npm to install the needed libraries. I've tried the following without success:
pdfmake
jspdf
pdfkit
Has anyone here gotten this setup to work with any of these (or some other) libraries? Mind sharing how?
You can use pdfmake-client which is a wrapper to the pdfmake library that serves the client build over npm.
In general pdfmake does have a client build but serves the node version over NPM, this is likely a good case for a PR for that project so it will serve the correct version.
I was able to get jspdf to work, but the version from npm didn't work.
First I ran npm install jspdf --save
Then I downloaded the the lastest code from https://github.com/MrRio/jsPDF
and ran npm run build
then I replaced node_modules\jspdf\dist\jspdf.min.js with the one I just built.
Then the following code worked
import jsPDF from 'jspdf';
var doc = new jsPDF();
doc.text(20, 20, 'Hello world.');
doc.save('Test.pdf');
I'm using webpack and nothing needed to be added to the config
More samples of usage can be found here: https://parall.ax/products/jspdf