Skip to content
This repository has been archived by the owner on Sep 7, 2020. It is now read-only.

Build fails when importing Bootstrap CSS #1190

Open
jhyland87 opened this issue Oct 26, 2017 · 5 comments
Open

Build fails when importing Bootstrap CSS #1190

jhyland87 opened this issue Oct 26, 2017 · 5 comments

Comments

@jhyland87
Copy link

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

> myproject.com@1.0.0 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
Copy link
Owner

MoOx commented Oct 26, 2017

@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).

@MoOx MoOx closed this as completed Oct 26, 2017
@MoOx MoOx added the question label Oct 26, 2017
@jhyland87
Copy link
Author

@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
Copy link
Owner

MoOx commented Oct 26, 2017

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 MoOx reopened this Oct 26, 2017
@MoOx
Copy link
Owner

MoOx commented Oct 26, 2017

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
Copy link
Author

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!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants