finos/perspective-viewer：css-loader 在 'exports' 上抛出 CssSyntaxError

Question

我的项目正在使用 webpack 和透视查看器。 css-loader 正在为 'exports' 抛出错误。按照defined in the doc的声明顺序。就我的项目配置中缺少的内容寻求帮助。

错误片段

ERROR in ./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuHandler.css (./node_modules/css-loader/dist/cjs.js!./node_modules/@finos/perspective-webpack-plugin/node_modules/css-loader/index.js??ruleSet[1].rules[4].use[0]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuHandler.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
CssSyntaxError

(1:1) Unknown word

> 1 | exports = module.exports = require("../../../../../../@finos/perspective-webpack-plugin/node_modules/css-loader/lib/css-base.js")(false);
    | ^
  2 | // imports
  3 |
 @ ./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuHandler.css 8:6-300 22:17-24 26:0-270 26:0-270 27:22-29 27:33-47 27:50-64
 @ ./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuHandler.js 5:0-34
 @ ./node_modules/monaco-editor/esm/vs/platform/contextview/browser/contextMenuService.js 14:0-61 25:38-56
 @ ./node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneServices.js 24:0-97 165:43-61
 @ ./node_modules/monaco-editor/esm/vs/editor/standalone/browser/standaloneEditor.js 23:0-84 40:23-48 43:80-111 71:11-47 93:27-58 93:62-92 99:4-35 99:53-83 106:8-40 115:11-43 122:11-43 128:11-42 134:11-42 141:11-42 148:11-42 155:11-42 167:33-64 173:25-66 175:51-81 181:25-66 183:30-60 189:25-66 210:22-52 229:4-45 235:4-45
 @ ./node_modules/monaco-editor/esm/vs/editor/editor.api.js 8:0-81 21:13-34
 @ ./node_modules/monaco-editor/esm/vs/editor/edcore.main.js 15:0-32 15:0-32
 @ ./node_modules/@finos/perspective-viewer/dist/pkg/snippets/perspective-viewer-362cf5cec2bfcc07/inline1.js
 @ ./node_modules/@finos/perspective-viewer/dist/pkg/perspective_viewer.js 2:0-90 841:18-31
 @ ./node_modules/@finos/perspective-viewer/dist/esm/perspective-viewer.js 1:641-762 1:798-870 1:1671-1672 1:1817-1818 1:1949-1950 1:3510-3621 1:3750-3751 1:3971-4082 1:4209-4210
 @ ./src/index.js 5:0-35

包-json

 "devDependencies": {
        "style-loader": "^3.3.1",
        "css-loader": "^4.3.0",
        "file-loader": "^6.2.0",
        "@finos/perspective-webpack-plugin": "^1.1.0",
        "html-replace-webpack-plugin": "^2.6.0",
        "html-webpack-plugin": "^5.5.0",
        "webpack": "^5.0.0",
        "webpack-cli": "^4.7.2",
        "webpack-dev-server": "^4.7.2",
        "webpack-merge": "^5.8.0"
        
    },
    "dependencies": {
        "@finos/perspective": "^1.1.0",
        "@finos/perspective-viewer": "^1.1.0",
        "@finos/perspective-viewer-d3fc": "^1.1.0",
        "@finos/perspective-viewer-datagrid": "^1.1.0"
    }

webpack配置

module.exports = {
    ...
    ...
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
}

Answer 1

我错过了在 'rules' 中包含一个加载器，但在 package.json 中定义了。

以下规则有效。

rules: [
         {
           test: /\.css$/i,
           use: ['file-loader', 'style-loader', 'css-loader']
         }
        ]

finos/perspective-viewer：css-loader 在 'exports' 上抛出 CssSyntaxError

finos/perspective-viewer: css-loader throws CssSyntaxError on 'exports'

node.js

webpack

css-loader