Can't build when used in nextjs 14.2.7

[jtrelfa]

When I run "next build", I get the following error:

Collecting page data  ...(node:1198943) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/home/jon/Code/FrontEnd/node_modules/@react-input/mask/dist/module/InputMask/index.js:1
import{_ as a,b as r}from"../utils-Db9stttu.js";import{forwardRef as e}from"react";import{useConnectedInputRef as t}from"@react-input/core";import o from"../useMask.js";import{jsx as s}from"react/jsx-runtime";var m=["component","mask","replacement","showMask","separate","track","modify","onMask"];function n(e,n){var p=e.component,c=e.mask,i=e.replacement,k=e.showMask,f=e.separate,u=e.track,M=e.modify,l=e.onMask,d=a(e,m),h=o({mask:c,replacement:i,showMask:k,separate:f,track:u,modify:M,onMask:l}),j=t(h,n);return s(p||"input",r({ref:j},d))}var p=e(n);export{p as default};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1280:20)
    at Module._compile (node:internal/modules/cjs/loader:1332:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:366:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)
/home/jon/Code/FrontEnd/node_modules/@react-input/mask/dist/module/InputMask/index.js:1
import{_ as a,b as r}from"../utils-Db9stttu.js";import{forwardRef as e}from"react";import{useConnectedInputRef as t}from"@react-input/core";import o from"../useMask.js";import{jsx as s}from"react/jsx-runtime";var m=["component","mask","replacement","showMask","separate","track","modify","onMask"];function n(e,n){var p=e.component,c=e.mask,i=e.replacement,k=e.showMask,f=e.separate,u=e.track,M=e.modify,l=e.onMask,d=a(e,m),h=o({mask:c,replacement:i,showMask:k,separate:f,track:u,modify:M,onMask:l}),j=t(h,n);return s(p||"input",r({ref:j},d))}var p=e(n);export{p as default};
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:128:18)
    at wrapSafe (node:internal/modules/cjs/loader:1280:20)
    at Module._compile (node:internal/modules/cjs/loader:1332:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1427:10)
    at Module.load (node:internal/modules/cjs/loader:1206:32)
    at Module._load (node:internal/modules/cjs/loader:1022:12)
    at cjsLoader (node:internal/modules/esm/translators:366:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:315:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:323:24)

I have a pretty basic page with just 1 input field for entering a masked code

import type { MaskEventHandler } from '@react-input/mask';
import { InputMask } from '@react-input/mask';
import { FormEvent, useState } from 'react';
import { useRouter } from 'next/navigation';

export default function Register() {
  [code, setCode] = useState(''),
    [submitEnabled, setSubmitEnabled] = useState(false);

  const handleMask: MaskEventHandler = (evt) => {
    if (evt.detail.isValid) {
      setCode(evt.detail.value);
      setSubmitEnabled(true);
    } else {
      setCode('');
      setSubmitEnabled(false);
    }
  };

  const router = useRouter();
  const validateCode = async () => {
    if (code && code.length === 11) {
      const resp = await Api.account().validateRegistrationCode(code);
      const valid = resp.data;
      if (valid === false) {
        setError('Invalid Code');
      } else {
        router.push(`/register/${code}/`);
      }
    } else {
      setError("Invalid Code");
    }
  };

  const goBack = () => {
    router.push('/login');
  };
  const handleSubmit = (ev: FormEvent) => {
    ev.preventDefault();
  };

  return (
    <>
          <div className="row justify-content-md-center">
            <div className="col-8">
              <h2 className="display-4">Register</h2>
              <div className="lead">
                Instructions placeholder
                {error && <p className="alert alert-danger">{error}</p>}
              </div>
              <form className="mt-4 pt-4 border-top border-block" onSubmit={handleSubmit}>
                <fieldset className="border border-2 border-secondary-subtle rounded p-3">
                  <legend>Registration Code</legend>
                  <div className="form-floating mb-3">
                    <InputMask
                      className="form-control form-control-lg"
                      name="registrationCode"
                      mask="_____-_____"
                      replacement={{ _: /[A-Za-z0-9]/ }}
                      onMask={handleMask}
                      showMask={true}
                      track={(param) => {
                        return param.data?.toUpperCase();
                      }}
                    />
                    <label className="form-label" htmlFor="registrationCode">
                     Code
                    </label>
                  </div>
                  <button
                    type="submit"
                    onClick={validateCode}
                    className="btn btn-primary me-3"
                    disabled={!submitEnabled}
                  >
                    Register
                  </button>
                  <button type="button" onClick={goBack} className="btn btn-secondary">
                    Cancel
                  </button>
                </fieldset>
              </form>
            </div>
          </div>
        </>
  );
}

[jtrelfa]

I also tried it with "useMask" and get the same error "Cannot use import statement outside a module"

[GoncharukBro]

Please install the following version of the package, which includes this fix:

npm i @react-input/mask@1.2.7

[jtrelfa]

That did the trick! Thank you so much! Great library