Chapters

23 Chapters | 2:07:02 |

01

A World without Build Systems?

4:04
02

Doing Modern JS Right in your Browser

7:41
03

Installing AssetMapper

3:03
04

Mapping Assets

6:01
05

CSS & Background Images

3:26
06

3rd Party CSS

6:09
07

Adding Fonts

3:02
08

Tailwind CSS

5:47
09

JavaScript & importmap

7:38
10

importmap:require - 3rd Party JS Libs

5:07
11

Importing Specific Package Files

4:54
12

Adding Stimulus

8:04
13

Symfony UX Stimulus Packages

4:00
14

Lazy Stimulus Controllers

2:28
15

Debugging

5:12
16

Page-Specific CSS & JS

5:05
17

Excluding Files

3:53
18

Deploying to Platform.sh

6:29
19

Configuring the Platform.sh Deploy

9:08
20

Deploying the Assets

5:04
21

Long-Term Caching, Compression & File Combining

5:27
22

Optimizing & Profiling

6:06
23

Preloading

9:14

> Symfony > AssetMapper: Modern JS with Zero Build System

Buy Access to Course

11.

Importing Specific Package Files

|

|

Autoplay

Keep on Learning!

If you liked what you've learned so far, dive in! Subscribe to get
access to this tutorial plus video, code and script downloads.

Start your All-Access Pass

Buy just this tutorial for $12.00

Previous Chapter

Next Challenge

With a Subscription, click any sentence in the script to jump to that part of the video!

Login Subscribe

Login or register to check out the script

8 Comments

Sort By

Login or Register to join the conversation

Oliver-K 1 year ago

Hi,
I have trouble getting run a specific library. It is vis-timeline that can be accessed via jsdelivr.com.
Here is what I did:

First I installed vis-timeline via php/bin importmap:require vis-timeline which gives me 3 items:

    'vis-timeline' => [
        'version' => '7.7.3',
    ],
    'moment' => [
        'version' => '2.29.4',
    ],
    'vis-data/peer/esm/vis-data.js' => [
        'version' => '7.1.9',
    ],

So that seemed to be successful.
Now I want to use the libraries in one of my stimulus controllers:

import { Controller } from '@hotwired/stimulus';
import { Timeline } from 'vis-timeline/Timeline';
import { DataSet } from 'vis-data/DataSet';
import $ from 'jquery';

export default class extends Controller {
    connect() {
        var container = document.getElementById('visualization');

        // Create a DataSet (allows two way data-binding)
        var items = new vis.DataSet([
            {id: 1, content: 'item 1', start: '2014-04-20'},
            {id: 2, content: 'item 2', start: '2014-04-14'},
            {id: 3, content: 'item 3', start: '2014-04-18'},
            {id: 4, content: 'item 4', start: '2014-04-16', end: '2014-04-19'},
            {id: 5, content: 'item 5', start: '2014-04-25'},
            {id: 6, content: 'item 6', start: '2014-04-27', type: 'point'}
        ]);

        // Configuration for the Timeline
        var options = {};

        // Create a Timeline
        var timeline = new vis.Timeline(container, items, options);
        ...
    };

However I run into errors:

Uncaught TypeError: The specifier "vis-data" was a bare specifier but was not mapped to anything new. Relative module specifiers must start with "./", "../", or "/". timeline_controller.js:4:25

So whats missing or what do I wrong?
Thanks for any help here.
Oliver

|

Victor SFCASTS Oliver-K 1 year ago edited

Hey Oliiver,

I personally haven't used this library, can't say much about it. But it seems like you're trying to import it incorrectly. Maybe try this way:

import { Controller } from '@hotwired/stimulus';
import { Timeline } from 'vis-timeline';
import { DataSet } from 'vis-data';
import $ from 'jquery';

I wonder if it works this way, though it's mentioned as a legacy way, so probably there should be a better way. I also see it's imported as vis-data/peer so probably you should import it that Peer way? See the docs: https://github.com/visjs/vis-timeline?tab=readme-ov-file#peer-build

I hope that helps!

Cheers!

|

Oliver-K Victor 1 year ago

Hi Victor,
thanks for your reply.
I figured out what the problem was. First I wondered why vis-data throwed the error but not vis-timeline. I removed all references to vis-data and then the error was gone. So I assumed that vis-timeline was importing correctly.
Then I checked importmap again and saw something interesting.
I used only one importmap:require vis-timeline, which imported three things:

vis-timeline
vis-data
moment

In importmap I saw the following

