vue.js - Vue CLI project fails to import CJS module

Question

I'm trying to use an NPM package in a Vue CLI project (Vue CLI 4 / Webpack 4) but Webpack is failing to import the module in a way I've never seen before.

The package ("scino") is a CommonJS module that has one dependency: decimal.js v7 (which appears to ship a CJS as well as an MJS version, for what it's worth).

When I try to use it in a project, I get the error:

TypeError: Decimal is not a constructor

That looks like it isn't importing the default export from the scino package's dependency correctly. I've tried the ESM import syntax, as well as variations on the CJS require syntax:

import scino from 'scino';
// or
const scino = require('scino');
// or 
const scino = require('scino').default;

I thought using the require syntax would tell Webpack to use CJS-style module imports, but neither seems to work.

Interestingly, using the package in a codepen works just fine... so I'm pretty sure it has to do with how Webpack is importing scino (and its decimal.js dependency).

How can I get webpack to import this package correctly?

question from:https://stackoverflow.com/questions/65834666/vue-cli-project-fails-to-import-cjs-module

Answer 1

Waitting for answers