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.
Related
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,
};
global.js
import Vue from 'vue'
// javascript import for when you're importing the css directly in your javascript
import "vue-navigation-bar/dist/vue-navigation-bar.css";
// import the library
import VueNavigationBar from "vue-navigation-bar";
Vue.component("vue-navigation-bar", VueNavigationBar);
nuxt.config.js
plugins: [
{ src: '~/plugins/global.js', ssr: false }
],
Error
window is not defined
I have tried all the possible solutions in nuxtjs documentation still getting same error.
Thanks!
The solution is to wrap it in <client-only>
<template>
<client-only>
<vue-navigation-bar :options="navbarOptions" />
</client-only>
</template>
I struggle to add a plugin in Nuxt.js. I have been looking to the doc and all kind of similar problems, but I got the same error: simpleParallax is not defined.
I tried different approach on all files
nuxt.config.js:
plugins: [
{src: '~/plugins/simple-parallax.js', mode:'client', ssr: false}
],
plugins/simple-parallax.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.use(new simpleParallax);
index.vue:
Export default {
plugins: ['#/plugins/simple-parallax.js'],
mounted() {
var image = document.getElementsByClassName('hero');
new simpleParallax(image, {
scale: 1.8
});
}
}
Error message:
ReferenceError: simpleParallax is not defined.
The best solution I found out so far is to register simpleParallax on the Vue prototype like so in a plugin nuxt file with the name simple-parallax.client.js:
import Vue from 'vue';
import simpleParallax from 'simple-parallax-js';
Vue.prototype.$simpleParallax = simpleParallax;
Also my nuxt.config.js file if anyone would like to verify that as well:
plugins: [
{src: '~/plugins/simple-parallax.client.js', mode: 'client', ssr: false}
],
I then have access to the plugin before instantiation in my case in the mounted life cycle of the primary or root component to grab the desired HTML elements and instantiate their individual parallax with the newly added global method this.$simpleParallax
For example I can then intiate a certain HTML element to have its parallax like so:
const someHTMLElement = document.querySelectorAll('.my-html-element');
const options = {...} // your desired parallax options
new this.$simpleParallax(someHTMLElement, options);
Actually you don't need to use plugin here.
Just import simpleParallax from 'simple-parallax-js' in your component and init it with your image in mounted hook.
index.vue:
import simpleParallax from 'simple-parallax-js'
export default {
...
mounted() {
// make sure this runs on client-side only
if (process.client) {
var image = document.getElementsByClassName('thumbnail')
new simpleParallax(image)
}
},
...
}
And don't forget to remove previously created plugin, it's redundant here.
I would like to use the icons from Octicon, my project is written in nuxt.js, so I decided to use this Octicon Component for Vue.js.
I created a file called octicon.js and added it to /plugins and registered it in nuxt.config.js. When I start my app, I get the message "unexpected identifier".
/plugins/octicion.js :
import Vue from 'vue'
import octicon from 'vue-octicon/components/Octicon.vue'
// Pick one way betweem the 2 following ways
// only import the icons you use to reduce bundle size
import 'vue-octicon/icons/repo'
// or import all icons if you don't care about bundle size
import 'vue-octicon/icons'
Vue.use(octicon);
In MyComponent.vue I use it like
<template>
<div>
<octicon name="repo-forked" label="Forked Repository"></octicon>
</div>
</template>
nuxt.config.js looks like
plugins: [
"#/plugins/bootstrap-vue",
"#/plugins/octicon.js"
],
My Browser shows me:
Where is my error?
Two things you probably need to do. The plugin is only required on the client side so you should specify this in nuxt.config.js:
plugins: [
"#/plugins/bootstrap-vue",
{ src: '~/plugins/octicon.js', mode: 'client' }
]
Secondly you may need to add it to the transpile build option, also in nuxt config.js:
build: {
transpile: ['octicon.js']
}
You may also want to wrap the <octicon> tag in a <no-ssr> tag.
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;",
}
}
}