    'vis-timeline' => [
        'version' => '7.7.3',
    ],
    'moment' => [
        'version' => '2.30.1',
    ],
    'vis-data/peer/esm/vis-data.js' => [
        'version' => '7.1.9',
    ],

So with that I concluded that I need to import 'vis-data/peer/esm/vis-data.js' and not something else.
And "tada" the error was gone.
I am not at the end. There is a subsequent error I need to take care of, but the initial error is gone, which seems, that the libs are loaded correctly.
Thank you

Oliver.

PS:
I might come back, if I need help with the next error.

1 |

Oliver-K Oliver-K 1 year ago edited

Latest update:
remove all vis-timeline related libs
add vis-timeline/standalone

php bin/console importmap:require vis-timeline/standalone

Use the following imports:

import { Timeline, DataSet } from 'vis-timeline/standalone';

1 |

Victor SFCASTS Oliver-K 1 year ago

And thanks for sharing the final solution with others!

Cheers!

|

Victor SFCASTS Oliver-K 1 year ago

Hey Oliver,

Good thinking! I'm glad you were able to fix that, indeed it makes sense to include that path that exists after you install the package, good job!

Cheers!

|

timm 1 year ago

i have a big Problem: how to install opencv.js ? thats not possible at my projects

|

sadikoff timm 1 year ago edited

What about php bin/console importmap:require opencv.js ? Does it work?

Cheers!

|

This tutorial is built on Symfony 6 but works great on Symfony 7!

Symfony 6.3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.2",
        "ext-ctype": "*",
        "ext-iconv": "*",
        "babdev/pagerfanta-bundle": "^4.0", // v4.2.0
        "doctrine/doctrine-bundle": "^2.7", // 2.10.0
        "doctrine/doctrine-migrations-bundle": "^3.2", // 3.2.4
        "doctrine/orm": "^2.12", // 2.15.2
        "knplabs/knp-time-bundle": "^1.18", // v1.20.0
        "pagerfanta/doctrine-orm-adapter": "^4.0", // v4.1.0
        "pagerfanta/twig": "^4.0", // v4.1.0
        "stof/doctrine-extensions-bundle": "^1.7", // v1.7.1
        "symfony/asset": "6.3.*", // v6.3.0
        "symfony/asset-mapper": "6.3.*", // v6.3.0
        "symfony/console": "6.3.*", // v6.3.0
        "symfony/dotenv": "6.3.*", // v6.3.0
        "symfony/flex": "^2", // v2.3.1
        "symfony/framework-bundle": "6.3.*", // v6.3.0
        "symfony/http-client": "6.3.*", // v6.3.0
        "symfony/monolog-bundle": "^3.0", // v3.8.0
        "symfony/proxy-manager-bridge": "6.3.*", // v6.3.0
        "symfony/runtime": "6.3.*", // v6.3.0
        "symfony/stimulus-bundle": "^2.9", // v2.9.1
        "symfony/twig-bundle": "6.3.*", // v6.3.0
        "symfony/ux-turbo": "^2.9", // v2.9.1
        "symfony/web-link": "6.3.*", // v6.3.0
        "symfony/yaml": "6.3.*", // v6.3.0
        "twig/extra-bundle": "^2.12|^3.0", // v3.6.1
        "twig/twig": "^2.12|^3.0" // v3.6.1
    },
    "require-dev": {
        "doctrine/doctrine-fixtures-bundle": "^3.4", // 3.4.4
        "symfony/debug-bundle": "6.3.*", // v6.3.0
        "symfony/maker-bundle": "^1.41", // v1.49.0
        "symfony/stopwatch": "6.3.*", // v6.3.0
        "symfony/web-profiler-bundle": "6.3.*", // v6.3.0
        "zenstruck/foundry": "^1.21" // v1.33.0
    }
}

Previous Chapter

Next Challenge