Unable to start Storybook with Meteor React project

[mfeuermann]

Im trying to start Storybook with Meteor + React app. Im using npx -p @storybook/cli sb init --type react After that npm run storybook

My config.js is

import { configure } from '@storybook/react'; // automatically import all files ending in *.stories.js configure(require.context('../stories', true, /.stories.js$/), module);

Package.json { "name": "simple", "private": true, "scripts": { "start": "meteor run", "test": "meteor test --once --driver-package meteortesting:mocha", "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha", "visualize": "meteor --production --extra-packages bundle-visualizer", "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook" }, "dependencies": { "@babel/runtime": "^7.3.4", "@beisen/storybook-mantra-core": "^1.7.3", "bootstrap": "^4.3.1", "consola": "^2.11.0", "faker": "^4.1.0", "font-awesome": "^4.7.0", "meteor-node-stubs": "^0.4.1", "moment": "^2.24.0", "react": "^16.5.0", "react-bootstrap": "^1.0.0-beta.14", "react-dom": "^16.5.0", "react-helmet": "^5.2.1", "react-mounter": "^1.2.0", "underscore": "^1.9.1" }, "devDependencies": { "@babel/core": "^7.7.2", "@storybook/addon-actions": "^5.2.6", "@storybook/addon-links": "^5.2.6", "@storybook/addons": "^5.2.6", "@storybook/react": "^5.2.6", "babel-eslint": "^8.2.2", "babel-loader": "^8.0.6", "babel-plugin-import": "^1.6.3", "babel-plugin-react-require": "3.x.x", "babel-preset-meteor": "^6.26.0", "babel-root-slash-import": "1.x.x", "chai": "3.x.x", "enzyme": "^2.2.0", "eslint": "4.18.2", "eslint-plugin-react": "7.7.0", "jsdom": "^8.0.4", "mocha": "2.x.x", "react-addons-test-utils": "^15.4.1", "sinon": "1.17.x" } }

babel.rc { "plugins": [ "react-require", "babel-root-slash-import" ] }

Start failed on [./node_modules/webpack-hot-middleware/process-update.js] (webpack)-hot-middleware/process-update.js 4.35 KiB {vendors~main} [built] [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {vendors~main} [built]

• 230 hidden modules

ERROR in ./.storybook/config.js Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-plugin-babel-root-slash-import' from '/Users/markus/Documents/Programovani_Meteor/rtg-gm-template'

• If you want to resolve "babel-root-slash-import", use "module:babel-root-slash-import" at Function.module.exports [as sync] (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/resolve/lib/sync.js:74:15) at resolveStandardizedName (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/files/plugins.js:101:31) at resolvePlugin (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/files/plugins.js:54:10) at loadPlugin (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/files/plugins.js:62:20) at createDescriptor (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/config-descriptors.js:154:9) at items.map (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/config-descriptors.js:109:50) at Array.map () at createDescriptors (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/config-descriptors.js:109:29) at createPluginDescriptors (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/config-descriptors.js:105:10) at plugins (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/config-descriptors.js:40:19) at mergeChainOpts (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/config-chain.js:319:26) at /Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/config-chain.js:283:7 at buildRootChain (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/config-chain.js:120:22) at loadPrivatePartialConfig (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/partial.js:85:55) at Object.loadPartialConfig (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/@babel/core/lib/config/partial.js:110:18) at Object. (/Users/markus/Documents/Programovani_Meteor/rtg-gm-template/node_modules/babel-loader/lib/index.js:144:26) @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true&quiet=true main[2] Child HtmlWebpackCompiler:

Can you help me with this issue ? Thank you

[florentroques]

in .babelrc under 'plugins' key, add 'babel-plugin-root-import' instead of "babel-root-slash-import" (it seems package has changed name)

so it looks like

{
  "presets": ["babel-preset-expo"],
  "env": {
    "development": {
      "plugins": ["transform-react-jsx-source"]
    }
  },
  "plugins": ["babel-plugin-root-import"]
}

in package.json under devDependencies

remove the "babel-root-slash-import": "1.x.x" key run rm -rf node_modules to clean your modules

then install the package with new name running npm or yarn:

npm install babel-plugin-root-import --save-dev or yarn add babel-plugin-root-import --dev

then run yarn start or npm start

[mfeuermann]

Thank you, working!!!