Webpack 5 in Ceate React App can't resolve not fully specified routes

Question

我們正在開發一個 React 庫，最近注意到，當我們想要使用新的 (webpack 5) Create React App 使用它時，它會拋出一個錯誤。 它抱怨這個：

“重大變化：請求解析失敗只是因為它被解析為完全指定的（可能是因為來源是嚴格的 EcmaScript 模塊，例如具有 javascript mimetype 的模塊，'.mjs' 文件或'.js' 文件，其中package.json 包含“類型”：“模塊”）。

我設法通過添加來解決這個問題

{
    test: /\.m?js/,
    resolve: {
      fullySpecified: false,
    },
}

雖然這適用於任何有權訪問 webpack 配置的應用程序，但我們希望讓我們的庫“即插即用”，無需任何彈出或額外設置。 我們需要什么樣的配置才能使消費者的 webpack 解析我們未完全指定的路由？ 密碼github

提前致謝

Answer 1

我在沒有彈出或修改 node_modules 中的文件的情況下解決了這個問題。 首先，添加 craco 以覆蓋 webpack 配置： yarn add -D @craco/craco 。 接下來，在項目的根目錄中（ package.json所在的位置）創建一個名為craco.config.js的文件，其中包含以下內容：

module.exports = {
    webpack: {
        configure: {
            module: {
                rules: [
                    {
                        test: /\.m?js$/,
                        resolve: {
                            fullySpecified: false,
                        },
                    },
                ],
            },
        },
    },
};

此配置禁用導致此錯誤的重大更改。 然后更改package.json中的啟動/構建/測試命令，將react-scripts替換為craco ：

"scripts": {
        "start": "craco start",
        "build": "craco build",
        "test": "craco test",

現在做通常的yarn start ，它應該可以工作。