I'm a beginner with Symfony and I just finished my first website.
The website I built is based on Bootstrap and I'm using some jquery for additional js files I made.
I'm having some trouble with Webpack and Encore as neither my Bootstrap JS or jQuery are working.
I'm having no problem with my SCSS and my homemade js are working (except that they don't get jQuery).
What I did :
npm install --save-dev jquery
npm install --save-dev popper.js
npm install --save-dev bootstrap
In my webpack.config.js (Encore) :
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('js/ad', './assets/js/ad.js')
.addStyleEntry('css/app', './assets/css/app.scss')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.configureBabelPresetEnv((config) => {
config.useBuiltIns = 'usage';
config.corejs = 3;
})
.enableSassLoader()
I tried also with and without
.autoProvidejQuery()
In my app.js
import $ from 'jquery';
global.$ = global.jQuery = $;
import 'bootstrap';
In my base.html.twig
<script src="{{ asset('build/js/app.js') }}"></script>
When everything is fine, I'm finally running in the console
npm run dev
or
npm run build
After that, my js features are not working. On the pages requiring jQuery, I'm having an error in the console.
Uncaught ReferenceError: jQuery is not defined
at bootstrap-datepicker.min.js:7
at bootstrap-datepicker.min.js:7
book:94 Uncaught ReferenceError: $ is not defined
at book:94
I'm a bit lost and I don't know what to try.
If I manually add my js files without using Encore, everything works fine.
Thanks in advance for helping !
with the update encore you need to import the css and the jquery in your js like this
//your css files
import '../css/yourCss.css';
//jquery just the $ sign
const $ = require('jquery');
then you need to make one entry in your webpack config file like
//you have to make it one word like app, ad
.addEntry('ad', './assets/js/ad.js')
for using the js and css in your twig files you need to add the css with this builtin function of encore without the normal link tag just this line
{{ encore_entry_link_tags('ad') }} // ad = the entry name
for using java script you need to use this function
{{ encore_entry_script_tags('ad') }} // ad = the entry name
if you are using vs code i recommende to use this extension https://marketplace.visualstudio.com/items?itemName=nadim-vscode.symfony-extension-pack
with this extension you type just encorecss in your twig file and the extension will auto complete the function for you
Related
There maybe some documentation out there on how to deal with this situation but i don't even know how to look for it.
Here's the deal, we have a Symfony "module" (ex Bundle) company-made that we share across multiple projects. Atm it is not listed on packagist and we require it with local composer repository paths if that matters.
Inside the shared module we have some css and some js that needs to be included. Since one of those shared-module (or bundle, w/e you want to call it) has bootstrap (the css frontend toolkit) the module itself requires it together with his css.
Inside the shared module we have a JS file "CoreLibrary.js" and we import the required js like this:
import $ from 'jquery';
import 'bootstrap';
export class CoreLibrary {
... more code
}
Then, inside the main application we include the common js file from the app.js file like this:
import { CoreLibrary } from '../public/bundles/thebundlename/js/CoreLibrary';
That doesn't seem to be ideal, and beside that, with encore we have to repeat
import $ from 'jquery';
import 'bootstrap';
import { CoreLibrary } from '../public/bundles/thebundlename/js/CoreLibrary';
In every .js file we need. That's so much of a burden that I can't belive there are no better ways do to that.
Sidenote: not so long ago i had to even follow this one:
Yarn and Webpack Encore configuration in Symfony 4.1 project because i was getting error during "yarn watch".
What is the correct way of doing it with company-shared module that requires 3rd party library like bootstrap?
For global jquery i have this in main js file
const $ = require('jquery');
global.$ = global.jQuery = $;
Also uncommented line in webpack config about jquery.
This is a non-jQuery version of IonRangeSlider (https://github.com/IonDen/ion.rangeSlider):
https://github.com/keisto/vanilla-rangeslider
I have used this before by trying to stick to pure JS and avoid adding another layer with JQ.
I installed this via yarn and it's in my node_modules folder.
I added this to my app/javascript/application.js file:
import IonRangeSlider from 'vanilla-rangeslider/js/rangeslider'
after also trying just:
import IonRangeSlider from 'vanilla-rangeslider'
In my compiled JS file in dev all it has is this:
// ../../node_modules/vanilla-rangeslider/js/rangeslider.js
var require_rangeslider = __commonJS({
"../../node_modules/vanilla-rangeslider/js/rangeslider.js"() {
}
});
and if I try and initialize a slider all I get is:
Uncaught ReferenceError: ionRangeSlider is not defined
Any ideas here as to what I am missing? I have added some other yarn based JS package with no issues.
The range slider has no exported functions, meaning you won't be able to import anything from it.
The only way to use its functions would be to add it in a script tag unfortunately.
As an exercise in learning Typescript, I am converting the javascript for a current project.
The project is served with flask, and edited with VSCode. I would very much like to use Typescript on the javascript parts, mostly for the improved intellisense and type checking in VSCode.
I have #types/jquery installed through npm, and if I have import $ from "jquery" in my .ts file then all is well, no errors in VSCode. But when I compile the code with tsc and run the site in chrome, the import $ from "jquery" in my javascript code gives a 'Failed to resolve module specifier "jquery"' in the chrome console. If I comment out that javascript line, no errors.
So, my question is: how do you use Typescript with an external library, loaded from CDN with a script tag, without getting import errors in your complied javascript code?
It seems like there should be a better way than going back through all my compiled code and commenting out the imports for the external libraries.
# This code looks the same in both the.ts and.js file,
# but it gives a 'Failed to resolve module specifier "jquery"'
# error when the .js is run in my project.
# If I comment out the import in the .ts file,
# the .ts has error -Cannot find name '$'- and will not compile.
# If I comment out the import in the compiled .js file, the page loads fine.
import $ from "jquery"
function foo() {
$('#some-element')
}
<!-- jquery is loaded from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
first install jquery through npm:
npm i jquery
and then
import $ from "jquery";
and use it
How to compile Simditor with Webpack?
I'm trying to compile Simditor using Laravel Mix, But I'm getting the following error:
Uncaught TypeError: Simditor.connect is not a function
Here is my js file:
window.$ = window.jQuery = require('jquery');
import 'simple-module';
import 'simditor';
$(document).ready(function () {
$('.input.text-editor').each(function () {
var editor = new Simditor({
textarea: $(this).find('textarea')
});
});
});
Any ideia why I'm getting this error?
Editor website: simditor.tower.im
I tried several versions of simditor with webpack installation, one of it worked, after version 2.3.22, JS library directories of simditor and all dependencies become different than previous versions.
Here are my steps:
Install simditor at the version 2.3.22 with webpack(Run yarn add simditor#2.3.22 in Rails 6)
import 'simple-module';
import 'simple-hotkeys';
import 'simple-uploader';
import Simditor from 'simditor';
It works!
I just found it out, that you cannot build that library with webpack, you need to download the library and include the files separately to html.
Tried all, and btw You need to include
mobilecheck.js
jquery.min.js
module.js
hotkeys.js
simditor.js
For this library to work!
I was using Symfony webpack encore.
I have an Angular 2 app using Typescript. I want to use jQuery's $ for a variety of tasks such as
$(document).ready(function(){ // throwing error: "[ts] Cannot find '$'. any"
console.log("loaded up!");
$("#main_div").niceScroll();
})
I have imported the jQuery.min.js file into my app via index.html like so:
<script src="app/libs/jquery.min.js"></script>
However, I have not imported anything into the app.component.ts file in regards to the jQuery code. Is it necessary, and if so, how do I import it?
import { GenericService } from './services/Generic.service'; // did not do this
import $ from './libs/jquery.min.js'; // tried this but does not work
Surprisingly, my code worked yesterday as I was developing, but not today when I ran npm start. Could anyone help me out with this import process?
Simply do a
typings install jquery --ambient --save
to install the type definition file. Remove the import $ from './libs/jquery.min.js'; and add a reference to the d.ts file at the top of your app.component.ts like so:
/// <reference path="../typings/jquery.d.ts"/>
Since you're already loading the Javascript file in your index you only need the typings for it, so TypeScript knows, that those names and methods of jQuery exist.
Just add Jquery with typings :
typings install jquery --ambient --save
Then in your index :
<script src="bower_components/jquery/dist/jquery.min.js"></script>
And normally typescript will do the job :)