Chapters

21 Chapters | 2:10:39 |

01

Hello Webpack Encore

6:40
02

Webpacking our First Assets

5:27
03

Twig Helpers, entrypoints.json & yarn Scripts

4:04
04

Modules: require() & import()

4:57
05

Importing External Libraries & Global Variables

6:38
06

Bootstrap & the Curious Case of jQuery Plugins

6:05
07

The Magic of Split Chunks

6:06
08

Importing 3rd Party CSS + Image Paths

8:54
09

Sass & Overriding Bootstrap Variables

8:10
10

Copying Files

8:11
11

Page-Specific JS: Multiple Entries

7:36
12

Entry Refactoring

7:04
13

Refactoring Autocomplete JS & CSS

5:21
14

Auto-Provide jQuery for Mischievous Packages

6:37
15

addStyleEntry(): CSS-Only Entrypoint

3:51
16

Support any Browser with PostCSS & Babel

6:00
17

browserslist: What Browsers do you need to Support?

6:04
18

Polyfills & Babel

4:35
19

The Single Runtime Chunk

6:31
20

Async Imports

5:42
21

Production Build & Deployment

6:03

> JavaScript Frameworks & Tools > Webpack Encore: Frontend like a Pro!

Buy Access to Course

20.

Async Imports

|

Autoplay

Previous Chapter

Next Chapter

Login or register to check out the script

4 Comments

Sort By

Login or Register to join the conversation

halifaxious 6 years ago edited

I've been importing TinyMCE for all my forms and it works fine. But it's large so I thought I'd import it asynchronously instead. My async call is downloading the code and it's running <i>something</i> (because my textboxes disappear). But TinyMCE is no longer working. I think I'm calling it incorrectly. No matter what variation of tinyMCE + default that I try I get 'xxx is not a function'. Here is my code. I appreciate any guidance you can offer.

<b>components/inittinymce.js</b>
`
import $ from 'jquery';

import tinymce from 'tinymce';

import 'tinymce/themes/silver';
import 'tinymce-i18n/langs5/en_CA';
import 'tinymce-i18n/langs5/fr_FR';
import 'tinymce/plugins/lists';
//lots of plugins...
import 'tinymce/plugins/paste';

const mcelang = $('html').attr('lang') == 'en' ? 'en_CA': 'fr_FR';

//init tinymce object
tinymce.init({
selector: 'textarea.tinymce',
menubar: false,
plugins: [

'advlist autolink lists link image charmap ',
'searchreplace visualblocks',
'insertdatetime table paste'

],
toolbar: 'undo redo searchreplace paste | styleselect | bold italic charmap| alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image insertdatetime table ',
contextmenu: "link image imagetools table spellchecker",
language: mcelang

});

export default tinymce;
`

<b>form.js entrypoint with async import of TinyMCE</b>
`
import $ from 'jquery';
import '../../public/bundles/acrdutility/js/collection';
// import './components/inittinymce'; // removed in favour of async call

if($('textarea.tinymce').length>0){
import('./components/inittinymce').then((tinymce) => { tinymce.default.tinymce();}); //all variations of function name throw "no such function error"
}
`

|

Victor SFCASTS halifaxious 6 years ago edited

Hey halifaxious,

As a workaround, I think you can add an additional check in PHP or in your template and selectively include or not the TimeMCE. But what about your problem, not sure exactly. I'd recommend you to look into issues in their official github repo, probably someone already asked about it and know the solution. So, it works when you always load it? I mean, when your code is:


import $ from 'jquery';
import '../../public/bundles/acrdutility/js/collection'; 
import tinymce from './components/inittinymce'; // removed in favour of async call

tinymce();

If so, then inside your if statement the code should be like this:


if($('textarea.tinymce').length>0) {
    import('./components/inittinymce').then((tinymce) => {
        tinymce.default();
    }); //all variations of function name throw "no such function error"
}

i.e. instead of "tinymce.default.tinymce();" you need just "tinymce.default();". Or do you have a different working code when you TinyMCE in all cases? Then, what if you dump the "tinymce" variable in that then() callback? Something like this


if($('textarea.tinymce').length>0) {
    import('./components/inittinymce').then((tinymce) => {
        console.log(tinymce);

        tinymce.default.tinymce();
    }); //all variations of function name throw "no such function error"
}

What do you see in Console tab?

Also, I'd recommend you to wait until the page is loaded, i.e. do it inside of "$(document).ready()":


import $ from 'jquery';
import '../../public/bundles/acrdutility/js/collection'; 
// import './components/inittinymce'; // removed in favour of async call

$(document).ready(function() {
    if($('textarea.tinymce').length>0){
        import('./components/inittinymce').then((tinymce) => { tinymce.default.tinymce();}); //all variations of function name throw "no such function error"
    }
});

