jQuery(…).autosize is not a function when using autosize.js

[alliedarmour]

I'm trying to get autosize.js to work in my Rails 6 application but it doesn't matter what I try, it's not working.

Every time I try to use it on a textarea I'm getting this error:

jQuery(...).autosize is not a function

What I did:

I added the plugin via yarn with yarn add autosize Then I required it in my application.js, I tried different solutions:

require("autosize")
require("autosize/dist/autosize")

Then I imported it in different ways to try if it works somehow (as all other plugins are working). What I tried:

import 'autosize'
import autosize from 'autosize'

Then I tried setting a global scope for the variable:

global.autosize = autosize;
For initialization I followed the readme:

autosize($('textarea'));
I even tried to remove the yarn package and download the files. But still the same error.

Any more suggestions on what I could do to make it work?

[jackmoore]

Hello @alliedarmour,

Autosize started as a jQuery plugin, but hasn't been for a good many years now, however in addition to DOM Nodes & NodeLists, it can accept with jQuery objects, e.g. autosize(jQuery('textarea.example'))

For using import, try this:

import autosize from 'autosize'

autosize($('textarea'));

[jackmoore]

jQuery(...).autosize is not a function

This error means that somewhere you are calling $.autosize or $.fn.autosize, e.g. $('#example').autosize, which throws an error because autosize is not a jQuery plugin. If you see usage like $('#example').autosize(), then that can probably safely be replaced with autosize($('#example')). I hope that makes sense.

[jackmoore]

If this is a legacy project and you need the old jQuery plugin version of autosize, it still exists on the v1 branch: https://github.com/jackmoore/autosize/tree/v1

It has not been updated in 5 years.

[pascalbeynel]

I have the same problem. i had autosize with
-> yarn add autosize
-> in my main.js :
import autosize from 'autosize';

When trying to use it
if($("textarea").length != 0){ $('textarea:not(".noautosize")').each(function() { autosize($(this)); }); }

I got a JS error :
Uncaught ReferenceError: autosize is not defined

[reedjosh]

For anyone wanting to add this to jQuery... Specifically for use in Rails packs. This worked for me. : )

import $ from 'jquery';
global.$ = jQuery;

import autosize from 'autosize';

$.fn.extend({autosize: autosize});

[reedjosh]

And @pascalbeynel your situation would probably work as I wrote above, but then you have to change

if($("textarea").length != 0){ $('textarea:not(".noautosize")').each(function() { autosize($(this)); }); }

to something like (syntax may not be spot on.)

if($("textarea").length != 0){ $('textarea:not(".noautosize")').each(function() { $(this).autosize; }); }

[simanacci]

@jackmoore Hi, is it possible to use autosize directly from static/autosize.js without npm or yarn installing it? I'm using Flask(Python).

Update It works now.
<script src="https://cdnjs.cloudflare.com/ajax/libs/autosize.js/4.0.2/autosize.js"></script>
<script> autosize(document.querySelector('textarea'));</script>