Build fails when importing Bootstrap CSS

[jhyland87]

Im having an issue when I try to import the Bootstrap CSS files.

Heres the App.js file, its pretty basic:

import React from "react";
import { Router, Route, browserHistory } from "react-router";
import { createApp } from "@phenomic/preset-react-app/lib/client";
import ReactBootstrap, { Button, ButtonGroup, DropdownButton, MenuItem } from 'react-bootstrap';

import 'assets/plugins/bootstrap/css/bootstrap.css';

const Home = () => (
  <div>
    <p>This is a homepage</p>
  </div>
);

export default createApp(() => (
  <Router history={browserHistory}>
    <Route path="/" component={Home} />
  </Router>
));

And heres the build error:

$ npm run build

> [email protected] build /Users/me/Documents/Projects/personal/myproject.local
> phenomic build

⚡️ Hey! Let's get on with it
ModuleNotFoundError: Module not found: Error: Can't resolve 'assets/plugins/bootstrap/css/bootstrap.css' in '/Users/me/Documents/Projects/personal/myproject.local'
    at factoryCallback (/Users/me/Documents/Projects/personal/myproject.local/node_modules/webpack/lib/Compilation.js:276:40)
    at factory (/Users/me/Documents/Projects/personal/myproject.local/node_modules/webpack/lib/NormalModuleFactory.js:235:20)
    at resolver (/Users/me/Documents/Projects/personal/myproject.local/node_modules/webpack/lib/NormalModuleFactory.js:60:20)
    at asyncLib.parallel (/Users/me/Documents/Projects/personal/myproject.local/node_modules/webpack/lib/NormalModuleFactory.js:127:20)
    at /Users/me/Documents/Projects/personal/myproject.local/node_modules/async/dist/async.js:3861:9
    at /Users/me/Documents/Projects/personal/myproject.local/node_modules/async/dist/async.js:421:16
    at iteratorCallback (/Users/me/Documents/Projects/personal/myproject.local/node_modules/async/dist/async.js:996:13)
    at /Users/me/Documents/Projects/personal/myproject.local/node_modules/async/dist/async.js:906:16
    at /Users/me/Documents/Projects/personal/myproject.local/node_modules/async/dist/async.js:3858:13
    at resolvers.normal.resolve (/Users/me/Documents/Projects/personal/myproject.local/node_modules/webpack/lib/NormalModuleFactory.js:119:22)

(Full output here)

The specific error is:

Can't resolve 'assets/plugins/bootstrap/css/bootstrap.css' in '/Users/me/Documents/Projects/personal/myproject.local'

But I verified that the bootstrap.css file does in fact reside at the location specified in the error. After some troubleshooting, I noticed that it will import a CSS file assets/plugins/bootstrap/css/styles.css just fine, but when I rename it to assets/plugins/bootstrap/css/bootstrap.css, it throws the error above.

I tried to look around a bit, and the only issue I found thats somewhat similar to mine would be Issue #649. But that actually doesn't seem to be the same issue.

Any help would be appreciated. Thanks!

[MoOx]

@jhyland87 This is a node error. When requiring/importing a local file with node, you must use a relative path. So you need to do import "./assets... with a dot (or double dot for parent folder).

[jhyland87]

@MoOx, thanks for the quick reply. I tried that and got another error

ModuleBuildError: Module build failed: ModuleParseError: Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to handle this file type.

(Full error here)

This looks like it may be a webpack error, but all I'm attempting to do is basically copy the Phenomic Aphrodite example and add Bootstrap. Merely including the bootstrap CSS is what throws it all outa whack. Do you have any working phenomic examples using a similar setup?

If you want to see the exact code, here ya go.

[MoOx]

The CSS you are importing is probably importing some resources, maybe using url(). So webpack tries to handle those resources. We plan to extends the default webpack config to be more like CRA (so copy generic stuff). Meanwhile, you should bring your own webpack config starting with this one as a base: https://github.com/phenomic/phenomic/blob/master/packages/plugin-bundler-webpack/src/webpack.config.js

[MoOx]

Bootstrap should work by default as lots of people might want to do the same. Will probably grab webpack config from CRA as the default.

[jhyland87]

Looks like you're right about the url()..

$ grep -nHi 'url(' ./assets/plugins/bootstrap/css/bootstrap.css
./assets/plugins/bootstrap/css/bootstrap.css:266:  src: url('../fonts/glyphicons-halflings-regular.eot');
./assets/plugins/bootstrap/css/bootstrap.css:267:  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff2') format('woff2'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');

I'll take your approach. Thanks for your time!