I hope this helps!

Cheers!

|

halifaxious Victor 6 years ago

Thanks Victor. I've fixed my code so that I call the correct function. But TinyMCE is still not initializing properly-- I get an invisible widget. I've submitted a bug report here, https://github.com/tinymce/.... It includes all my current code so hopefully the tinyMCE people will know what's going on. There didn't appear to be any other similar issues posted.

|

Victor SFCASTS halifaxious 6 years ago edited

Hey halifaxious ,

Good idea, thanks for the link to your issue, it might be helpful for other users.

Cheers!

|

This tutorial works great with Symfony5!

Symfony 4 Webpack Encore

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": "^7.1.3",
        "ext-iconv": "*",
        "aws/aws-sdk-php": "^3.87", // 3.91.4
        "composer/package-versions-deprecated": "^1.11", // 1.11.99
        "doctrine/annotations": "^1.0", // 1.10.1
        "doctrine/doctrine-bundle": "^1.6.10", // 1.10.2
        "doctrine/doctrine-migrations-bundle": "^1.3|^2.0", // v2.0.0
        "doctrine/orm": "^2.5.11", // v2.7.2
        "knplabs/knp-markdown-bundle": "^1.7", // 1.7.1
        "knplabs/knp-paginator-bundle": "^2.7", // v2.8.0
        "knplabs/knp-time-bundle": "^1.8", // 1.9.0
        "league/flysystem-aws-s3-v3": "^1.0", // 1.0.22
        "league/flysystem-cached-adapter": "^1.0", // 1.0.9
        "liip/imagine-bundle": "^2.1", // 2.1.0
        "nexylan/slack-bundle": "^2.0,<2.2.0", // v2.1.0
        "oneup/flysystem-bundle": "^3.0", // 3.0.3
        "php-http/guzzle6-adapter": "^1.1", // v1.1.1
        "phpdocumentor/reflection-docblock": "^3.0|^4.0", // 4.3.0
        "sensio/framework-extra-bundle": "^5.1", // v5.3.1
        "stof/doctrine-extensions-bundle": "^1.3", // v1.3.0
        "symfony/asset": "^4.0", // v4.2.5
        "symfony/console": "^4.0", // v4.2.5
        "symfony/flex": "^1.9", // v1.21.6
        "symfony/form": "^4.0", // v4.2.5
        "symfony/framework-bundle": "^4.0", // v4.2.5
        "symfony/property-access": "4.2.*", // v4.2.5
        "symfony/property-info": "4.2.*", // v4.2.5
        "symfony/security-bundle": "^4.0", // v4.2.5
        "symfony/serializer": "4.2.*", // v4.2.5
        "symfony/twig-bundle": "^4.0", // v4.2.5
        "symfony/validator": "^4.0", // v4.2.5
        "symfony/web-server-bundle": "^4.0", // v4.2.5
        "symfony/webpack-encore-bundle": "^1.4", // v1.5.0
        "symfony/yaml": "^4.0", // v4.2.5
        "twig/extensions": "^1.5" // v1.5.4
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.0", // 3.1.0
        "easycorp/easy-log-handler": "^1.0.2", // v1.0.7
        "fzaninotto/faker": "^1.7", // v1.8.0
        "symfony/debug-bundle": "^3.3|^4.0", // v4.2.5
        "symfony/dotenv": "^4.0", // v4.2.5
        "symfony/maker-bundle": "^1.0", // v1.11.5
        "symfony/monolog-bundle": "^3.0", // v3.3.1
        "symfony/phpunit-bridge": "^3.3|^4.0", // v4.2.5
        "symfony/stopwatch": "4.2.*", // v4.2.5
        "symfony/var-dumper": "^3.3|^4.0", // v4.2.5
        "symfony/web-profiler-bundle": "4.2.*" // v4.2.5
    }
}

What JavaScript libraries does this tutorial use?

// package.json
{
    "devDependencies": {
        "@symfony/webpack-encore": "^0.27.0", // 0.27.0
        "autocomplete.js": "^0.36.0",
        "autoprefixer": "^9.5.1", // 9.5.1
        "bootstrap": "^4.3.1", // 4.3.1
        "core-js": "^3.0.0", // 3.0.1
        "dropzone": "^5.5.1", // 5.5.1
        "font-awesome": "^4.7.0", // 4.7.0
        "jquery": "^3.4.0", // 3.4.0
        "popper.js": "^1.15.0",
        "postcss-loader": "^3.0.0", // 3.0.0
        "sass": "^1.29.0", // 1.29.0
        "sass-loader": "^7.0.1", // 7.3.1
        "sortablejs": "^1.8.4", // 1.8.4
        "webpack-notifier": "^1.6.0" // 1.7.0
    }
}

Previous Chapter

Next Chapter