I'm using Vite/Vue3 (TypeScript if that matters), and I'd like to use the following Vue2 component: https://github.com/tylerkrupicka/vue-json-component
After importing it with the following declaration:
import JSONView from 'vue-json-component'
and using it like so:
<JSONView:data="{foo:'bar',toto:'baz'}" root-key="root" class="tree" />
The following error is reported by Vite:
✘ [ERROR] No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"
node_modules/vue-json-component/dist/index.module.js:2:7:
2 │ import Vue from 'vue';
My understand is that Vite does not play well with Vue2. I've been trying to find a solution to declare Vue2 components, or "wrap" them to make them work with Vite/Vue3, without success.
I'd like to avoid forking the project if possible to rewrite it for Vue3.
Thanks
In your package.json, add the following:
"dependencies": {
- "vue": "^2.6.12",
+ "vue": "^3.1.0",
+ "#vue/compat": "^3.1.0"
...
},
"devDependencies": {
- "vue-template-compiler": "^2.6.12"
+ "#vue/compiler-sfc": "^3.1.0"
}
Related
I try to migrate a large existing codebase from Vue2 to Vue3 using Webpack. So I upgraded the necessary packages in package.json to looks like this (no problems here):
"vue": "^3.2.45",
"#vue/compat": "^3.2.45",
"#vue/cli-plugin-babel": "^5.0.8",
"#vue/cli-plugin-eslint": "^5.0.8",
"#vue/cli-plugin-typescript": "^5.0.8",
"#vue/cli-plugin-unit-jest": "^5.0.8",
"#vue/cli-service": "^5.0.8",
"#vue/compiler-sfc": "^3.2.0",
"vue-class-component": "^8.0.0-rc.1",
"vue-loader": "^17.0.1",
...
Now the Webpack build always fails with the error: "At least one template or script is required in a single file component.", no matter which single file component it tries to compile.
So I debugged the source of the error, which is the #vue\compiler-sfc\dist\compiler-sfc.cjs.js), and found out, that the the function parsing the component file gets called twice. First time with the actual code of my component, which works perfectly fine. Then a second time with an already compiled version which looks like this:
import { render } from "./deploymentInfos.vue?vue&type=template&id=1ced640a&ts=true"
import script from "./deploymentInfos.vue?vue&type=script&lang=ts"
export * from "./deploymentInfos.vue?vue&type=script&lang=ts"
import exportComponent from "\\node_modules\\vue-loader\\dist\\exportHelper.js"
const __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__file',"/deploymentInfos/deploymentInfos.vue"]])
/* hot reload */
if (module.hot) {
__exports__.__hmrId = "1ced640a"
const api = __VUE_HMR_RUNTIME__
module.hot.accept()
if (!api.createRecord('1ced640a', __exports__)) {
api.reload('1ced640a', __exports__)
}
...
Of course it fails to parse <script> and <template> from this and throws the error.
I assume I have some kind of misconfiguration but am not able to find it. Does anyone have clue where to look?
Solved ✓
The problem was that another webpack plugin also used the vue-loader. That was where the second call to parse the file came from.
So if you encounter the same error message, try checking your webpack config if there are multiple usages of vue-loader.
I installed a new package "vue-full-loading" to my project. It gives me an error if I reference the package
import loading from "vue-full-loading";
and build using vite. Any idea on what this error means ? Thank you!
Unexpected token.
if (isReadonly(target)) {
process.env.NODE_ENV !== 'production' && warn("Set operation on key \"".concat(key, "\"
failed: target is readonly."));
^
return;
}
Below are the dependencies I have.
"dependencies": {
"axios": "^1.1.3",
"bootstrap": "^5.2.2",
"bootstrap-vue": "^2.22.0",
"pinia": "2.0.23",
"vue": "3.2.41",
"vue-router": "4.1.5",
"vue-full-loading": "^1.2.1"
},
"devDependencies": {
"#vitejs/plugin-vue": "3.1.2",
"vite": "3.1.8"
}
vue-full-loader was last updated 5 years ago according to npm - it's highly unlikely it would be compatible with the latest version of Vue, which is what you're running. The package will likely have to be updated to use with Vue 3. If you have the option you may want to try it with an earlier version of Vue, but I would recommend looking for an alternative.
Here is a similar package that has been updated in the last month or so:
https://www.npmjs.com/package/vue-loading-overlay
As the title says, ESLint is complaining with this error message:
ESLint: Unable to resolve path to module '#vercel/analytics/react'.(import/no-unresolved)
In the line: import { Analytics } from '#vercel/analytics/react';
When following the instructions from this Vercel quickstart guide, using Next.js.
To sum up, the instructions are:
1- install package via NPM
npm install #vercel/analytics
2- in /pages/_app.tsx file, import it:
import { Analytics } from '#vercel/analytics/react';
function MyApp({ Component, pageProps }) {
return (
<>
<Component {...pageProps} />
<Analytics />
</>
);
}
export default MyApp;
My packages used:
"next": "^12.1.0",
"react": "17.0.2",
"#typescript-eslint/eslint-plugin": "^4.33.0",
"#typescript-eslint/parser": "^4.33.0",
"eslint": "^7.32.0",
"eslint-config-next": "^12.2.5",
"eslint-config-prettier": "^6.15.0",
"eslint-config-react-app": "^6.0.0",
"eslint-plugin-flowtype": "^5.10.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jest": "^24.7.0",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-react": "^7.27.0",
"eslint-plugin-react-hooks": "^4.3.0",
"eslint-plugin-testing-library": "^3.10.2",
The NPM package installed, has this folder structure:
/node_modules/#vercel
analytics/
dist/
react/
index.cjs
index.d.ts
index.js
index.cjs
index.d.ts
index.js
package.json
tsconfig.json
...
Notice how the path in node_modules actually is '#vercel/analytics/dist/react' rather than just '#vercel/anaylitics/react' as the instructions state to do in the code to use it.
But, when CTRL+click'ing on the variable imported Analytics, my IDE properly navigates me to the definition in node_modules, to the file #vercel/analytics/dist/react/index.d.ts, which is defined like so:
// ./node_modules/#vercel/analytics/dist/react/index.d.ts
// ...
declare function Analytics(props: AnalyticsProps): JSX.Element;
export { Analytics };
My ESLint config related to the import/ module is
settings: {
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
paths: ['src'],
},
},
},
If I import it as this instead:
import { Analytics } from '#vercel/analytics/dist/react'
then ESlint doesn't complain, but TSC does, with this error message:
TS2305: Module '"#vercel/analytics/dist/react"' has no exported member 'Analytics'.
Which also doesn't seem to make sense as the IDE is still finding the definition, and I can also see how the export { Analytics } line is there, so it should work...
What ESlint config or steps should I take differently to make this work without any lint/compiler errors?
When using eslint you will need to use the plugin: eslint-import-resolver-typescript with version 3.1.0 or later.
We also merged this version into eslint-config-next in this Pull Request. So this issue should also be resolved by upgrading to the latest package (13.0.4)
There is also a issue on our Github repo which with the solution: https://github.com/vercel/analytics/issues/18#issuecomment-1318424277
I have a question into vercel for a solution as I have the same issue. Probably to be expected since this is a beta product. I added the following line to my _app.js file in the meantime which allowed me to bypass the linting error and deploy to vercel. I have tested and the analytics is showing so must simply be a bug.
...
// eslint-disable-next-line import/no-unresolved
import { Analytics } from "#vercel/analytics/react";
...
Try this way
//tsconfig.json
"compilerOptions": {
"baseUrl": "./",
"paths": {
"#vercel/analytics/react": ["./node_modules/#vercel/analytics/dist/react"]
}
}
Stack:
Vue 3 (Options API)
Vite
TailwindCSS
Context:
I've been working on this app for months. If I changed something minor such as a computed property or style, the component would update but the page wouldn't. As of today, suddenly the entire app reloads on every save regardless of what changes, including adding a single whitespace which is removed via auto-format.
New Warning:
Component options are wraped by defineComponent() internally to
support intellisense on IDE for backward compatible, but this is
an hacking which lead to this component type inconsistent with
same script code on .js / .ts. Recommended wrap component options
by Vue.extends() or defineComponent(). Or you can configure
experimentalShamefullySupportOptionsApi: true / false in
vueCompilerOptions property in tsconfig / jsconfig to disable
this warning.
This warning seemingly came out of nowhere and I can't find any information about it online besides a reference to it in the newest Volar relase notes. I've tried downgrading to an older version and then disabling it entirely. This didn't work.
Config
// vite.config.js
import { defineConfig } from "vite";
import vue from "#vitejs/plugin-vue";
import path from "path";
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
"#": path.resolve(__dirname, "./src"),
},
},
});
Note that I use npm run serve which would normally be npm run dev. I swapped them because of muscle memory. This shouldn't be an issue but it's noteworthy.
// package.json
{
...
"scripts": {
"serve": "vite --host",
"build": "vite build",
"dev": "vite preview"
},
"dependencies": {
"#headlessui/vue": "^1.4.1",
"#heroicons/vue": "^1.0.4",
"#popperjs/core": "^2.11.0",
"#tailwindcss/forms": "^0.3.3",
"vue": "^3.2.6",
"vue-router": "^4.0.11",
"vuex": "^4.0.2",
"vuex-persist": "^3.1.3"
},
"devDependencies": {
"#vitejs/plugin-vue": "^1.6.1",
"#vue/compiler-sfc": "^3.2.6",
"autoprefixer": "^10.3.4",
"postcss": "^8.3.6",
"stylelint-config-recommended": "^6.0.0",
"tailwindcss": "^2.2.15",
"vite": "^2.5.4"
}
}
After several hours of debugging, it turns out that I had NODE_ENV=production leftover from testing last night.
you can try Temporarily disable Volar plugin, it won't show waining tip
I also encountered this problem, and then I disabled the volar plug-in so that there is no longer this warning message, but I do not know z there is no harm
Add the following entry to your project's jsconfig.json and you're good to go:
"vueCompilerOptions": {
"experimentalShamefullySupportOptionsApi": true
},
I think it's better than disabling Volar, especially if it's useful for you, because that's not a bug, but a new feature. Check out the changelog for more info:
https://github.com/johnsoncodehk/volar/blob/master/CHANGELOG.md
I'm using webpack and Vuejs. I have several components in my application, and I want to use momentjs globally. Everything I've tried so far doesn't seem to work and throws and Undefined error in console. Is there a way to get set moment.js globally available to all components from main.js using webpack?
These are the things I've tried (in main.js):
import moment from 'moment';
Vue.prototype.$moment = moment;
In a component I try to access it via this.$moment but get an undefined error.
I also tried:
import moment from 'moment';
Object.definePrototype(Vue.prototype, '$moment', { value: moment });
I also tried to access it via this.$moment, but get the same undefined error on this.$moment.
Am I missing a step or doing something wrong to include a javascript file globally to all components using webpack?
Thanks again for the help!
UPDATES
By the way, momentjs works fine if I import it in every component I want to use it in (as follows, however, this is what I'm trying to avoid):
import moment from 'moment';
...
let today_date = moment().format('YYYY-MM-DD');
UPDATES 2*
This is the exact error (with using this.):
Error in render function: "TypeError: Cannot read property '$moment' of undefined"
This is error (without using this.):
Error in render function: "ReferenceError: $moment is not defined"
Moment is added via dependencies in package.json:
...
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.0",
"css-loader": "^0.28.5",
"es6-promise": "^4.1.1",
"moment": "^2.18.1",
...
Code usage within a component:
...
filters: {
getYear(date) {
return this.$moment(date).format('YYYY');
},
getMonth(date) {
return this.$moment(date).format('MMM');
},
getDay(date) {
return this.$moment(date).format('D');
},
},
...