Laravel执行npm run build报错：typed.js未导出./dist/typed.cjs路径

执行npm run build时触发如下错误：

ERROR in ./webpack/plugins/custom/typedjs/typedjs.js 3:15-49 Module not found: Error: Package path ./dist/typed.cjs is not exported from package C:\xampp\htdocs\as-family\node_modules\typed.js (see exports field in C:\xampp\htdocs\as-family\node_modules\typed.js\package.json)

操作步骤：

1. 执行npm install
2. 执行npm run build

项目package.json内容如下：

{
    "private": true,
    "main": "gulpfile.js",
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production",
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "webpack serve",
        "build": "webpack"
       
    },
    "dependencies": {
        "@ckeditor/ckeditor5-alignment": "^35.2.1",
        "@ckeditor/ckeditor5-build-balloon": "^35.2.1",
        "@ckeditor/ckeditor5-build-balloon-block": "^35.2.1",
        "@ckeditor/ckeditor5-build-classic": "^35.2.1",
        "@ckeditor/ckeditor5-build-decoupled-document": "^35.2.1",
        "@ckeditor/ckeditor5-build-inline": "^35.2.1",
        "@fortawesome/fontawesome-free": "^6.1.1",
        "@popperjs/core": "2.11.6",
        "@shopify/draggable": "^1.0.0-beta.12",
        "@yaireo/tagify": "^4.9.2",
        "acorn": "^8.0.4",
        "apexcharts": "^3.33.1",
        "autosize": "^5.0.1",
        "axios": "^0.21.1",
        "bootstrap": "^5.2.3",
        "bootstrap-cookie-alert": "^1.2.1",
        "bootstrap-daterangepicker": "^3.1.0",
        "bootstrap-icons": "^1.5.0",
        "bootstrap-maxlength": "^1.10.1",
        "bootstrap-multiselectsplitter": "^1.0.4",
        "chalk": "^4.1.0",
        "chart.js": "^3.6.0",
        "clipboard": "^2.0.8",
        "countup.js": "^2.0.7",
        "cropperjs": "^1.5.12",
        "datatables.net": "^1.12.1",
        "datatables.net-bs5": "^1.12.1",
        "datatables.net-buttons": "^2.2.3",
        "datatables.net-buttons-bs5": "^2.2.3",
        "datatables.net-colreorder": "^1.5.6",
        "datatables.net-colreorder-bs5": "^1.5.6",
        "datatables.net-datetime": "^1.1.2",
        "datatables.net-fixedcolumns": "^4.1.0",
        "datatables.net-fixedcolumns-bs5": "^4.1.0",
        "datatables.net-fixedheader": "^3.2.3",
        "datatables.net-fixedheader-bs5": "^3.2.3",
        "datatables.net-plugins": "^1.11.5",
        "datatables.net-responsive": "^2.3.0",
        "datatables.net-responsive-bs5": "^2.3.0",
        "datatables.net-rowgroup": "^1.2.0",
        "datatables.net-rowgroup-bs5": "^1.2.0",
        "datatables.net-rowreorder": "^1.2.8",
        "datatables.net-rowreorder-bs5": "^1.2.8",
        "datatables.net-scroller": "^2.0.6",
        "datatables.net-scroller-bs5": "^2.0.6",
        "datatables.net-select": "^1.4.0",
        "datatables.net-select-bs5": "^1.4.0",
        "dropzone": "^5.9.2",
        "es6-promise": "^4.2.8",
        "es6-promise-polyfill": "^1.2.0",
        "es6-shim": "^0.35.5",
        "esri-leaflet": "^3.0.2",
        "esri-leaflet-geocoder": "^3.0.0",
        "flatpickr": "^4.6.9",
        "flot": "^4.2.2",
        "fslightbox": "^3.3.0-2",
        "fullcalendar": "^5.8.0",
        "handlebars": "^4.7.7",
        "inputmask": "^5.0.6",
        "jkanban": "^1.3.1",
        "jquery": "^3.6.0",
        "jquery.repeater": "^1.2.1",
        "jstree": "^3.3.11",
        "jszip": "^3.6.0",
        "leaflet": "^1.7.1",
        "line-awesome": "^1.3.0",
        "lozad": "^1.16.0",
        "moment": "^2.29.1",
        "nouislider": "^15.2.0",
        "npm": "^9.6.1",
        "pdfmake": "^0.2.0",
        "popper.js": "^1.16.1",
        "prism-themes": "^1.7.0",
        "prismjs": "^1.24.1",
        "quill": "^1.3.7",
        "select2": "^4.1.0-rc.0",
        "smooth-scroll": "^16.1.3",
        "sweetalert2": "11.4.8",
        "tiny-slider": "^2.9.3",
        "tinymce": "^5.8.2",
        "toastr": "^2.1.4",
        "typed.js": "^2.0.12",
        "vis-timeline": "^7.4.9",
        "webpack-log": "^3.0.2",
        "wnumb": "^1.2.0"
    },
    "devDependencies": {
        "@babel/core": "^7.13.14",
        "@babel/plugin-transform-modules-commonjs": "^7.13.8",
        "@babel/preset-env": "^7.13.12",
        "@babel/register": "^7.13.14",
        "axios": "^1.1.2",
        "copy-webpack-plugin": "^8.1.0",
        "css-loader": "^5.2.0",
        "css-minimizer-webpack-plugin": "^4.2.2",
        "del": "^6.0.0",
        "extract-loader": "^4.0.3",
        "file-loader": "^6.2.0",
        "fs-extra": "^10.0.0",
        "gulp": "^3.9.1",
        "gulp-clean-css": "^4.3.0",
        "gulp-concat": "^2.6.1",
        "gulp-connect": "^5.7.0",
        "gulp-dart-sass": "^1.0.2",
        "gulp-if": "^3.0.0",
        "gulp-rename": "^2.0.0",
        "gulp-rewrite-css": "^1.1.2",
        "gulp-rtlcss": "^2.0.0",
        "gulp-sourcemaps": "^3.0.0",
        "gulp-terser": "^2.0.1",
        "imports-loader": "^1.2.0",
        "laravel-vite-plugin": "^0.7.2",
        "lazypipe": "^1.0.2",
        "merge-stream": "^2.0.0",
        "mini-css-extract-plugin": "^1.3.4",
        "postcss-loader": "^4.0.4",
        "pretty": "^2.0.0",
        "replace-in-file-webpack-plugin": "^1.0.6",
        "rtlcss-webpack-plugin": "^4.0.6",
        "sass-loader": "^10.1.0",
        "script-loader": "^0.7.2",
        "terser-webpack-plugin": "^5.0.3",
        "url-loader": "^4.1.1",
        "vite": "^4.0.0",
        "webpack": "^5.76.1",
        "webpack-cli": "^4.6.0",
        "webpack-dev-server": "^4.12.0",
        "webpack-exclude-assets-plugin": "^0.1.1",
        "webpack-merge-and-include-globally": "^2.3.4",
        "webpack-messages": "^2.0.4",
        "yargs": "^16.2.0",
        "yarn-install": "^1.0.0"
    }
}

解决办法 #

1. 修正导入路径 #

打开./webpack/plugins/custom/typedjs/typedjs.js，找到第3行的导入代码，把原来指定./dist/typed.cjs的路径改成直接导入包名：

// 原来的错误导入
// import Typed from 'typed.js/dist/typed.cjs'

// 修改后的导入（二选一）
import Typed from 'typed.js'; // ES模块方式
// 或者
const Typed = require('typed.js'); // CommonJS方式

typed.js@2.0.12的package.json已经配置了正确的主入口导出，不需要手动指定子路径。

2. 降级typed.js版本 #

如果不想改代码，直接把typed.js降到2.0.11版本，这个版本还保留了./dist/typed.cjs的导出：

npm uninstall typed.js
npm install typed.js@2.0.11

之后重新执行npm run build即可。

3. 配置webpack别名（不推荐） #

在webpack配置文件里添加别名，把不存在的路径映射到实际文件：

module.exports = {
  // ...其他配置
  resolve: {
    alias: {
      'typed.js/dist/typed.cjs': 'typed.js/dist/typed.js'
    }
  }
};

这种方法属于临时 workaround，优先推荐前两种更规范的解决方案。

内容的提问来源于stack exchange，提问作者khush