BlueprintJS Module build failed due to syntax error - blueprintjs

Question

I am getting the following errors when I run npm run storybook.
I am almost positive it's due to something I am missing in my webpack.config or a missing npm package.
I have researched as much as I know how/what to look for to fix this issue and would appreciate a helping hand.
Link to my sample Github repo
https://github.com/hungrysquirrel/storybookv3/commit/85ba4e87ad7b27fbb3433a61c49da0fc254f528d
Errors I can see in my terminal when I start my server
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

I just had the same exact issue. I managed to get it to work by
in global.css:
// replacing
#import '~#blueprintjs/core';
// by the more explicit
#import "~#blueprintjs/core/dist/blueprint.css";
in webpack.config.js I included loaders for css and files:
{ 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

Solved
Includes for scss files within .css file - BAD
Webpack config was incorrect. The setup below fixes the issue
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;
};