Module parse failed - Babel loader issue?

[elado]

Getting an error when running with this .storybook/config.js:

import { configure } from '@kadira/storybook'

function loadStories() {
  require('../src/SomeComponent')
}

configure(loadStories, module)

Error:

ERROR in ./.storybook/config.js
Module parse failed: ***/.storybook/config.js Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import { configure } from '@kadira/storybook'
|
| function loadStories() {

Seems like babel is not transpiling or it clashes with some config in my package?

[arunoda]

Are you using babel6? Try to see you have a .babelrc in your project root and it has es2015 and react presets.

If not, try to create a sample repo and send to me. I will work on it.

[elado]

Yes. This is my .babelrc in the root of my project:

{
  "presets": ["es2015", "react", "stage-0"],
  "plugins": [
    "transform-runtime",
    "typecheck",
    "transform-decorators-legacy",
    "transform-class-properties",
    "add-module-exports",
    "import-asserts"
  ]
}

I'll work on a repo.

[arunoda]

Great.
BTW: check whether you are using NPM@3

[elado]

npm 3.7.3 and node 5.9.1

[arunoda]

Okay. Just to make it sure. Send me a sample repo.
I will try to see what's going on here.

[travi]

I'm seeing something similar when my webpack config works correctly for production:

ERROR in ./lib/shared/views/stories/primaryNav.jsx
Module parse failed: .../lib/shared/views/stories/primaryNav.jsx Line 7: Unexpected token <
You may need an appropriate loader to handle this file type.
| storiesOf('Primary Nav', module)
|     .add('empty nav', () => (
|         <PrimaryNav primaryNav={[]}/>
|     ));
 @ ./.storybook/config.js 6:4-57

• babel 6
• node 5.1.1
• npm 3.8.5

This is a fairly simple reference app that I thought would be a good testbed for this tool, but I can't seem to figure out how to get past this issue. This project is public.

[travi]

Digging through the examples in more detail, I realized that I needed to add a webpack.config.js under .storybook. I thought I had read somewhere that the existing one in the root of the project would be used automatically, but adding this file got me past this issue.

[arunoda]

@travi I assume this because of the .jsx extension.
Try the latest version: v1.3.0

[travi]

Thank you for that tip. Pulling down that latest version did enabled me to remove the diplicated webpack.config.js from under .storybook

I'm still getting Error: inst.render is not a function once I load it into the browser, which I'm assuming is related to the fact that this component is pure/stateless. I'm still digging in to confirm what I can, but I can log a separate issue for that if you don't have a quick recommendation.

[arunoda]

@travi Great. That's better for another issue.

[arunoda]

@elado I assume this fixed. If not, please re-open and give me more info.

[elado]

Looks like it's fixed in the most recent version. Thanks!

[arunoda]

Great.

[robinspark]

react-storybook and react-storybook-demo are broken again. To fix them, remove all carets/^ from package.json, then run:
$ npm update
//NOTE: running '$ npm install' wont fix the issue as it doesn't resolve micro version changes.

OR
$ yarn upgrade

Then update the webpack packages to the latest. The following package.json for react-storybook-demo runs both the todo application, and react storybook.

{
  "name": "redux-todomvc-example",
  "version": "0.0.0",
  "description": "Redux TodoMVC example",
  "scripts": {
    "start": "node server.js",
    "test": "cross-env NODE_ENV=test mocha --recursive --compilers js:babel-register --require ./test/setup.js",
    "test:watch": "npm test -- --watch",
    "storybook": "start-storybook -p 9001",
    "deploy-storybook": "storybook-to-ghpages"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/reactjs/redux.git"
  },
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/reactjs/redux/issues"
  },
  "homepage": "http://redux.js.org",
  "dependencies": {
    "babel-polyfill": "6.3.14",
    "classnames": "2.1.2",
    "react": "15.0.1",
    "react-dom": "15.0.1",
    "react-redux": "4.2.1",
    "redux": "3.2.1",
    "stack-source-map": "1.0.4"
  },
  "devDependencies": {
    "@kadira/storybook": "2.24.0",
    "@kadira/storybook-addon-comments": "1.1.1",
    "@kadira/storybook-database-cloud": "2.2.0",
    "@kadira/storybook-deployer": "1.0.0",
    "babel-core": "6.3.15",
    "babel-loader": "6.2.0",
    "babel-preset-es2015": "6.3.13",
    "babel-preset-react": "6.3.13",
    "babel-preset-react-hmre": "1.1.1",
    "babel-preset-stage-2": "6.5.0",
    "babel-register": "6.3.13",
    "cross-env": "1.0.7",
    "expect": "1.8.0",
    "express": "4.13.3",
    "jsdom": "5.6.1",
    "mocha": "2.2.5",
    "node-libs-browser": "0.5.2",
    "raw-loader": "0.5.1",
    "react-addons-test-utils": "15.0.1",
    "style-loader": "0.12.3",
    "todomvc-app-css": "2.0.1",
    "webpack": "1.13.2",
    "webpack-dev-middleware": "1.8.4",
    "webpack-hot-middleware": "2.13.0"
  }
}

Also, I'm using node 6.8.1, npm 3.10.8.
Now you can open 2 terminals, and run respectively:
$ npm start
$ npm run storybook

[unutoiul]

when I run

start-storybook -p 9001 -c node_modules/shared-components/.storybook

I get the error

Module parse failed: Unexpected token (12:4) You may need an appropriate loader to handle this file type.

when I do

start-storybook -p 9001 -c .storybook

works fine

can somebody explain what's the difference? I'm pulling my hair out...

I need to have shared components installed by npm so my storybook components will be sitting under node_modules folder.

Thanks,
Lucas

[ndelangen]

@unutoiul This is because the babel loader in our webpack config excludes node_modules.

If you want to do this you either:

• precompile everything so node_modules contains browser-ready code
• override our webpack config and configure it so it does pass node_modules through the babel-loader

[unutoiul]

yes my solution was:

webpack.config.js

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /.jsx?$/,
                loader: 'babel-loader',
                query: {
                    presets: ['es2015', 'react']
                }
            }, {
                test: /\.scss$/,
                loaders: ["style-loader", "css-loader", "sass-loader"],
                include: path.resolve(__dirname, '../')
            }
        ]
    }
}