Menu icon Foundation

My Posts

No Content

My Comments

Giuseppina De Guglielmo commented on Martin's post about 2 years

This is what solved my issue:
 
let webpackConfig = {
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
},
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: 'babel-loader'
}
]
}
]
}
}
in my gulpfile.babel.js file

Giuseppina De Guglielmo commented on Martin's post about 2 years

I found out where to put
let webpackConfig = {
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
}
and now everything is working, thank you very very much!

Giuseppina De Guglielmo commented on Martin's post about 2 years

I did this
npm install imports-loader
in the main root of my project. But I don't know where I should put these:
let webpackConfig = {
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
}
I don't have any webpack.config.js

Giuseppina De Guglielmo commented on Martin's post about 2 years

This is what I have
app.js
import $ from 'jquery';
import whatInput from 'what-input';

window.$ = $;
window.jQuery = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
// import './lib/foundation-explicit-pieces';

import libs from './lib/dependencies';
window.libs = libs;

libs.owl({
title: 'Error!',
text: 'Do you want to continue',
type: 'error',
confirmButtonText: 'Cool'
});

$(document).foundation();
config.yml
# Your project's server will run on localhost:xxxx at this port
PORT: 8000

Autoprefixer will make sure your CSS works with these browsers

COMPATIBILITY:
- "last 2 versions"
- "ie >= 9"
- "ios >= 7"

UnCSS will use these settings

UNCSS_OPTIONS:
html:
- "src/*/.html"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp .is-.*

Gulp will reference these paths when it copies files

PATHS:
# Path to dist folder
dist: "dist"

# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets//*"
- "!src/assets/{img,js,scss}/
/*"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
- "node_modules/owl.carousel/src/scss"
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/app.js"
dependencies.js
// custom dependencies
import Owl from 'owl.carousel';

const deps = {
Owl: Owl
};

module.exports = deps;
but I got this error:
TypeError: $ is undefined on line:
$.fn.owlCarousel = function (option) {
of my final compiled app.js
 
What am I doing wrong? Any help would be really appreciated.
Thanks,
G.

Giuseppina De Guglielmo commented on Martin's post about 2 years

Anyone solved it?  I have same issue with Owl Carousel 2
 
Thanks!

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Martin's post about 2 years

This is what solved my issue:
 
let webpackConfig = {
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
},
module: {
rules: [
{
test: /.js$/,
use: [
{
loader: 'babel-loader'
}
]
}
]
}
}
in my gulpfile.babel.js file

You commented on Martin's post about 2 years

I found out where to put
let webpackConfig = {
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
}
and now everything is working, thank you very very much!

You commented on Martin's post about 2 years

I did this
npm install imports-loader
in the main root of my project. But I don't know where I should put these:
let webpackConfig = {
resolve: {
alias: {
jquery: "jquery/src/jquery"
}
}
}
I don't have any webpack.config.js

You commented on Martin's post about 2 years

This is what I have
app.js
import $ from 'jquery';
import whatInput from 'what-input';

window.$ = $;
window.jQuery = $;

import Foundation from 'foundation-sites';
// If you want to pick and choose which modules to include, comment out the above and uncomment
// the line below
// import './lib/foundation-explicit-pieces';

import libs from './lib/dependencies';
window.libs = libs;

libs.owl({
title: 'Error!',
text: 'Do you want to continue',
type: 'error',
confirmButtonText: 'Cool'
});

$(document).foundation();
config.yml
# Your project's server will run on localhost:xxxx at this port
PORT: 8000

Autoprefixer will make sure your CSS works with these browsers

COMPATIBILITY:
- "last 2 versions"
- "ie >= 9"
- "ios >= 7"

UnCSS will use these settings

UNCSS_OPTIONS:
html:
- "src/*/.html"
ignore:
- !!js/regexp .foundation-mq
- !!js/regexp .is-.*

Gulp will reference these paths when it copies files

PATHS:
# Path to dist folder
dist: "dist"

# Paths to static assets that aren't images, CSS, or JavaScript
assets:
- "src/assets//*"
- "!src/assets/{img,js,scss}/
/*"
# Paths to Sass libraries, which can then be loaded with @import
sass:
- "node_modules/foundation-sites/scss"
- "node_modules/motion-ui/src"
- "node_modules/owl.carousel/src/scss"
# Paths to JavaScript entry points for webpack to bundle modules
entries:
- "src/assets/js/app.js"
dependencies.js
// custom dependencies
import Owl from 'owl.carousel';

const deps = {
Owl: Owl
};

module.exports = deps;
but I got this error:
TypeError: $ is undefined on line:
$.fn.owlCarousel = function (option) {
of my final compiled app.js
 
What am I doing wrong? Any help would be really appreciated.
Thanks,
G.

You commented on Martin's post about 2 years

Anyone solved it?  I have same issue with Owl Carousel 2
 
Thanks!

Posts Followed

Following

  • No Content

Followers

  • No Content