use basic js library (not node module) with symfony webpack encore

Question

I have a Symfony 5 project with Webpack Encore tools for manage assets.

I would like to use external JS library in my project : Cachu Slider Library

I added this in my webpack.config.js file :

.addEntry('cachu-js', './assets/js/cachu-slider.min.js')
.addStyleEntry('cachu-css', './assets/css/cachu-slider.min.css')

Those files seems to be good imported in my public/build directory symfony

My finally entrypoints.json is :

{
  "entrypoints": {
    "app": {
      "js": [
        "/build/runtime.js",
        "/build/app.js"
      ],
      "css": [
        "/build/app.css"
      ]
    },
    "cachu-js": {
      "js": [
        "/build/runtime.js",
        "/build/vendors~cachu-js.js",
        "/build/cachu-js.js"
      ]
    },
    "background": {
      "js": [
        "/build/runtime.js",
        "/build/background.js"
      ]
    },
    "cachu-css": {
      "js": [
        "/build/runtime.js"
      ],
      "css": [
        "/build/cachu-css.css"
      ]
    }
  }
}

And in my app.js file I have wrote this :

// import Cachu from './cachu-slider.min'

let Cachu = require('./cachu-slider.min');

let slider = new Cachu(document.querySelector('.cachu__container'));

slider.run();

My web browser seems to be good loaded library files for Cachu (js and css). My webpack compil seems to be good with generate nothing errors. But My console on the browser tell me that :

TypeError: Cachu is not a constructor

How I can use a basic js library file with this config (Symfony, Webpack Encore) ? Why It does not know Cachu for instancied but import statment generate nothing error ?

Alexander Dimitrov · Accepted Answer · 2020-05-21 16:29:33Z

1

You don’t need to create an entry point for the third party library.

Instead in App.js just import and use it.

If the library is installed via yarn or npm it should be in node_modules, is the import path should be:

import Cachu from ‘cachu-slider’;

Or to import the minified versions:

import Cachu from ‘cachu-slider/dist/cachu-slider.min’;

import ‘cachu-slider/dist/cachu-slider.min.css’;

answered May 21, 2020 at 16:29

Alexander Dimitrov

9741 gold badge6 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

miltone Over a year ago

the library is not a node modules. all this import not run. The main question is how use library that is not module with system module webpack in same symfony project

Alexander Dimitrov Over a year ago

You can install it. It is available.

miltone Over a year ago

Ok it's work but the question is about library and not a module node. This question would be interest lot of people which use other than node module. CopyFiles webpack encore instruction copy all directory not one file

Alexander Dimitrov Over a year ago

The idea is the same if the module is not in node_modules. Just use the relative file instead of the “~” path /which actually says “use node_modules directory”/. Just need to know that the relative path is relative of Webpack.config.js file /it depends actually if you use alias config for webpack/.

Collectives™ on Stack Overflow

use basic js library (not node module) with symfony webpack encore

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related