开发Chrome扩展时Webpack报错：Package path ./dist/components未导出

我在Stack Overflow上查阅了大量相关讨论，但都无法解决我的问题。我正在使用React、TypeScript和Webpack开发一款Chrome扩展，除React外仅依赖@dummyname/mypackage。当我从@dummyname/mypackage根路径导入内容时，执行npm run build可以正常完成；但当我添加语句import { somethingMore } from '@dummyname/mypackage/dist/components'时，会报错：Module not found: Error: Package path ./dist/components is not exported from package。

以下是相关配置文件内容：

项目package.json #

{
  "name": "my-extension",
  "version": "0.1.0",
  "scripts": {
    "build": "webpack --config webpack.config.js"
  },
  "dependencies": {
    "@dummyname/mypackage": "^9.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.22.15",
    "@babel/preset-env": "^7.22.15",
    "@babel/preset-react": "^7.22.15",
    "@babel/preset-typescript": "^7.22.15",
    "@types/react": "^18.2.21",
    "@types/react-dom": "^18.2.7",
    "babel-loader": "^9.1.3",
    "copy-webpack-plugin": "^11.0.0",
    "css-loader": "^6.8.1",
    "html-webpack-plugin": "^5.5.3",
    "typescript": "^5.2.2",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

App.tsx导入语句 #

import { something } from '@dummyname/mypackage';
// 添加以下语句后报错
import { somethingMore } from '@dummyname/mypackage/dist/components';

Webpack配置 #

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require("copy-webpack-plugin");

module.exports = {
    entry: {
        app: "./views/app/app.tsx"
    },
    output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./views/app/app.html",
            filename: "app.html"
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: "images" },
                { from: "css" },
            ],
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'manifest.json' }
            ],
        }),
    ],
    module: {
        rules: [
            {
                test: /\.(ts|js)x?$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: [
                            "@babel/preset-env",
                            "@babel/preset-react",
                            "@babel/preset-typescript",
                        ],
                    },
                },
            },
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'css-loader',
                    },
                ],
            },
        ],
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
};

@dummyname/mypackage的package.json片段 #

"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"exports": {
    ".": {
        "require": "./dist/index.js",
        "import": "./dist/index.mjs",
        "types": "./dist/index.d.ts"
    },
    "./components": {
        "require": "./dist/components/index.js",
        "import": "./dist/components/index.mjs",
        "types": "./dist/components/index.d.ts"
    }
},
"files": [
    "dist/",
    "src/"
],

这个错误的核心原因是你使用了错误的导入路径。

@dummyname/mypackage的package.json中通过exports字段明确声明了对外暴露的子路径，其中只定义了./components这个入口，并没有开放./dist/components路径。当Webpack解析导入语句时，会严格遵循包的exports配置，不允许直接访问未声明的内部路径。

你需要把导入语句修改为：

import { somethingMore } from '@dummyname/mypackage/components';

这样Webpack就能正确匹配到package.json中exports里定义的./components规则，找到对应的文件。

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