Right now we are trying to migrate a Vue 3 Project to Nuxt 3. The biggest problem seems to be with Vite not playing well with vue-property-decorator and vue-class-component.
Here is the Stacktrace:
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-class-component.js?v=3aa03c90 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-class-component.js?v=3aa03c90 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-class-component.js?v=3aa03c90 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-class-component.js?v=3aa03c90 optimized info should be defined (repeated 15 times) 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-property-decorator.js?v=fa0bd1c9 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-property-decorator_lib_decorators_Prop.js?v=b3537fa3 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-property-decorator_lib_decorators_Prop.js?v=b3537fa3 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-property-decorator_lib_decorators_Prop.js?v=b3537fa3 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-property-decorator.js?v=fa0bd1c9 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-property-decorator_lib_decorators_VModel.js?v=fc5ecfd2 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/vue-property-decorator_lib_decorators_VModel.js?v=fc5ecfd2 optimized info should be defined 09:52:30
ERROR Vite Error, /_nuxt/node_modules/.vite/deps/leaflet.js?v=10c8e59f optimized info should be defined
and also it cannot find something in downloaded modules:
ERROR 09:52:30 [vite] error while updating dependencies: 09:52:30
Error: Build failed with 2 errors:
node_modules/vue-property-decorator/lib/index.js:3:7: ERROR: No matching export in "node_modules/vue/dist/vue.runtime.esm-bundler.js" for import "default"
node_modules/vue-property-decorator/lib/index.js:4:7: ERROR: No matching export in "node_modules/vue-class-component/dist/vue-class-component.esm-bundler.js" for import "default"
at failureErrorWithLog (*path-to-project*\node_modules\esbuild\lib\main.js:1624:15)
at *path-to-project*\node_modules\esbuild\lib\main.js:1266:28
at runOnEndCallbacks (*path-to-project*\node_modules\esbuild\lib\main.js:1046:63)
at buildResponseToResult (*path-to-project*\node_modules\esbuild\lib\main.js:1264:7)
at *path-to-project*\node_modules\esbuild\lib\main.js:1377:14
at *path-to-project*\node_modules\esbuild\lib\main.js:678:9
at handleIncomingPacket (*path-to-project*\node_modules\esbuild\lib\main.js:775:9)
at Socket.readFromStdout (*path-to-project*\node_modules\esbuild\lib\main.js:644:7)
at Socket.emit (node:events:527:28)
at Socket.emit (node:domain:475:12)
Here is nuxt.config.js:
export default defineNuxtConfig({
vite: {
css: {
preprocessorOptions: {
scss: {
additionalData: `#import "./assets/scss/globals.scss";`
}
}
}
}
});
and Here is an example of how we've been writing components:
<template>
<header>
<MenuButton v-model:isOn="menuOpen"></MenuButton>
<HeaderNav v-model:isOpen="menuOpen"></HeaderNav>
</header>
</template>
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import MenuButton from "./MenuButton.vue";
import HeaderNav from "./HeaderNav.vue";
#Options({
components: { MenuButton, HeaderNav }
})
export default class Header extends Vue {
menuOpen = false;
}
</script>
<style scoped lang="scss">
header {
position: absolute;
display: flex;
top: 0;
left: 0;
right: 0;
}
</style>
And here is the File structure
Related
I am using Vue 3 and added highchartsjs according to the docs. I am getting this error:
✘ [ERROR] Could not resolve "highcharts"
node_modules/highcharts-vue/dist/highcharts-vue.min.js:1:90:
1 │ ...?module.exports=e(require("highcharts"),require("vue")):"functio...
╵ ~~~~~~~~~~~~
You can mark the path "highcharts" as external to exclude it from the bundle,
which will remove this error. You can also surround this "require" call with a
try/catch block to handle this failure at run-time instead of bundle-time.
I tried excluding it from bundle as suggested but it's not working:
vite.config.js
export default defineConfig({
...
build: {
rollupOptions: {
external: ['highcharts'],
}
},
})
This works:
export default defineConfig({
...
optimizeDeps: {
exclude: ['highcharts'],
}
})
Excluding highcharts via optimizeDeps.exclude would clear the error, but that would defeat your ultimate goal of using highcharts in your project. You'll notice that after using that config, your project still is not able to import highcharts. The error is indicating that your project is missing that dependency.
The solution would be to install highcharts:
npm install -S highcharts
demo
I've created a brand new project with npm init vite bar -- --template vue. I've done an npm install web3 and I can see my package-lock.json includes this package. My node_modules directory also includes the web3 modules.
So then I added this line to main.js:
import { createApp } from 'vue'
import App from './App.vue'
import Web3 from 'web3' <-- This line
createApp(App).mount('#app')
And I get the following error:
I don't understand what is going on here. I'm fairly new to using npm so I'm not super sure what to Google. The errors are coming from node_modules/web3/lib/index.js, node_modules/web3-core/lib/index.js, node_modules/web3-core-requestmanager/lib/index.js, and finally node_modules/util/util.js. I suspect it has to do with one of these:
I'm using Vue 3
I'm using Vue 3 Composition API
I'm using Vue 3 Composition API SFC <script setup> tag (but I imported it in main.js so I don't think it is this one)
web3js is in Typescript and my Vue3 project is not configured for Typescript
But as I am fairly new to JavaScript and Vue and Web3 I am not sure how to focus my Googling on this error. My background is Python, Go, Terraform. Basically the back end of the back end. Front end JavaScript is new to me.
How do I go about resolving this issue?
Option 1: Polyfill Node globals/modules
Polyfilling the Node globals and modules enables the web3 import to run in the browser:
Install the ESBuild plugins that polyfill Node globals/modules:
npm i -D #esbuild-plugins/node-globals-polyfill
npm i -D #esbuild-plugins/node-modules-polyfill
Configure optimizeDeps.esbuildOptions to use these ESBuild plugins.
Configure define to replace global with globalThis (the browser equivalent).
import { defineConfig } from 'vite'
import GlobalsPolyfills from '#esbuild-plugins/node-globals-polyfill'
import NodeModulesPolyfills from '#esbuild-plugins/node-modules-polyfill'
export default defineConfig({
⋮
optimizeDeps: {
esbuildOptions: {
2️⃣
plugins: [
NodeModulesPolyfills(),
GlobalsPolyfills({
process: true,
buffer: true,
}),
],
3️⃣
define: {
global: 'globalThis',
},
},
},
})
demo 1
Note: The polyfills add considerable size to the build output.
Option 2: Use pre-bundled script
web3 distributes a bundled script at web3/dist/web3.min.js, which can run in the browser without any configuration (listed as "pure js"). You could configure a resolve.alias to pull in that file:
import { defineConfig } from 'vite'
export default defineConfig({
⋮
resolve: {
alias: {
web3: 'web3/dist/web3.min.js',
},
// or
alias: [
{
find: 'web3',
replacement: 'web3/dist/web3.min.js',
},
],
},
})
demo 2
Note: This option produces 469.4 KiB smaller output than Option 1.
You can avoid the Uncaught ReferenceError: process is not defined error by adding this in your vite config
export default defineConfig({
// ...
define: {
'process.env': process.env
}
})
I found the best solution.
The problem is because you lose window.process variable, and process exists only on node, not the browser.
So you should inject it to browser when the app loads.
Add this line to your app:
window.process = {
...window.process,
};
i am trying to work on an opensource software for NLP named doccano,i tried running only the frontend part where i ran the command npm install to get all needed dependencies then when i run npm run dev it starts compiling and then fails with this error
/home/nissow/Documents/doccano/doccano/frontend/components/project/FormDelete.vue
33:14 error PropType not found in 'vue' import/named
and when i checked the FormDelete.vue i did not notice any errors and no errors were detected on vscode either
<script lang="ts">
import Vue,{ PropType } from 'vue'
import BaseCard from '#/components/utils/BaseCard.vue'
import { ProjectDTO } from '~/services/application/project/projectData'
export default Vue.extend({
components: {
BaseCard
},
props: {
selected: {
type: Array as PropType<ProjectDTO[]>,
default: () => []
}
},
computed: {
nonDeletableProjects(): ProjectDTO[] {
return this.selected.filter(item => !item.current_users_role.is_project_admin)
},
hasNonDeletableProjects(): boolean {
return this.nonDeletableProjects.length > 0
}
}
})
</script>
here's package.json content :
and here's the second part
import type { PropType } from 'vue'
see detail https://github.com/nuxt-community/composition-api/issues/189
It was also a problem elsewhere.
Sounds like a known bug in eslint and typescript. It doesn't seem to cause an error depending on the version.
https://github.com/nuxt-community/composition-api/issues/189
i just made it work, by installing yarn and then running, yarn dev as it was suggested in the README.MD the first time i was doing it with npm run dev.
Trying to use Laravel Mix to include node_modules for my application. Not very experienced with this
I'm trying to include sticky.js but keep getting the message in console:
Uncaught ReferenceError: Sticky is not defined
Here is my webpack file:
const mix = require('laravel-mix');
mix.js('resources/js/vendor.js', 'public/js')
.combine([
'resources/js/appOptions.js',
'resources/js/scripts.bundle.js',
], 'public/js/scripts.bundle.js')
.copy('resources/js/pages/*.js', 'public/js/pages')
.copy('resources/js/plugins/', 'public/js/plugins')
.sass('resources/sass/vendor.scss', 'public/css/')
.copy('resources/css/style.bundle.css', 'public/css')
.copy('resources/css/app.css', 'public/css')
.copy('resources/css/pages/*.css', 'public/css/pages')
.webpackConfig({
resolve: {
modules: [
'node_modules'
],
alias: {
jquery: 'jquery/src/jquery'
}
}
});
if (mix.inProduction()) {
mix.version();
mix.disableNotifications();
}
My vendor.js file:
import 'bootstrap';
import 'sticky-js';
import 'moment';
import 'moment-timezone';
import 'jquery-validation';
and scripts.blade.php file which is called in other blade files:
<script src="{{ mix('/js/vendor.js') }}"></script>
<script src="{{ mix('/js/scripts.bundle.js') }}"></script>
I've checked to see if jQuery is loading and it appears to be, given i also get the following message:
jQuery.Deferred exception: Sticky is not defined ReferenceError: Sticky is not defined
Any help here would be appreciated.
Try to assign it to global object like below:
window.Sticky = require('sticky-js');
PS:
I don't see any jQuery inclusion in your vendor. Try to add this to your vendor.js
window.$ = window.jQuery = require('jquery');
Make sure you've included jquery and sticky as dependency in your package.json.
I've created a Nuxt app with Bulma included and would like to access/override the Bulma variables in my .vue files. I've followed the instructions here which seem to match what I found in several other locations but I'm still getting an error when trying to access the $primary variable in my .vue file.
Here's my assets/css/main.scss file:
#import "~bulma/sass/utilities/_all.sass";
#import "~bulma/bulma";
My nuxt.config.js modules section:
modules: [
['nuxt-sass-resources-loader', './assets/css/main.scss']
],
And my .vue file:
<template>
<section class="container">
<div class="my-title">
About
</div>
</section>
</template>
<script>
export default {
};
</script>
<style lang="scss">
.my-title {
color: $primary;
}
</style>
Here's the error message in the terminal:
Module build failed (from ./node_modules/sass-loader/lib/loader.js): friendly-errors 11:51:52
color: $primary;
^
Undefined variable: "$primary".
in /Data/dev/GIT/Homepage/source/pages/about/index.vue (line 16, column 12)
friendly-errors 11:51:52
# ./node_modules/vue-style-loader??ref--9-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--9-oneOf-1-2!./node_modules/sass-loader/lib/loader.js??ref--9-oneOf-1-3!./node_modules/vue-loader/lib??vue-loader-options!./pages/about/index.vue?vue&type=style&index=0&lang=scss& 4:14-384 14:3-18:5 15:22-392
# ./pages/about/index.vue?vue&type=style&index=0&lang=scss&
# ./pages/about/index.vue
# ./.nuxt/router.js
# ./.nuxt/index.js
# ./.nuxt/client.js
# multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js
Can anyone see what I'm doing wrong?
UPDATE: I've narrowed it down to the nuxt.config.js modules setup by importing the .scss directly in the .vue file. This works which tell me the imports in the main.scss the file is working fine.
Okay, I wasn't able to get it working with nuxt-sass-resources-loader but I did get it working with style-resources-module from here https://github.com/nuxt-community/style-resources-module. Once I installed style-resources-module, I just added it to my nuxt.config.js modules section and added the appropriate styleResources section as follows:
modules: [
'#nuxtjs/style-resources'
],
styleResources: {
scss: [
'./assets/css/main.scss'
]
},
This config options provides to load any scss/sass file that specified by you before other files via webpack. You can interfere webpack config via these options that provide by nuxt. To experience more sass loader configuration you can check webpack sass loader section.
Don't forget install node-sass and sass-loader to use sass/scss file
in your app as mentioned by nuxt documentation.
// nuxt.config.js
build: {
loaders: {
sass: {
prependData: "#import '~bulma/sass/utilities/_all.sass;",
}
}
}