react-cosmos: React Cosmos Next: Webpack build fails with cryptic errors

What’s wrong?

This is my current folder structure:

__fixtures__
  |- span.js
  |- paragraph.js

This is span.js fixture. The other fixture is exactly the same:

import React from 'react';
import { Span } from 'enkel-ui'; // this is linked in package.json

export default <Span disabled>Hey this is a span!</Span>

Steps to reproduce

I have a script in package.json called cosmos. I just run yarn cosmos.

Screenshots

User info

  • Server terminal output
[Cosmos] See you at http://localhost:5000
[Cosmos] Using default webpack config
[Cosmos] Building webpack...
webpack built 197c2ef897fe764d04eb in 1998ms
✖ 「wdm」: Hash: 197c2ef897fe764d04eb
Version: webpack 4.29.6
Time: 1998ms
Built at: 07/28/2019 6:59:27 PM
      Asset      Size  Chunks  Chunk Names
    main.js  2.21 MiB    main  main
main.js.map  2.49 MiB    main  main
Entrypoint main = main.js main.js.map
[0] multi ./node_modules/react-cosmos/dist/domRenderer/reactDevtoolsHook.js ./node_modules/@skidding/webpack-hot-middleware/client.js?reload=true&overlay=false ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js 52 bytes {main} [built]
[./__fixtures__/span.js] 1.54 KiB {main} [built] [failed] [1 error]
[./node_modules/@skidding/webpack-hot-middleware/client-overlay.js] 2.17 KiB {main} [built]
[./node_modules/@skidding/webpack-hot-middleware/client.js?reload=true&overlay=false] 7.68 KiB {main} [built]
[./node_modules/@skidding/webpack-hot-middleware/node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/@skidding/webpack-hot-middleware/process-update.js] 4.44 KiB {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]
[./node_modules/react-cosmos/dist/domRenderer/index.js] 1.33 KiB {main} [built]
[./node_modules/react-cosmos/dist/domRenderer/reactDevtoolsHook.js] 884 bytes {main} [built]
[./node_modules/react-cosmos/dist/plugins/webpack/client/errorOverlay/index.js] 292 bytes {main} [built]
[./node_modules/react-cosmos/dist/plugins/webpack/client/hmrErrorHandler.js] 317 bytes {main} [built]
[./node_modules/react-cosmos/dist/plugins/webpack/client/index.js] 770 bytes {main} [built]
[./node_modules/react-cosmos/dist/plugins/webpack/client/userDeps.js] 278 bytes {main} [built]
[./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {main} [built]
    + 131 hidden modules

ERROR in ./__fixtures__/span.js
Module build failed (from ../node_modules/babel-loader/lib/index.js):
ReferenceError: [BABEL] /Users/samrith/Work/enkel/example/__fixtures__/span.js: Unknown option: base.root. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see https://babeljs.io/docs/en/plugins#pluginpresets-options.
    at Logger.error (/Users/samrith/Work/enkel/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (/Users/samrith/Work/enkel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:226:20)
    at OptionManager.init (/Users/samrith/Work/enkel/node_modules/babel-core/lib/transformation/file/options/option-manager.js:368:12)
    at File.initOptions (/Users/samrith/Work/enkel/node_modules/babel-core/lib/transformation/file/index.js:212:65)
    at new File (/Users/samrith/Work/enkel/node_modules/babel-core/lib/transformation/file/index.js:135:24)
    at Pipeline.transform (/Users/samrith/Work/enkel/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at transpile (/Users/samrith/Work/enkel/node_modules/babel-loader/lib/index.js:50:20)
    at Object.module.exports (/Users/samrith/Work/enkel/node_modules/babel-loader/lib/index.js:173:20)
 @ ./node_modules/react-cosmos/dist/plugins/webpack/client/userDeps.js 7:26-91
 @ ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js
 @ multi ./node_modules/react-cosmos/dist/domRenderer/reactDevtoolsHook.js ./node_modules/@skidding/webpack-hot-middleware/client.js?reload=true&overlay=false ./node_modules/react-cosmos/dist/plugins/webpack/client/index.js
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  558 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/html-webpack-plugin/default_index.ejs] 376 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/lodash/lodash.js] 528 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {HtmlWebpackPlugin_0} [built]
  • Cosmos version: 5.0.0-alpha.21
  • If bug occurred on upgrade: Working Cosmos version

You can check out the repo with the error here: https://github.com/samrith-s/enkel

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Comments: 15 (15 by maintainers)

Most upvoted comments

Thanks!

Would it be too much to ask to update NEXT.md with the two gotchas?

Not at all, I will quickly create a PR and tag you on it! 😃

And, perfect! I can also pick up some issues over this week which might need help!

OH yes! I missed it too, even though I read through all of it!

Dang it. Thanks, it works now! I LOVE the new UI! 😁