[1.0.0-rc.3] Unexpected token in bootstrap 4 CSS

[marcdel]

Bug

After adding bootstrap 4.0.0-alpha.6 gluestick throws a syntax error building CSS.

Reproduction Steps

gluestick --version                                                                                                                                                                  
1.0.0-rc.3

• gluestick new gs-bs4
• cd gs-bs4 && yarn add bootstrap@4.0.0-alpha.6 --save
• add import "bootstrap/dist/css/bootstrap.css"; to src/config/application.js
• gluestick start

Current Result

Starting to optimize CSS...
[GlueStick][start-server] Building server entry.
/Users/mdelagrammatikas/Code/gs-bs4/node_modules/bootstrap/dist/css/bootstrap.css:8
html {
     ^
SyntaxError: Unexpected token {
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/mdelagrammatikas/Code/gs-bs4/build/server/renderer.js:1938:18)
    at __webpack_require__ (/Users/mdelagrammatikas/Code/gs-bs4/build/server/renderer.js:21:30)

Expected Result

CSS is minified without error.

[zamotany]

This is actually correct result. By default every module/package that resides in node_modules is treated as external module so webpack will do nothing with it, meaning loaders won't run. In order to get this to work, bootstrap package needs to be marked as non-external package or apply loaders inline. Recommended solution is to use relative paths or special compiled alias, that will tell webpack to compile module.

So you need to replace bootstrap import with one of these:

import "../../node_modules/bootstrap/dist/css/bootstrap.css";

import "compiled/bootstrap/dist/css/bootstrap.css";

[marcdel]

The relative path option works when added to application.js, but not Index.js, which was the other thing I tried initially. I couldn't get the compiled option to work when imported in either place, but there's presumably some other setup piece I'm missing.

import "compiled/bootstrap/dist/css/bootstrap.css";

Starting to optimize CSS...
[GlueStick][start-server] Building server entry.
module.js:472
    throw err;
    ^

Error: Cannot find module 'compiled/bootstrap/dist/css/bootstrap.css'

It's also worth noting that this requirement differs from create-react-app generated projects (importing directly from node_modules works there) which was the cause of my confusion, so I think documenting it was a great idea. Thanks, @lukewalczak!

[zamotany]

It's possible that compiled was added after version 1.0.0-rc.3. Can you try 1.0.0-rc.6??