Tips for including vue-autonumeric in your webpack 2 setup

Encountering a problem while bundling the vue-autonumeric package with Webpack 2, where the dependency AutoNumeric is not being found properly.

Although there is an alias set up in the configuration that works fine with webpack 3, it seems to fail when working on webpack 2 with a new project, showing this error message:

Hash: 470e79379d7394141898
Version: webpack 2.7.0
Time: 135ms
           Asset     Size  Chunks             Chunk Names
./dist/bundle.js  12.7 kB       0  [emitted]  main
   [0] ./~/vue-autonumeric/dist/vue-autonumeric.min.js 9.29 kB {0} [built]
   [1] ./src/vueAutonumericTest.js 120 bytes {0} [built]

ERROR in ./~/vue-autonumeric/dist/vue-autonumeric.min.js
Module not found: Error: Can't resolve 'AutoNumeric' in '/home/user/vueAutonum/node_modules/vue-autonumeric/dist'
 @ ./~/vue-autonumeric/dist/vue-autonumeric.min.js 1:82-104
 @ ./src/vueAutonumericTest.js

Attempted to solve this by adding:

  resolve: {
    alias: {
      AutoNumeric: 'node_modules/autonumeric/dist/autoNumeric.min',
    },
  },

to the webpack.config.js file for webpack 2, but unfortunately, it did not work as expected.

Any insights on why this issue occurs and how to make it functional for both webpack version 3 and 2?

For more details on this problem, please refer to this Github issue.

javascriptwebpackvue.js

Answer №1

Here is the wrapper for umd in the bundle file of vue-autoNumeric:

if(typeof exports === 'object' && typeof module === 'object')
    module.exports = factory(require("AutoNumeric"));
else if(typeof define === 'function' && define.amd)
    define("VueAutonumeric", ["AutoNumeric"], factory);
else if(typeof exports === 'object')
    exports["VueAutonumeric"] = factory(require("AutoNumeric"));
else
    root["VueAutonumeric"] = factory(root["AutoNumeric"]);

It's clear that vue-autoNumeric relies on a module called 'AutoNumeric'.

Perhaps, adjustments to webpack config or updating package dependencies list as suggested in this Issue Comment are necessary.

Alternatively, you could include autonumeric in your dependencies list so that webpack can locate the missing module.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Disable Chrome's suggestions bar on your Android phone

I'm having trouble disabling spelling suggestions for an input box and everything I've tried so far hasn't worked. I've already used attributes like autocomplete="off", autocapitalize="off", and spellcheck="off" for the input field, bu ...

javascriptandroidhtmlcssgoogle-chrome

Utilizing the handleChange method to manage multiple input fields

It is important to me that the function handleChange only updates the input value that is being changed. Specifically, if I modify the 'firstName' input, I want only that state to be updated, and the same applies to the 'lastName' input ...

javascriptreactjs

The radio button fails to trigger the setState function in React

In my React program, I have implemented a method to update the state and modify a specific value for a Radio button: The state : class App extends Component { constructor(props) { super(props); this.state = { checked: [], expanded: [], ...

javascriptreactjs

Retrieve the part of a displayed element

Presently, I am developing a modal system using React. A button is located in the sidebar and the modal is represented as a div within the body. In the render function of the main component of my application, two components are being rendered: MyModal M ...

javascriptreactjstypescriptcomponentselement

Mastering the art of integrating HTML5's localstorage feature with Jquery's select2 plugin

Is it possible to integrate HTML5's localstorage method with Jquery's select2 plugin? Currently, all entered data disappears when the browser/tab is closed, leading to potential confusion if you forget what was entered. Here is an example of my ...

javascriptjqueryhtmljquery-select2

HMR: The webpack-hot-middleware is not refreshing my webpage

My Vue application, titled hello-world, is utilizing webpack-dev-middleware and webpack-hot-middleware. When running the application, it shows that it's connected in the console. However, after making changes to my main.js file, the following message ...

javascriptnode.jswebpackvue.jswebpack-dev-server

Please display the Bootstrap Modal first before continuing

Currently, I'm facing a challenge with my JS code as it seems to continue running before displaying my Bootstrap Modal. On this website, users are required to input information and upon pressing the Save button, a function called "passTimeToSpring()" ...

javascriptjqueryasync-awaitbootstrap-modal

Lazy Highcharts and Foundation clash when loading JavaScript

I'm currently utilizing lazy_high_charts along with foundation 4. Within my view, I have included <%= high_chart("my_id", @chart) %>, which produces the following: <section> <script type="text/javascript"> (function() { ...

javascriptjqueryruby-on-railszurb-foundationlazy-high-charts

Identify support for the :first-child pseudo-class

Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...

javascriptjquerycsscss-selectors

Retrieve container for storing documents in JavaServer Pages

Previously, I created JSP and HTML code to upload a file from the hard disk into a database using <input type="file" name="upfile"> However, a dialog box with an "Open" button is displayed. What I am looking for is a "Save" button that will allow u ...

javajavascripthtmljsp

Step-by-step guide on activating a controller function following an Animation in Angular JS

I have hit a roadblock trying to connect a series of animations with a controller action. My goal is to: 1. click on a button/div, 2. Trigger an animation, 3. Once the animation finishes, execute a function in the controller to reset the button/div. I&a ...

javascriptangularjsangularjs-scopeng-animate

The global variable remains unchanged within an ajax request

Here is the code I am working with: In developing this code, I referenced information about the window variable from here <script> $(window).on("load", function() { function myForeverFunc(){ ...

javascriptjqueryajax

In the Nuxt.js async method, there is an error stating that the property 'info' does not exist on the type 'Vue'

I'm currently working on storing an API response in the async method of my Nuxt js application within a variable called info. However, I keep encountering this error message: Property 'info' does not exist on type 'Vue'. Interestin ...

vue.jsvuejs2nuxt.js

Create a function in JavaScript to add a toggle feature to a dropdown

I am working with multiple dropdown lists all having the common element role="list". My goal is to create a toggle functionality so that when one dropdown is clicked, it automatically closes any other open dropdowns. <div id="dropdownLi ...

javascript

Is there a more effective approach to designing a login screen?

I am just starting out with angular js and this login page is my first step. I have created a basic login form, but when I click on the login() button, the form() does not get submitted and it keeps showing an error message saying "invalid username and pas ...

javascriptangularjs

Issue with rendering Angular templates

Having just embarked on my AngularJS journey, I'm currently facing an issue with this specific code snippet. The following is an excerpt from my JavaScript file named cribsController.js: angular .module('ngCribs') .controller('cribsCo ...

javascriptangularjs

The utilization of conditional expression necessitates the inclusion of all three expressions at the conclusion

<div *ngFor="let f of layout?.photoframes; let i = index" [attr.data-index]="i"> <input type="number" [(ngModel)]="f.x" [style.border-color]="(selectedObject===f) ? 'red'" /> </div> An error is triggered by the conditional ...

javascriptangulartypescript

Exploring and Presenting Arrays using React JS

Recently, I have started working with react js and I am trying to add a search functionality to filter an array in React. My goal is to allow the user to enter a character in the textbox and only see the names that contain that specific character. So far, ...

javascriptreactjs

Utilizing React Native for seamless deep linking with automatic fallback to a webpage, including the ability to pass

I am currently working on a project that involves a website built with React and a React-native app for camera functionality and data processing. On the website, there is a button that opens the camera in the React-native app through deep-linking. This pa ...

javascriptandroidreactjsreact-nativedeep-linking

The command "npm run build:css " is not functioning properly, but when I execute the script independently, it works fine

Recently, while working on a program using npm script on my Mac system, I encountered some issues. Despite having installed node-sass globally, running "npm run build:css" did not work as expected. The content of my package.json file can be viewed here. Th ...

javascriptjsonnpm-run