symfony webpack encore : select2 not working (“not a function”)

Using Symfony 4 and Webpack Encore, I can't get Select2 to work.
I'm using "select2@4.0.3"
And importing it this way in app.js:

import $ from 'jquery';
import 'bootstrap';
import 'select2';

I also tried to use

Encore.autoProvidejQuery()

in webpack.config.js (then taking care of commenting the import $ from 'jquery'; line in app.js not to import jquery twice)

I tried everything I could find in other answsers like:

import select2 form 'select2';

$(() => 
 $('.select2-enable').select2();
);

select2($);

Almost all my attempts result in the same error:
TypeError: $(...).select2 is not a function

EDIT

Working now. Everytime I made a change in app.js (and rebuilt) I used the firefox devtool console to check if it was working but I always got the "not a function" error even though the problem was solved and select2 was working. Is this because I'm using webpack that the browser console doesn't recognize the select2() function anymore ?

edited Nov 13 '18 at 15:02

asked Nov 13 '18 at 12:30

Roubi

951926

1

Did you rebuild, after this code? If yes, could you share your html codes?

– Mert Simsek
Nov 13 '18 at 12:53

2

first install it using yarn add select2 then use it with require instead of import like : require('select2') at your app.js file

– Trix
Nov 13 '18 at 13:09

@Trix : Thanks for your comment. Got it working (see my edit), I was mislead by strange browser console's behavior (it doesn't work in console). It works the same using require or import.

– Roubi
Nov 13 '18 at 15:07

@Mert, Thank for your comment. Yes I rebuilt after every change. About my html code: I'm calling select2() in a vue.js component method.

– Roubi
Nov 13 '18 at 15:09

please consider accepting & up-voting if was helpful

– Trix
Nov 30 '18 at 19:44

add a comment |

Using Symfony 4 and Webpack Encore, I can't get Select2 to work.
I'm using "select2@4.0.3"
And importing it this way in app.js:

import $ from 'jquery';
import 'bootstrap';
import 'select2';

I also tried to use

Encore.autoProvidejQuery()

in webpack.config.js (then taking care of commenting the import $ from 'jquery'; line in app.js not to import jquery twice)

I tried everything I could find in other answsers like:

import select2 form 'select2';

$(() => 
 $('.select2-enable').select2();
);

select2($);

Almost all my attempts result in the same error:
TypeError: $(...).select2 is not a function

edited Nov 13 '18 at 15:02

asked Nov 13 '18 at 12:30

Roubi

951926

1

Did you rebuild, after this code? If yes, could you share your html codes?

– Mert Simsek
Nov 13 '18 at 12:53

2

first install it using yarn add select2 then use it with require instead of import like : require('select2') at your app.js file

– Trix
Nov 13 '18 at 13:09

@Trix : Thanks for your comment. Got it working (see my edit), I was mislead by strange browser console's behavior (it doesn't work in console). It works the same using require or import.

– Roubi
Nov 13 '18 at 15:07

@Mert, Thank for your comment. Yes I rebuilt after every change. About my html code: I'm calling select2() in a vue.js component method.

– Roubi
Nov 13 '18 at 15:09

please consider accepting & up-voting if was helpful

– Trix
Nov 30 '18 at 19:44

add a comment |

Using Symfony 4 and Webpack Encore, I can't get Select2 to work.
I'm using "select2@4.0.3"
And importing it this way in app.js:

import $ from 'jquery';
import 'bootstrap';
import 'select2';

I also tried to use

Encore.autoProvidejQuery()

in webpack.config.js (then taking care of commenting the import $ from 'jquery'; line in app.js not to import jquery twice)

I tried everything I could find in other answsers like:

import select2 form 'select2';

$(() => 
 $('.select2-enable').select2();
);

select2($);

Almost all my attempts result in the same error:
TypeError: $(...).select2 is not a function

edited Nov 13 '18 at 15:02

asked Nov 13 '18 at 12:30

Roubi

951926

Using Symfony 4 and Webpack Encore, I can't get Select2 to work.
I'm using "select2@4.0.3"
And importing it this way in app.js:

import $ from 'jquery';
import 'bootstrap';
import 'select2';

I also tried to use

Encore.autoProvidejQuery()

in webpack.config.js (then taking care of commenting the import $ from 'jquery'; line in app.js not to import jquery twice)

I tried everything I could find in other answsers like:

import select2 form 'select2';

$(() => 
 $('.select2-enable').select2();
);

select2($);

Almost all my attempts result in the same error:
TypeError: $(...).select2 is not a function

symfony jquery-select2 webpack-encore

edited Nov 13 '18 at 15:02

