I was running ionic serve in local computer and got following error
compilation error
It was working fine earlier, also I didn't make any changes to code whatsoever. I don't understand what is causing this error.
I tried following
Freshly clone project from git repo
Re-install npm dependencies
Un-install and re-install ionic globally
None of the above methods worked.
Looking at the error log, which say:
You may need an appropriate loader to handle this file type.
You need to add vue-loader to your webpack configuration. You can find an example of such an integration here:
https://github.com/vuejs-templates/webpack-simple
Someone said here "You may need an appropiate loader to handle this file type" webpack and vue that he solved the problem by downgrading vue-loader using:
npm install vue-loader#14 --save-dev.
Apparently v15 has some issues.
I suggest you to look in this posts:
Error: "You may need an additional loader to handle the result of these loaders."
"You may need an appropiate loader to handle this file type" webpack and vue
Vue Render HTML - You may need an additional loader to handle the result of these loaders
Vue - You may need an additional loader to handle the result of these loaders
Solved this bug,
One of the components contained lang typescript where as ionic system is using javascript.
SignIn Component:
<script lang="ts">
//logic
</script>
I just removed lang and ionic compiled files properly.
Earlier versions didn't track this error.I recently upgraded ionic version to 6.17.1.
Related
I have a fresh project which I created using the vue command line tool. vue create . But when I type npm serve, the component import is highlighted as red. This is a fresh creation of the project, I haven't changed anything.
Cannot find module '#/components/HelloWorld.vue' or its corresponding type declarations.Vetur(2307).
The error message indicates you're using Vetur, which is likely the cause of the problem.
From Vue docs:
ℹ️ TIP
Volar replaces Vetur, our previous official VSCode extension for Vue 2. If you have Vetur currently installed, make sure to disable it in Vue 3 projects.
This also applies to Vue 2 projects. Disabling Vetur and enabling Volar should resolve the issue.
If you using Vue 3 , it's better to use Volar extenstion.
I am using a third party component (vue-image-lightbox) which currently has a bug. I cloned the repo and made the change and want to deploy it with my app to see if it fixes the issue. To do this I installed yalc.
In the component project (vue-image-lightbox) I ran
npm run build
yalc publish
My understanding is that this places my vue-image-lightbox into the yalc store.
Next, I went to my dependent project and ran
npm uninstall vue-image-lightbox (remove the existing component)
yalc add vue-image-lightbox. This creates
a) .yalc directory with the deployed component
b) adds entry to package.json : "vue-image-lightbox": "file:.yalc/vue-image-lightbox",
run npm install to pick up any dependencies
After this I ran my app and went to the component that uses vue-image-lightbox. In the console I not get the warning
"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
All of the registration code works without issue with the git installed component. I don't understand why I see this when I try to use yalc.
The component is registered locally with
import LightBox from 'vue-image-lightbox'
components: { LightBox }
I would love to know what is different about the yalc installed component that is causing this issue. Is there a better way to test out patches on third party components other than yalc?
Thanks!
I installed vuetify using the command vue add vuetify, but an error as below occurred because I didn't create the project using vue create <project>, instead, I used vue init <template> <project>.
Then, my project cannot run anymore. When I issued npm start, tons of errors occurred. The screenshot below is one of them:
Could someone teach me how to recover from these errors? Can I remove this plugin?
Or did it just destroy my project and I have to create a new one and start from scratch again?
Thanks
You can try
npm uninstall vue-cli-plugin-vuetify
removes veutify as a dependency
Cross verify in `package.json' file
I'm working on putting together a small app using vue, and I specifically need it to run on a device that does not support ES6. I'm using vue-cli-service build to build, and when trying to open this page on my ES5 device, I'm seeing this error SyntaxError: Unexpected token '...'. Expected a property name.
I have installed babel, and added this to my .babelrc: { "presets": ["#babel/preset-env"] }
I'm not really sure what else to try, I haven't been able to find anything that specifically addresses this. Even the vue-cli-service documentation suggests ways to support polyfill for ES5, but I don't think this is the same thing.
I had this problem with Vuetify and Safari 11.1
I guessed I needed to transpile the ES6 version of Vuetify for older browsers. The solution was difficult to search for, as most of the suggestions were about modifying webpack or babel configuration, which I find obscured inside Vue CLI.
I eventually uncovered the solution myself by rebuilding my project from scratch via Vue CLI, and the installer magically added a transpilation option for Vuetify which I was missing - I think because I had previously upgraded Vuetify across the ES5 to ES6 versions, and perhaps their upgrade script doesn't perform this step.
vue.config.js
module.exports = {
"transpileDependencies": [
"vuetify"
],}
this is the equivalent of webpack
build: {
transpile: ['vuetify']
}
Restart the build and reload.
Of course you will need to find which of your packages it is - this is just an example. I just dug around in the error stack until finding something which belonged to Vuetify.
I am trying to use select2 version 4.0 in an ampersand-js app - as such that means I am using npm and browserify.
Unfortunately I cannot get select2 to load up.
the js file is being loaded up without error, since I can add a few console.log statements in relevant places and see them output,
but when I try to use select2 I'm getting told it's not defined.
Uncaught TypeError: $(...).select2 is not a function
Here's what I'm trying to do.
var $ = require('jquery');
require('Select2');
$('select').select2();
I have a feeling the issue comes from this line in the select2.js https://github.com/select2/select2/blob/4.0.0/dist/js/select2.js#L14
Specifically that it calls factory(require('jquery')); hence I believe that select2 is loading into a copy of jQuery that is then thrown away?
I found this issue which sounds like it's about the same thing, except I cannot get it to work either: npm browserify version of jquery-select2 version 4.x
So my train of thought was almost correct - it was loading select2 onto the wrong copy of jQuery.
There was two versions of jQuery being loaded.
In my package.json I had listed jQuery as a dependancy, however I wa also loading in the bower version of jQuery via the browser: {"jquery: "./bower_components/.../jquery.js"} key.
It seems that anything outside of the node_modules directory likely uses the "browser" defined module, whereas anything inside the node_modules directory will use the npm loaded module.
Basically, if something similar happens double check that you're not loading in two copies of libraryX.