BlueprintJS Module build failed due to syntax error

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

score 1 · Answer 1 · answered Jul 19 '17 at 13:37

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]"
},

answered Jul 19 '17 at 13:37

Benjamin Habert

11
1

Cheers Benjamin Still errors with the import for @import '~@blueprintjs/table/src/table.scss'; Any sage advice for me? 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 – hungrysquirrel Jul 19 '17 at 19:27

score 1 · Answer 2 · answered Jul 21 '17 at 23:16

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;
};

BlueprintJS Module build failed due to syntax error

2 Answers2