asked Nov 13 '18 at 12:30

Roubi

951926

edited Nov 13 '18 at 15:02

asked Nov 13 '18 at 12:30

Roubi

951926

edited Nov 13 '18 at 15:02

asked Nov 13 '18 at 12:30

Roubi

951926

asked Nov 13 '18 at 12:30

Roubi

951926

asked Nov 13 '18 at 12:30

Roubi

951926

1

Did you rebuild, after this code? If yes, could you share your html codes?

– Mert Simsek
Nov 13 '18 at 12:53

2

first install it using yarn add select2 then use it with require instead of import like : require('select2') at your app.js file

– Trix
Nov 13 '18 at 13:09

@Trix : Thanks for your comment. Got it working (see my edit), I was mislead by strange browser console's behavior (it doesn't work in console). It works the same using require or import.

– Roubi
Nov 13 '18 at 15:07

@Mert, Thank for your comment. Yes I rebuilt after every change. About my html code: I'm calling select2() in a vue.js component method.

– Roubi
Nov 13 '18 at 15:09

please consider accepting & up-voting if was helpful

– Trix
Nov 30 '18 at 19:44

add a comment |

1

Did you rebuild, after this code? If yes, could you share your html codes?

– Mert Simsek
Nov 13 '18 at 12:53

2

first install it using yarn add select2 then use it with require instead of import like : require('select2') at your app.js file

– Trix
Nov 13 '18 at 13:09

@Trix : Thanks for your comment. Got it working (see my edit), I was mislead by strange browser console's behavior (it doesn't work in console). It works the same using require or import.

– Roubi
Nov 13 '18 at 15:07

@Mert, Thank for your comment. Yes I rebuilt after every change. About my html code: I'm calling select2() in a vue.js component method.

– Roubi
Nov 13 '18 at 15:09

please consider accepting & up-voting if was helpful

– Trix
Nov 30 '18 at 19:44

Did you rebuild, after this code? If yes, could you share your html codes?

– Mert Simsek
Nov 13 '18 at 12:53

first install it using yarn add select2 then use it with require instead of import like : require('select2') at your app.js file

– Trix
Nov 13 '18 at 13:09

@Trix : Thanks for your comment. Got it working (see my edit), I was mislead by strange browser console's behavior (it doesn't work in console). It works the same using require or import.

– Roubi
Nov 13 '18 at 15:07

@Mert, Thank for your comment. Yes I rebuilt after every change. About my html code: I'm calling select2() in a vue.js component method.

– Roubi
Nov 13 '18 at 15:09

please consider accepting & up-voting if was helpful

– Trix
Nov 30 '18 at 19:44

add a comment |

1 Answer
1

active

oldest

votes

First install it using yarn:

yarn add select2
Then use it with require instead of import:

require('select2')

at your app.js file.

It works the same using require or import.

Babel converts import and export declaration to CommonJS (require) which lets you load modules dynamically.

So, despite of them looking the same, try to always use require.

answered Nov 14 '18 at 8:03

Trix

10k85174

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53281056%2fsymfony-webpack-encore-select2-not-working-not-a-function%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

First install it using yarn:

yarn add select2
Then use it with require instead of import:

require('select2')

at your app.js file.

It works the same using require or import.

Babel converts import and export declaration to CommonJS (require) which lets you load modules dynamically.

So, despite of them looking the same, try to always use require.

answered Nov 14 '18 at 8:03

Trix

10k85174

add a comment |

First install it using yarn:

yarn add select2
Then use it with require instead of import:

require('select2')

at your app.js file.

It works the same using require or import.

Babel converts import and export declaration to CommonJS (require) which lets you load modules dynamically.

So, despite of them looking the same, try to always use require.

answered Nov 14 '18 at 8:03

Trix

10k85174

add a comment |

First install it using yarn:

yarn add select2
Then use it with require instead of import:

require('select2')

at your app.js file.

It works the same using require or import.

Babel converts import and export declaration to CommonJS (require) which lets you load modules dynamically.

So, despite of them looking the same, try to always use require.

answered Nov 14 '18 at 8:03

Trix

10k85174

First install it using yarn:

yarn add select2
Then use it with require instead of import:

require('select2')

at your app.js file.

It works the same using require or import.

Babel converts import and export declaration to CommonJS (require) which lets you load modules dynamically.

So, despite of them looking the same, try to always use require.

answered Nov 14 '18 at 8:03

Trix

10k85174

answered Nov 14 '18 at 8:03

Trix

10k85174

answered Nov 14 '18 at 8:03

Trix

10k85174

answered Nov 14 '18 at 8:03

Trix

10k85174

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb