styleguidist / react-styleguidist Goto Github PK
View Code? Open in Web Editor NEWIsolated React component development environment with a living style guide
Home Page: https://react-styleguidist.js.org/
License: MIT License
Isolated React component development environment with a living style guide
Home Page: https://react-styleguidist.js.org/
License: MIT License
Hi this is more a question than a issue. I'm trying to use react-styleguidist on a project that as a webpack alias for components
, that seems to class with react-styleguidist that is also loading things from components
as well: import Layout from 'components/Layout'
Do you know a way around this problem?
Kind regards
Sune
When I try to run react-styleguidist I get this error
ERROR in ./src/browser/components/Layout/Grid.scss
Module parse failed: /Users/smashercosmo/Documents/Projects/oppex-react/src/browser/components/Layout/Grid.scss Line 1: Unexpected token ILLEGAL
You may need an appropriate loader to handle this file type.
| @import "Variables";
|
| .root {
@ ./src/browser/components/Layout/Grid.react.js 9:16-38
It doesn't know how to deal with imports in scss. Webpack itself handles all these stuff correctly.
I'm trying to get up and running and I think I'm getting pretty close. However I'm having an issue with my first component. I'm using a file called Button.jsx
that has a const Button = React.createClass({
and export default Button;
at the bottom. I have styleguidist setup like so:
rootDir: './src',
components: './components/**/*.jsx',
skipComponentsWithoutExample: true,
getExampleFilename: function(componentpath) {
return componentpath.replace(/\.jsx?$/, '.examples.md');
}
when I view the style guide I see ProxyClass
where I would expect Button
then in my example I get:
ReferenceError: Can't find variable: Button
all the docs from the file are fine and the example code is there and looking ok, just no preview or component name.
Basically, the page breaks because of key
s here:
renderComponents() {
let { highlightTheme, components } = this.props;
return components.map((component) => {
return (
<ReactComponent highlightTheme={highlightTheme} component={component} key={component.name}/>
);
});
}
I think we could detect it in styleguide.loader.js
and then either fix it (component #1
, component #2
, etc) or throw an error with some friendly message.
Each time I do npm install <anything>
in my project (using npm 2), I get these annoying warnings:
npm WARN unmet dependency /Users/mikolajdadela/code/lb-react-frontend/node_modules/react-styleguidist/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents/node_modules/fstream-ignore requires fstream@'~0.1.17' but will load
npm WARN unmet dependency /Users/mikolajdadela/code/lb-react-frontend/node_modules/react-styleguidist/node_modules/webpack/node_modules/watchpack/node_modules/chokidar/node_modules/fsevents/node_modules/fstream,
npm WARN unmet dependency which is version 1.0.8
Is this fixable?
Nice default design is great but ability to customize it for particular project is even better.
Possible solutions:
(originally reported in #9 (comment))
I can now run styleguidist, and it can display the props for one component, but when I add another one, it fails:
I think it's because of the enum in the other component's propTypes
. Here are the propTypes
of the relevant component:
propTypes: {
issue: React.PropTypes.object,
width: React.PropTypes.oneOf([26, 40, 55, 70, 110, 155, 190, 265]),
style: React.PropTypes.object,
},
I know this is not an issue specifically with react-styleguidist, for example: reactjs/react-docgen#29
This happens in a lot of cases: when extending/composing components, or when using Redux and the connect()
wrapper. For example, the following component is not recognised:
class Theme extends Component {
// ...
render() {
// ...
}
}
function mapStateToProps(state) {
const variables = selectVariables(state.theme.name)
return {
variables: selectVariables(state.theme.name),
styles: selectStyles(state.theme.name, variables)
}
}
function mapDispatchToProps(dispatch) {
return bindActionCreators(ThemeActions, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(Theme)
When using wrappers, we could use two files: _Theme.jsx
(export "raw" component and use it for styleguide), and Theme
(that uses wrappers etc.). However it would be great if it just work.
Any ideas on what needs to be done?
Hi,
As I noticed before in twitter, I've recently made a fork of this repo, creating SourceJS integration plugin - https://github.com/sourcejs/sourcejs-react-styleguidist. This allows to combine all the best from styleguidist features, and SourceJS platform. Demo example of how it works could be found here https://github.com/sourcejs/sourcejs-react-bundle-example.
I changed quite a few things to make integration possible, but it could be a big pain to sync both version in future, so it's better to think which parts we can re-use. I really believe collaboration is the best option we can choose, allowing to contribute to common toolset from both parties.
Would be great, if we can elaborate on it and think which parts could be improved with more flexible configuration, and which components would be nice to decouple from the main repo.
Code and high-level integration description is available in the plugin repo https://github.com/sourcejs/sourcejs-react-styleguidist. Here's a slight overview of my changes and some thoughts about potential re-usage approach:
Changed entry file
sourcejs/sourcejs-react-styleguidist@1fe97fc
Updated src/index.js
file, so it could handle different model from styleguide-loader. This is done to render component example per SourceJS spec, because we separate component documentation into different pages.
I also use there components/Playground
directly, since I need only rendered component example and editor.
Re-use solution: allow to define custom entry file from styleguidist configuration.
Changed styleguide and example loaders
Since I've needed custom data model to pass into entry file, I've changed styleguide.loader.js
, to keep file re-usable, we can probable expose components
key renderer function to configuration.
Few small changes were also done in examples.loader.js
primarily to readExamples
function, which should be also overridable.
Re-use solution: expose rendering functions to configuration, so they could be overridden.
Updated Playground component
sourcejs/sourcejs-react-styleguidist@ead8127#diff-7fe7badfce237da87bab50760526fd30R27
Using custom entry file, we will be able to override any UI components to approach our needs. This should be useful also for theming the styleguide.
Changed config.js lib and webpack config
sourcejs/sourcejs-react-styleguidist@ead8127
I can move my changes from config.js
to other abstraction later on, so here's nothing to be changed in the core.
Changes in utils/utils.js
can be handled by just making util functions more robust, and allowing them to accept Object or Array.
setComponentsNames
and globalizeComponents
should accept objects as well as arrays.This does not render correctly:
items: PropTypes.arrayOf(PropTypes.shape({
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
label: PropTypes.any.isRequired
})).isRequired
Expected result:
items arrayOf ???
Actual result:
items arrayOf
The extract-text-webpack-plugin has a bug which is fixed in newer webpack: webpack-contrib/extract-text-webpack-plugin#132
How to add loaders, existing loaders, etc.
Development server isn't working properly with the included example. After git clone [email protected]:sapegin/react-styleguidist.git
I run the example with:
$ ./bin/styleguidist server --config ./example/styleguide.config.js
Listening at http://localhost:3000
webpack built bb4f1fafc1fb15880004 in 12464ms
http://localhost:3000/
works fine. I make some change (either to the components or Readme.md
) but hot reload isn't working. I manually reload the page but still don't get the changes.
My environment:
$ node -v
v0.12.7
And npm list
output here.
Styleguidist currently uses Babel 5, and my project uses Babel 6.
I have babel config in my package.json
, containing the following:
"babel": {
"plugins": ["transform-react-jsx"],
"ignore": ["node_modules/**/*"]
},
Then when I start styleguidist server
, I get:
Module build failed: TypeError: The plugin "transform-react-jsx" didn't export a Plugin instance
This happens because Styleguidist webpack config uses Babel 5, it loads plugins as specified in make-webpack-config
(which is fine, these plugins are all compatible), and the plugins from babel config in the upper directory (which is a Babel 6 plugin, thus incompatible with Babel 5).
Getting the title'd error why trying to run styleguidist.
I'm not sure what's going on. I tried to troubleshoot myself, but was unsuccessful.
> [email protected] styleguide-server /PROJECT
> styleguidist server
Listening at http://localhost:3000
webpack built 25ce954cda50e939fb85 in 823ms
Hash: 25ce954cda50e939fb85
Version: webpack 1.12.2
Time: 823ms
Asset Size Chunks Chunk Names
build/bundle.js 45.1 kB 0 main
chunk {0} build/bundle.js (main) 7.69 kB [rendered]
[0] multi main 40 bytes {0} [built] [1 error]
[1] (webpack)-hot-middleware/client.js 3.27 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
[3] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
[4] (webpack)-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
[5] (webpack)-hot-middleware/client-overlay.js 883 bytes {0} [built]
[6] (webpack)-hot-middleware/process-update.js 2.93 kB {0} [built]
ERROR in ./~/react-styleguidist/src/index.js
Module build failed: TypeError: Illegal kind "string" for plugin ""
at PluginManager.add (/PROJECT/node_modules/react-styleguidist/node_modules/babel-core/lib/transformation/file/plugin-manager.js:196:13)
at File.buildTransformers (/PROJECT/node_modules/react-styleguidist/node_modules/babel-core/lib/transformation/file/index.js:237:21)
at new File (/PROJECT/node_modules/react-styleguidist/node_modules/babel-core/lib/transformation/file/index.js:139:10)
at Pipeline.transform (/PROJECT/node_modules/react-styleguidist/node_modules/babel-core/lib/transformation/pipeline.js:164:16)
at transpile (/PROJECT/node_modules/react-styleguidist/node_modules/babel-loader/index.js:12:22)
at Object.module.exports (/PROJECT/node_modules/react-styleguidist/node_modules/babel-loader/index.js:71:12)
@ multi main
This looks like a great project and I just wanted to try it out, but sadly I seem to have an error in my config.
=> npm run styleguide-server
> [email protected] styleguide-server /Users/timm/Projects/react-components
> styleguidist server
Listening at http://localhost:3000
webpack built 2b950ff29d70bb484414 in 145ms
Hash: 2b950ff29d70bb484414
Version: webpack 1.12.2
Time: 145ms
Asset Size Chunks Chunk Names
build/bundle.js 44.4 kB 0 main
chunk {0} build/bundle.js (main) 7.37 kB [rendered]
[0] multi main 40 bytes {0} [built] [1 error]
[1] (webpack)-hot-middleware/client.js 3.11 kB {0} [built]
[2] (webpack)/buildin/module.js 251 bytes {0} [built]
[3] (webpack)-hot-middleware/~/strip-ansi/index.js 161 bytes {0} [built]
[4] (webpack)-hot-middleware/~/strip-ansi/~/ansi-regex/index.js 145 bytes {0} [built]
[5] (webpack)-hot-middleware/client-overlay.js 917 bytes {0} [built]
[6] (webpack)-hot-middleware/process-update.js 2.75 kB {0} [built]
ERROR in multi main
Module not found: Error: Cannot resolve 'file' or 'directory' ./src/index in /Users/timm/Projects/react-components
@ multi main
Any hint would be appreciated.
My config looks like this:
module.exports = {
title: 'Style guide',
rootDir: './src',
components: './components/**/*.js',
}
Any help is appreciated :-)
The following produces invalid HTML:
marked.parse('<div>')
...and if the HTML is invalid, I get this error in console:
...and all the code examples after the invalid HTML part are broken.
I guess we could either:
a) report this as bug in marked
(but they could say - well, you give inavlid html in, you get invalid html out - it's a big deal mostly with React)
b) check if the produced HTML is valid and throw an error pointing to the problematic file
c) use some other parser like react-markdown
robert-air:example operatino $ ls
lib styleguide.config.js
robert-air:example operatino $ styleguidist build
Building style guide...
/Users/operatino/.nvm/versions/node/v4.2.1/lib/node_modules/react-styleguidist/src/utils/config.js:80
throw Error('Styleguidist config not found: ' + CONFIG_FILENAME + '.');
^
Error: Styleguidist config not found: styleguide.config.js.
at Error (native)
at findConfig (/Users/operatino/.nvm/versions/node/v4.2.1/lib/node_modules/react-styleguidist/src/utils/config.js:80:10)
at readConfig (/Users/operatino/.nvm/versions/node/v4.2.1/lib/node_modules/react-styleguidist/src/utils/config.js:28:23)
at Object.<anonymous> (/Users/operatino/.nvm/versions/node/v4.2.1/lib/node_modules/react-styleguidist/src/utils/config.js:102:18)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
at Object.<anonymous> (/Users/operatino/.nvm/versions/node/v4.2.1/lib/node_modules/react-styleguidist/src/make-webpack-config.js:9:14)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:311:12)
at Module.require (module.js:366:17)
This looks like a fantastic little module but I can't seem to get it working. I'm using Browserify normally as my bundler (not webpack for local dev) with ES6 React components. Here is my config:
module.exports = {
title: 'SpotHero React Components',
rootDir: './',
components: 'frontend/src/js/components/**/*.jsx',
styleguideDir: './spothero/static/main/uniform/docs-react'
};
If I run the build script and nothing else, the resulting HTML page shows this error:
Error: HtmlWebpackPlugin: Unable to read HTML template "./src/templates/index.html"
If I try to run the server for local dev I just get:
Cannot GET /
When I look at my Terminal window I see this:
[185] ./~/react-styleguidist/~/css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!./~/react-styleguidist/~/postcss-loader!./~/react-styleguidist/~/sanitize.css/dist/sanitize.css 2.17 kB {0} [built]
[186] ./~/react-styleguidist/~/style-loader/addStyles.js 6.09 kB {0} [built]
[187] ./~/react-styleguidist/src/styles.css 1.25 kB {0} [built]
ERROR in ./frontend/src/js/components/breadcrumbs/Breadcrumbs.jsx
Module parse failed: /Users/mprzybylski/Work/SpotHero/SpotHero-Django/frontend/src/js/components/breadcrumbs/Breadcrumbs.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React, {Component, PropTypes} from 'react';
|
| class Breadcrumbs extends Component {
@ ./~/react-styleguidist/loaders/styleguide.loader.js! 3:139-253
Over and over for all my components that its trying to parse.
Any ideas what I'm doing wrong? Really appreciate any help you could offer.
The background-color: inherit;
breaks stuff for me, because my styles expect stuff to be transparent by default (so that the parent background-image
is visible).
In general, while rules like this would be ok for a newly-starting product, they are not acceptable for a library that should interoperate with other existing styles.
Related: csstools/sanitize.css#43. Maybe upgrading sanitize.css to 2.1 would quick-fix this?
EDIT: but wait... we already have "sanitize.css": "3.0.0"
in package.json... I don't understand why this rule is still there.
I found that my components are being styled by the react-styleguidist postcss loader, which is suboptimal, as my project also uses CSS modules with other capabilities than the ones supplied by react-styleguidist. @sapegin seems to agree: #60 (comment)
Ideally I would like react-styleguidist not to use any kind of special loaders for my components. Right now .js
, .jsx
, .css
and .json
files are going through the react-styleguidist loaders : https://github.com/sapegin/react-styleguidist/blob/master/src/make-webpack-config.js#L145-L185
I no that this is more controversial wish, but if you don't agree it would be nice to be able to disabled that using a configuration.
Kind regards
Sune
First off I want to say I'm pretty excited about this project. I've been working on my own styleguide based on much of the same tech, so I'm excited to potentially work along side others.
One thing I'm currently doing is letting example files be either markdown or full on react components. This way if I need to store state or similar to show examples of how a component works I can. I'm still digging into your code, so maybe this is currently possible, but if not it might be a nice thing to have if there is a simple way to provide it.
JSXTransformer is deprecated.
I will start it here, please post some useful questions/answers that you already have answered when using styleguidist. We can move them to the README when we have more of them.
If you believe that this should not be a FAQ and would better be merged into the main documentation, please comment. :)
Here's one from me:
How can I debug code of my examples?
Just open your developer tools and typedebugger;
in your code example.
The latest version of react-docgen supports React stateless components, it would be really nice if they was also supported by react-styleguidist:
https://github.com/reactjs/react-docgen/commits/v2.4.0
I tested the new version on our style guide and it works great.
Upgrading react-codemirror
to 0.2.0
will probably fix it.
See JedWatson/react-codemirror@5bf2a20#diff-903ef30e8a234bfe0d0d7900f041e618L8884
💥 2.0.0 is out 💥
There are some breaking changes planned (or needs discussion) for the next release:
Removed or postponed items:
.babelrc
which should fix the problem.Array of regexp masks or function.
Hi, first I wanted to say that your project looks impressive! :)
But I just tried styleguidist on my existing project, and it failed with a lot of errors. From what I understand, react-styleguidist/loaders/props.loader.js
tried to parse my *.jsx
files as ordinary JS (error message is mostly Unexpected token <
). I don't know why exactly this happens, but it seems to me that styleguidist has some assumptions about project that aren't mentioned in the readme. I'll try to list what might be relevant here (i.e. how my project differs from your example):
.jsx
file extension, the example uses .js
.require()
and module.exports
.ui/**/*.jsx
path for my components, and this path includes unit tests as well. (I use the Jest's recommended directory structure).Any suggestions what I could do to make it work?
P.S. I just tried react-docgen
CLI on some example component of mine and it works fine.
I have a modal that I would like to showcase, but it need to be closed from the beginning. I created a hack to support this, but it would be really nice if react-styleguidist would support something similar out of the box:
<State>
{(state, setState) =>
<div>
<Button onClick={() => setState({ isOpen: !state.isOpen })}>Open modal</Button>
<Modal isOpen={state.isOpen} onClick={() => setState({ isOpen: false })}>Modal content</Modal>
</div>
}
</State>
To preserve displayName
when using React.createClass()
.
If the project already has rules with loaders defined in webpack config, they might conflict with loaders from styleguidist (CSS and JSON loaders for instance).
I'd suggest to keep the styleguidist webpack config minimal and extend the project's webpack config, adding only loaders required for styleguidist to work properly.
And drop React 0.13 support.
If existing project's .babelrc
already uses babel-plugin-react-transform
when it will throuw following error:
ERROR in ./~/react-styleguidist/src/index.js
Module build failed: ReferenceError: The plugin "babel-plugin-react-transform" collides with another of the same name
This can be fixed by setting BABEL_ENV
for instance to BABEL_ENV=styleguidist
in package.json
. But I think this can be handled by this package itself. I'll try to submit a PR soon.
-"styleguide-server": "styleguidist server",
+"styleguide-server": "BABEL_ENV=styleguidist styleguidist server",
module.exports = {
rootDir: ['./src', './node_modules/material-ui/lib', /* ... */],
// ...
};
This way it becomes easy to use 3rd party components in examples.
#25 was merged, but I forgot to add the related documentation. TODO :)
Draft:
The examples are extracted from markdown code blocks. They can use any components defined on the page (all the components are exposed as global variables) without requiring them. If you need anything else, you can require
it just like you would in an ordinary .js
file. Here's a markdown example:
Simple example:
<Message data={ {content: 'Hello world'} } />
More complex example:
var mockData = require('./mocks');
<Message data={ {content: 'Hello world'} } />
Note that for mock data, it's often a good idea to use the same mocks in the unit tests too.
If you need more complex demos, you can even use React.createClass
right in your code examples, but it's often a good idea to define them in a separate MyComponentDemo.js
file instead and then just require them in markdown.
The single reason is: performance.
In this recorded timeline I'm playing with a simple progress bar component. And it seems that anything that might become bigger than page width would cause a full page layout recalculation and re-render (I mean browser rerender, not react). (Rendering is purple in these graphs)
Attaching the nav always via position: fixed
and having a margin-right
on Layout
should fix this.
This file is resetting styles across the board. Im finding that my inputs don't have borders, my selects look like text with no select styling at all.
Provide a function (as a config option) that will receive a file path and a component name and return a new string.
For example this will allow to have import Button from 'components/Button';
instead of components/Button/Button.js
.
It would be cool if we could have a task to run all the code examples from the docs and check that they don't throw exceptions both when used with ReactDOM.render
and ReactDOMServer.renderToString
. I'd like to put it in npm test
task for my project and have it checked with CI.
We just need to get the examples using examples.loader
, and do it for all the code
chunks.
I would even implement it myself, but I can't figure out how. I thought I could write something similar to mocha-loader, but I just don't get what's going on there (it's a pitch loader, whatever that really means).
Or maybe enhanced-require (unmaintained 😞) in Node would help? I have no idea.
Webpack docs about usage in Node.js might be useful.
I do not argue that we need a feature like this in react-styleguidist, but I'd like to have this for my project, and imho having a recipe how to do this could be also useful for others.
I wasn't sure where to post this so I'm just putting it in an issue. After having worked with this awesome tool a bit over the weekend here are some suggestions which I think would make it more extensible for larger projects:
As for the last item, I think this is pretty important for larger codebases where there are lots of components to be shown. It would be fantastic to have something that functions similar to this:
http://spothero.com/uniform/#ui/css
What do you think about these?
Try something like this.
I needed to add the json-loader
because the color
npm package imports some JSON config files and those break web pack without it.
In order to get this working with styleguidist
I had to move the colors
package to node_modules/react-styleguidist/node_modules
though..
This is how I configure webpack:
updateWebpackConfig: function(webpackConfig, env) {
webpackConfig.module = webpackConfig.module || {};
webpackConfig.module.loaders = webpackConfig.module.loaders || [];
webpackConfig.module.loaders.push({ test: /\.json$/, loader: 'json-loader' });
return webpackConfig;
},
There seems to be a path issue with require in this project.
Originally suggested by @reintroducing in #12:
Ability to somehow group components with a navigation so you can show/hide only what section you want to see
As for the last item, I think this is pretty important for larger codebases where there are lots of components to be shown. It would be fantastic to have something that functions similar to this:
I love this idea. My current codebase has around 20 components now, so it's not big, but navigating the page is hard already. I think that it's OK to keep it all on one page, we just need some better navigation. Imho the Bootstrap documentation is a great example of this.
Possibly related issue that might be useful: react-bootstrap/react-bootstrap#51
This project might be useful too: https://github.com/makotot/react-scrollspy
I get the following error:
Listening at http://localhost:3000
Error when parsing index.js
Error: Multiple exported component definitions found.
/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleAliasPlugin.js:30
request: newRequest.path,
^
TypeError: Cannot read property 'path' of null
at Tapable.next (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleAliasPlugin.js:30:27)
at Tapable.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/ModuleAliasPlugin.js:42:5)
at Tapable.applyPluginsParallelBailResult (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/tapable/lib/Tapable.js:139:14)
at Tapable.doResolve (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:83:15)
at Tapable.resolve (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/Resolver.js:43:33)
at Tapable.resolve (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/enhanced-resolve/lib/UnsafeCachePlugin.js:23:14)
at NormalModuleFactory.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:80:28)
at /Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/async/lib/async.js:713:13
at async.forEachOf.async.eachOf (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/async/lib/async.js:233:13)
at _parallel (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/async/lib/async.js:712:9)
at Object.async.parallel (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/async/lib/async.js:726:9)
at NormalModuleFactory.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:73:10)
at NormalModuleFactory.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:27:4)
at NormalModuleFactory.<anonymous> (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:156:3)
at NormalModuleFactory.applyPluginsAsyncWaterfall (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/node_modules/tapable/lib/Tapable.js:75:69)
at NormalModuleFactory.create (/Users/sunesimonsen/Code/zendesk/knowledge_client/node_modules/webpack/lib/NormalModuleFactory.js:141:7)
I'm running version 1.2.1 right now and it also warning me about the multi export:
Listening at http://localhost:3000
Error when parsing index.js
Error: Multiple exported component definitions found.
webpack built 276e76ed2a0dc560b56f in 16786ms
But everything works fine with version 1.2.1.
Do you have any idea what this could be about?
Kind regards
Sune
Right now the structure is very strongly component-oriented. It's a good idea for component libraries, but in real world projects there is a need for overview/explanation pages. Being able to add some introduction, higher-level explanation, documentation of data fetching/processing or just a pile of random snippets of html/jsx would be cool.
Additionally, I'd like to be able to define the order of my pages in generated docs.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.