Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot seem to import CSS into storybook using a create-react-app generated project. #3685

Closed
jimklo opened this issue May 30, 2018 · 2 comments
Closed

Cannot seem to import CSS into storybook using a create-react-app generated project. #3685

jimklo opened this issue May 30, 2018 · 2 comments

Comments

@jimklo
Copy link

jimklo commented May 30, 2018 •
edited
Loading

Bug or support request summary

Trying to import CSS in storybook config.js within a create-react-app app.

I keep getting this error when I run yarn run storybook:

ERROR in ./src/css/app.css
Module parse failed: Unexpected token (2:0)
You may need an appropriate loader to handle this file type.
| /* jsTree default theme */
| .jstree-node,
| .jstree-children,
| .jstree-container-ul {
 @ ./.storybook/config.js 4:0-28
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

Steps to reproduce

This is what I've done for configuration of Storybook:

I am using LESS, however I'm pre-generating the CSS using this sort of configuration in my package.json:

"scripts": {
    "build-css": "less-watch-compiler --run-once --main-file=app.less src/less src/css",
    "watch-css": "npm run build-css && less-watch-compiler --main-file=app.less src/less src/css", 
    "storybook-watch": "start-storybook -p 9009 -s public",
    "storybook-build": "build-storybook -s public",
    "storybook": "npm-run-all -p watch-css storybook-watch",
    "build-storybook": "npm-run-all build-css storybook-build"
}

Which is the current recommended way to deal with style transpilers in CRA.

Also due to some other issue, related to a Swagger generated client and CRA, it had to rewire the the CRA to disable Webpack AMD module detection, which I've duplicated within my .storybook/webpack.config.js like so:

module.exports = (storybookBaseConfig, configEnv) => {
  let config = fixAMDSwaggerClient(storybookBaseConfig, configEnv);

  return config;
}

const fixAMDSwaggerClient = (config, env) => {
  
  const addedRules = [ ...config.module.rules, {
    test: /sunflower-client\/.*\.js$/,
    use: 'imports-loader?define=>false'
  }]
  config.module.rules = addedRules
  
  return config
}

Within my config.js, I've got the following defined:

import { configure } from '@storybook/react';

import '../src/css/app.css';

const req = require.context('../src/stories', true, /\.js$/);

function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

I have tried the various suggestions referenced in #1603, however none of those solutions seem to work, and actually produce even more errors (publicPath is undefined)

Not sure how to proceed.

Please specify which version of Storybook and optionally any affected addons that you're running

"dependencies": {
    "bootstrap": "^3.3.7",
    "es6-promise": "^4.2.4",
    "font-awesome": "^4.7.0",
    "highlight.js": "^9.12.0",
    "immutability-helper": "^2.7.0",
    "immutable": "^3.8.2",
    "jstree-bootstrap-theme": "git+https://github.com/orangehill/jstree-bootstrap-theme.git",
    "lodash": "^4.17.10",
    "prop-types": "^15.6.1",
    "querystring": "^0.2.0",
    "react": "^16.3.2",
    "react-bootstrap": "^0.32.1",
    "react-dom": "^16.3.2",
    "react-immutable-proptypes": "^2.1.0",
    "react-pure-render": "^1.0.2",
    "react-redux": "^5.0.7",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.2.0",
    "sunflower-client": "file://...."
  },
  "devDependencies": {
    "@storybook/addon-actions": "^3.4.6",
    "@storybook/addon-knobs": "^3.4.6",
    "@storybook/addon-links": "^3.4.6",
    "@storybook/addons": "^3.4.6",
    "@storybook/react": "^3.4.6",
    "babel-core": "^6.26.3",
    "babel-runtime": "^6.26.0",
    "imports-loader": "^0.8.0",
    "jsdoc": "^3.5.5",
    "less-loader": "^4.1.0",
    "less-watch-compiler": "^1.11.3",
    "license-checker": "^20.0.0",
    "npm-run-all": "^4.1.3",
    "react-app-rewired": "^1.5.2",
    "redux-devtools-extension": "^2.13.2"
  }

Affected platforms

  • does not appear to be platform specific.
@jimklo
Copy link
Author

jimklo commented May 30, 2018

Additional info.

Tried changing the import in config.js to:

import '!style-loader!css-loader!../src/css/app.css';

Which is a somewhat improved error... I now get a bunch of errors about not being able to load fonts and svg images:

ERROR in ./src/css/fonts/titillium/titilliumweb-bold-webfont.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:34636-34694
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-extralight-webfont.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:33452-33516
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-regular-webfont.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:34050-34111
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:36422-36502
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf
Module parse failed: Unexpected character '' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:82621-82704
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-regular-webfont.woff
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:33958-34020
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-extralight-webfont.woff
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:33357-33422
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:36198-36280
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:82391-82476
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-bold-webfont.woff
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:34547-34606
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:82507-82591
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:36311-36392
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/jstree-bootstrap-theme/src/themes/proton/throbber.gif
Module parse failed: Unexpected character '�' (1:6)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:14085-14168 6:19768-19851 6:25504-25587
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-extralight-webfont.eot
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:33156-33220 6:33243-33307
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/jstree-bootstrap-theme/src/themes/proton/30px.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:27443-27522 6:27687-27766 6:28371-28450 6:31858-31937 6:32611-32690 6:32826-32905
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/jstree-bootstrap-theme/src/themes/proton/32px.png
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:10794-10873 6:14256-14335 6:14424-14503 6:14846-14925 6:16279-16358 6:19945-20024 6:20119-20198 6:20565-20644 6:22028-22107 6:25681-25760 6:25854-25933 6:26299-26378
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:82152-82235 6:82258-82341
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-regular-webfont.eot
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:33763-33824 6:33847-33908
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.eot?v=4.7.0
Module parse failed: Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:35965-36045
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.eot
Module parse failed: Unexpected character '�' (1:1)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:36068-36140
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-bold-webfont.eot
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
 @ ./node_modules/css-loader!./src/css/app.css 6:34358-34416 6:34439-34497
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-extralight-webfont.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg">
 @ ./node_modules/css-loader!./src/css/app.css 6:33550-33614 6:34998-35062
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-regular-webfont.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg">
 @ ./node_modules/css-loader!./src/css/app.css 6:34145-34206 6:35223-35284
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./src/css/fonts/titillium/titilliumweb-bold-webfont.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg">
 @ ./node_modules/css-loader!./src/css/app.css 6:34728-34786 6:35448-35506
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg">
 @ ./node_modules/css-loader!./src/css/app.css 6:82738-82821
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js
ERROR in ./node_modules/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg>
 @ ./node_modules/css-loader!./src/css/app.css 6:36536-36616
 @ ./node_modules/style-loader!./node_modules/css-loader!./src/css/app.css
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/react/dist/server/config/polyfills.js ./node_modules/@storybook/react/dist/server/config/globals.js ./node_modules/webpack-hot-middleware/client.js?reload=true ./.storybook/config.js

@jimklo
Copy link
Author

jimklo commented May 30, 2018

okay... so I found the solution to my issue, which points out the fact I probably didn't fully read the docs for full control .storybook/webpack.config.js.

This was my fix using .storybook/webpack.config.js.

module.exports = (storybookBaseConfig, configEnv) => {
  fixAMDSwaggerClient(storybookBaseConfig, configEnv);
  
  storybookBaseConfig.module.rules.push(
    {
      test: /\.(woff|woff2|eot|ttf|svg|gif|png)$/,
      use: 'url-loader'
    });
  
  return storybookBaseConfig;
}

const fixAMDSwaggerClient = (config, env) => {
  
  config.module.rules.push({
    test: /sunflower-client\/.*\.js$/,
    use: 'imports-loader?define=>false'
  })
}

@jimklo jimklo closed this as completed May 30, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@jimklo