Ошибка сборки модуля BlueprintJS из-за синтаксической ошибки

Question

Я получаю следующие ошибки при запуске npm run storybook, Я почти уверен, что это связано с тем, что мне не хватает в моем webpack.config или отсутствующим пакетом npm.

Я исследовал столько, сколько я знаю, как / что искать, чтобы решить эту проблему, и был бы признателен за помощь.

Ссылка на мой пример репозитория Github https://github.com/hungrysquirrel/storybookv3/commit/85ba4e87ad7b27fbb3433a61c49da0fc254f528d

Ошибки, которые я вижу в своем терминале при запуске сервера

ERROR in ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib?{"ident":"postcss","plugins":[null,null]}!./~/@blueprintjs/core/dist/index.js
Module build failed: Syntax Error

(7:1) Unknown word

  5 |  * and https://github.com/palantir/blueprint/blob/master/PATENTS
  6 |  */
> 7 | "use strict";
    | ^
  8 | function __export(m) {
  9 |     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];

 @ ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib?{"ident":"postcss"}!./css/global.css 3:10-151
 @ ./css/global.css
 @ ./stories/index.js
 @ ./.storybook/config.js
 @ multi ./~/@storybook/react/dist/server/config/polyfills.js ./~/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

ERROR in ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib?{"ident":"postcss","plugins":[null,null]}!./~/@blueprintjs/table/src/table.scss
Module build failed: Syntax Error

(1:1) Unknown word

> 1 | // Copyright 2016 Palantir Technologies, Inc. All rights reserved.
    | ^
  2 | // Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
  3 | // of the license at https://github.com/palantir/blueprint/blob/master/LICENSE

 @ ./~/css-loader?{"importLoaders":1}!./~/postcss-loader/lib?{"ident":"postcss"}!./css/global.css 4:10-167

Answer 1

У меня точно такая же проблема. Мне удалось заставить его работать

• в global.css:

  // replacing
  @import '~@blueprintjs/core';
  // by the more explicit
  @import "~@blueprintjs/core/dist/blueprint.css";
  

• в webpack.config.js Я включил загрузчики для CSS и файлов:

  { test: /\.css$/, use: ["style-loader", "css-loader"] },
  
  {
      test: /\.(eot|ttf|woff|woff2)$/,
      // We need to resolve to an absolute path so that this loader
      // can be applied to CSS in other projects (i.e. packages/core)
      loader: require.resolve("file-loader") + "?name=fonts/[name].[ext]"
  },
  

Answer 2

Решаемая

1. Включает файлы scss в файле.css - ПЛОХО
2. Конфигурация Webpack была неверной. Настройка ниже устраняет проблему

const path = require('path');
const srcPath = path.join(__dirname, '../src');
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');

module.exports = (baseConfig, env) => {
  const config = genDefaultConfig(baseConfig, env);
  config.module.rules.push({
        test: /\.scss$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "sass-loader" // compiles Sass to CSS
            }]
  })
  config.resolve.extensions.push('.css', '.scss', '.sass');
  return config;
};