Storybook: Module build failed (from ./node_modules/babel-loader/lib/index.js) due to .babelrc config

Created on 15 Aug 2019  路  6Comments  路  Source: storybookjs/storybook

Got an error while Setting up React Storybook on a boilerplate. Would it be due a dependency?
Error:

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-plugin-transform-decorators-legacy' from ''

These are my dependencies and devDependencies:
```
"dependencies": {
"@amcharts/amcharts4": "^4.4.10",
"@amcharts/amcharts4-geodata": "^4.1.5",
"@babel/runtime": "^7.4.5",
"@date-io/moment": "^1.3.6",
"@material-ui/core": "^4.0.2",
"@material-ui/icons": "^4.0.1",
"@material-ui/pickers": "^3.2.2",
"@material-ui/styles": "^4.0.2",
"array-move": "^2.1.0",
"autosuggest-highlight": "^3.1.1",
"babel-preset-stage-2": "^6.24.1",
"bootstrap": "^4.3.1",
"bootstrap-v4-rtl": "^4.3.1-3",
"can-use-dom": "^0.1.0",
"chart.js": "^2.8.0",
"classnames": "^2.2.6",
"connected-react-router": "^6.4.0",
"cross-env": "^5.2.0",
"downshift": "^3.2.10",
"draft-js": "^0.10.5",
"draftjs-to-html": "^0.8.4",
"firebase": "^6.1.0",
"history": "^4.9.0",
"install": "^0.12.2",
"isomorphic-fetch": "^2.2.1",
"jss-rtl": "^0.2.3",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"nprogress": "^0.2.0",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-autosuggest": "^9.4.3",
"react-big-calendar": "^0.21.0",
"react-bootstrap-sweetalert": "^4.4.1",
"react-chartjs-2": "^2.7.6",
"react-circular-progressbar": "^2.0.1",
"react-ckeditor-component": "^1.1.0",
"react-color": "^2.17.3",
"react-custom-scrollbars": "^4.2.1",
"react-d3-speedometer": "^0.5.5",
"react-device-detect": "^1.6.2",
"react-dnd": "^7.4.5",
"react-dnd-html5-backend": "^7.4.4",
"react-dom": "^16.8.6",
"react-draft-wysiwyg": "^1.13.2",
"react-dropzone": "^10.1.5",
"react-google-maps": "^9.4.5",
"react-hot-loader": "^4.9.0",
"react-icons": "^3.7.0",
"react-intl": "^2.9.0",
"react-joyride": "^2.0.5",
"react-jvectormap": "^0.0.12",
"react-loadable": "^5.5.0",
"react-notifications": "^1.4.3",
"react-number-format": "^4.0.8",
"react-placeholder": "^3.0.2",
"react-redux": "^7.0.3",
"react-router": "^5.0.1",
"react-router-dom": "^5.0.1",
"react-scripts": "^3.0.1",
"react-select": "^3.0.4",
"react-simple-maps": "^0.12.1",
"react-slick": "^0.24.0",
"react-sortable-hoc": "^1.9.1",
"react-star-rating-component": "^1.4.1",
"react-swipeable-views": "^0.13.3",
"react-text-mask": "^5.4.3",
"reactstrap": "^8.0.0",
"recharts": "^1.6.2",
"recompose": "^0.30.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-saga": "^1.0.2",
"save": "^2.4.0",
"slick-carousel": "^1.8.1",
"typeface-roboto": "^0.0.54",
"url-search-params": "^1.1.0"
},
"devDependencies": {
"@storybook/addon-actions": "^5.1.11",
"@storybook/addon-links": "^5.1.11",
"@storybook/addons": "^5.1.11",
"@storybook/react": "^5.1.11",
"eslint": "^6.1.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.0.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.14.3",
"eslint-plugin-react-hooks": "^1.7.0",
"prettier": "^1.18.2",
"reactotron-react-js": "^3.3.2"
}

Environment Info:

System:
OS: macOS High Sierra 10.13.6
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 10.16.0 - /usr/local/bin/node
Yarn: 1.17.3 - /usr/local/bin/yarn
npm: 6.10.3 - /usr/local/bin/npm
Browsers:
Chrome: 76.0.3809.100
Firefox: 68.0.1
npmPackages:
@storybook/addon-actions: ^5.1.11 => 5.1.11
@storybook/addon-links: ^5.1.11 => 5.1.11
@storybook/addons: ^5.1.11 => 5.1.11
@storybook/react: ^5.1.11 => 5.1.11
```
How do I overcome this issue?
Thanks

babel / webpack inactive question / support

Most helpful comment

In _.babelrc_ I changed
{ "presets": ["env"] }
to
{ "presets": ["@babel/preset-env"] }
In _package.json_ devDependencies add
"@babel/core": "^7.4.4", "babel-loader": "^8.0.6",

All 6 comments

The issue is with the config inside .babelrc:

{
  "presets": [
    [
      "es2015",
      {
        "modules": false
      }
    ],
    "react",
    "stage-2"
  ],
  "plugins": [
    "syntax-dynamic-import",
    "transform-decorators-legacy",
    "transform-object-rest-spread",
    "react-hot-loader/babel"
  ],
  "env": {
    "test": {
      "plugins": [
        "transform-decorators-legacy",
        "transform-object-rest-spread",
        "istanbul"
      ]
    }
  }
}

How to avoid this error?
Thanks

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

In _.babelrc_ I changed
{ "presets": ["env"] }
to
{ "presets": ["@babel/preset-env"] }
In _package.json_ devDependencies add
"@babel/core": "^7.4.4", "babel-loader": "^8.0.6",

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Was this page helpful?
0 / 5 - 0 ratings