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 6 > 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!

Sometimes, instead of importing a package itself, you may want to import only part of it: like a specific file. Lodash is a good example of this.

No Tree Shaking in the Browser

But before we get there, instead of importing everything from lodash, you should be able to say import { camelCase } from 'lodash'. Then, down here, you would use camelCase directly.

            Copy Code

                            Show All Lines

                        6 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... line 1
                            
            import { camelCase } from 'lodash';
        
                Show Lines

                                                    // ... lines 3 - 4
                            
            console.log(camelCase(mix.describe()));

However, when we move over and try this... error!

The requested module lodash does not provide an export named camelCase.

This should work... and the reason it doesn't is complicated. Basically, due to the way that this specific library packages their module, you can't import specific functions like this. It will work with most other packages, however.

For example, if you say import { Modal } from 'bootstrap' (if you're using Bootstrap), that will work. Bootstrap packages their files correctly.

However, using this syntax may not always be ideal with AssetMapper.

Here's the problem. If we ran this code through Encore, Encore would do something called "tree shaking". This is where it would see that we're only importing camelCase from lodash. And so, in the final JavaScript, it would only give us the code for camelCase, not the entire lodash package.

In a browser environment, if you import from lodash, you're going to get all of lodash... even if you're only importing one part of it. Now, that might not be that big of a deal. The full build of lodash is still only 24 kilobytes. But what if we are using a big package... but only need to import one specific thing?

Importing a Specific File

A lot of times, there's a specific file that we can import, like /camelCase. You'll usually find details about these files in the docs... though you can also go look for them. Head back to JSDelivr... and down here, search for "lodash". Below, click "Files" to see all the files that are part of this package.

For lodash, it's a huge list... because this is a huge library. One of these is camelCase.js.

Ok! So let's try importing lodash/camelCase.

            Copy Code

                            Show All Lines

                        6 lines
            |
            assets/app.js
        
                Show Lines

                                                    // ... line 1
                            
            import camelCase from 'lodash/camelCase';
        
                Show Lines

                                                    // ... lines 3 - 6

I'm not including the .js... but it's not going to work anyway. Watch: when we refresh... error!

Failed to resolve module specifier lodash/camelCase. Relative references must start with either "/", "./", or "../"

This error means that we're importing something using a "bare" import, and it was not found in the importmap. If we "View Page Source", we do have an importmap for lodash, but not lodash/camelCase. Yup, that matching is done exactly. Ok, there is a way to do a, sort of, "fuzzy" matching - lodash/* - but I don't use that.

The point is: if you want to use lodash/camelCase, you should add that to your importmap, not lodash.

Watch: find your terminal and run:

php bin/console importmap:remove lodash

That will remove lodash from importmap.php and delete the file from assets/vendor/.

            Copy Code

                            Show All Lines

                        22 lines
            |
            importmap.php
        
                Show Lines

                                                    // ... lines 1 - 15
                            
            return [
        
                'app' => [
        
                    'path' => 'app.js',
        
                    'preload' => true,
        
                ],
        
            ];

Nice! Now run ./bin/console importmap:require with the package name / the path that you want: lodash/camelCase.js.

php bin/console importmap:require lodash/camelCase.js

camelCase.js is the name of the file over on the CDN. But you'll notice that, a lot of times in the docs, they'll reference lodash/camelCase without the .js. And in this case, you can leave the .js off: it's up to you. That works because jsDelivr is friendly and makes both versions of the URL work.

The result of the command? The same as before! We get a new entry in importmap.php matching what we want to import and set to a URL.

            Copy Code

                            Show All Lines

                        25 lines
            |
            importmap.php
        
                Show Lines

                                                    // ... lines 1 - 15
                            
            return [
        
                Show Lines

                                                    // ... lines 17 - 20
                            
                'lodash/camelCase' => [
        
                    'url' => 'https://cdn.jsdelivr.net/npm/lodash@4.17.21/camelCase/+esm',
        
                ],
        
            ];

Copy that URL so we can see it. There we go! It's the code from just camelCase.js.

And when we try the page... it works!

Here's the takeaway: if you need to import a specific file from a package, you can do that: just pass the package name + file path to importmap:require.

Next, let's add Stimulus to our app!

8 Comments

Sort By

Oliver-K 8 days 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

| Reply |

Victor SFCASTS Oliver-K 8 days 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!

| Reply |

Oliver-K Victor 6 days 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 | Reply |

Oliver-K Oliver-K 6 days 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 | Reply |

Victor SFCASTS Oliver-K 5 days ago

And thanks for sharing the final solution with others!

Cheers!

| Reply |

Victor SFCASTS Oliver-K 5 days 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!

| Reply |

timm 4 months ago

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

| Reply |

sadikoff SFCASTS timm 4 months ago edited

hey @timm

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

Cheers!

| Reply |

Symfony 6.3

What PHP libraries does this tutorial use?

// composer.json
{
    "require": {
        "php": ">=8.1",
        "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

Importing Specific Package Files

Share this awesome video!

Keep on Learning!

No Tree Shaking in the Browser

Importing a Specific File

8 Comments

Delete comment?

What PHP libraries does this tutorial use?

Show Lines	// ... line 1
	import { camelCase } from 'lodash';
Show Lines	// ... lines 3 - 4
	console.log(camelCase(mix.describe()));

Show Lines	// ... line 1
	import camelCase from 'lodash/camelCase';
Show Lines	// ... lines 3 - 6

Show Lines	// ... lines 1 - 15
	return [
	'app' => [
	'path' => 'app.js',
	'preload' => true,
	],
	];