@storybook/core use old babel-loader@7 and he loading babel-core as dependencie

[bustEXZ]

package.json

  "name": "test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "storybook": "start-storybook -p 9090",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.0.0-beta.51",
    "@babel/core": "^7.0.0-beta.51",
    "@babel/plugin-proposal-class-properties": "^7.0.0-beta.51",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-beta.51",
    "@babel/preset-env": "^7.0.0-beta.51",
    "@babel/preset-react": "^7.0.0-beta.51",
    "@babel/preset-typescript": "^7.0.0-beta.51",
    "@babel/runtime": "^7.0.0-beta.51",
    "@storybook/addon-actions": "4.0.0-alpha.12",
    "@storybook/addon-info": "4.0.0-alpha.12",
    "@storybook/addon-knobs": "4.0.0-alpha.12",
    "@storybook/addon-options": "4.0.0-alpha.12",
    "@storybook/addons": "4.0.0-alpha.12",
    "@storybook/react": "4.0.0-alpha.12",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "typescript": "^2.9.1"
  },
  "dependencies": {
    "babel-loader": "8.0.0-beta.4",
    "webpack": "^4.14.0"
  }
}

.babelrc

{
  "presets": [
    "@babel/env",
    "@babel/react",
    "@babel/typescript"
  ],
  "plugins": [
    "@babel/proposal-class-properties",
    "@babel/proposal-object-rest-spread"
  ]
}

When we try to start storybook, we have an error:

Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: Cannot find module 'babel-core'
    at Function.Module._resolveFilename (module.js:555:15)
    at Function.Module._load (module.js:482:25)
    at Module.require (module.js:604:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/barbashev/workspace/Frontend/Component/test/node_modules/@storybook/core/node_modules/babel-loader/lib/index.js:3:13)
    at Module._compile (module.js:660:30)
    at Object.Module._extensions..js (module.js:671:10)
    at Module.load (module.js:573:32)
    at tryModuleLoad (module.js:513:12)
    at Function.Module._load (module.js:505:3)
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

It solves if we go to /node_modules/@storybook/core/node_modules/babel-loader/lib/index.js:3:13 and change require from "babel-core" to "@babel/core".

[Hypnosphi]

Please use babel-bringe for now.

Storybook 4.0 will have Babel 7 out of the box, you can track the progress in #3746

[Peeja]

That still won't cut it, I believe: babel-loader@7.1.5 has a peer dependency on babel-core@6. That means we can't use babel-core@^7.0.0-0 (which is babel-bridge). Everything works in the app, but the dependencies aren't happy.

[Hypnosphi]

How can we use babel-loader@8 without Babel 7?

[Peeja]

Oh, maybe I misunderstood. How can you use babel-bridge without Babel 7? babel-bridge is Babel 7, no?

[Hypnosphi]

How can you use babel-bridge without Babel 7

We (storybook itself) don't (yet), but you (your app) can

[Hypnosphi]

My point was that we can't update babel-loader on our side without migrating to Babel 7 as default, which is being done in #3746

[Hypnosphi]

If you have yarn, you can use yarn resolutions to enforce v8 though

[Peeja]

Ah, I see what you're saying. We've done that with resolutions, which is why I say everything works in the app, but it breaks yarn check.

Is there a way to set the dependencies so that the peer dependencies allow for 7 in the app, but the direct dependency still uses 6 for Storybook's internals?

[Peeja]

If Babel is being used to build Storybook, should the babel-* packages in @storybook/core's package.json be moved to devDependencies? Then our apps wouldn't have a conflict.

[Hypnosphi]

Is there a way to set the dependencies so that the peer dependencies allow for 7 in the app

This is exactly how it works right now. Or do you mean to make babel-loader a peer dependency as well? Actually, sounds like a good idea

[Hypnosphi]

If Babel is being used to build Storybook, should the babel-* packages in @storybook/core's package.json be moved to devDependencies? Then our apps wouldn't have a conflict.

No, those are to build user stories

[bustEXZ]

With and without dependencies babel-bridge@1.12.11:

ERROR in ./.storybook/config.js
Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
... same error in first post
    at /home/barbashev/workspace/Frontend/Component/navigator/node_modules/@storybook/core/node_modules/babel-loader/lib/fs-cache.js:118:18
    at ReadFileContext.callback (/home/barbashev/workspace/Frontend/Component/navigator/node_modules/@storybook/core/node_modules/babel-loader/lib/fs-cache.js:31:21)
    at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:437:13)
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true

ERROR in ./.storybook/addons.js
Module build failed (from ./node_modules/@storybook/core/node_modules/babel-loader/lib/index.js):
Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.0". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.
.....

I add postintall script to rm node_modules/babel-core and all worked without babel-bridge.

[bustEXZ]

If you know best idea to fix this, please notify :)

[rofrol]

@bustEXZ You have solutions

1. Uprgade to 8.0 beta Warning when use with webpack 4 babel/babel-loader#596
2. Use npm Warning when use with webpack 4 babel/babel-loader#596
3. Ignore the warning? idk

BTW. babel-bridge didn't solved the warning babel/babel#6824

Doing yarn add --dev babel-core@^7.0.0-0 , I still have

$ yarn check
yarn check v1.7.0
info fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
error "babel-loader#babel-core@6" doesn't satisfy found match of "babel-core@7.0.0-bridge.0"
...

Explanation of babel-bridge:

Babel published a babel@7.0.0-bridge.0 package, which takes npm version precedence over the babel@7.0.0-beta.0 we're relying on (yes, as in, "beta" < "bridge", alphabetically) meteor/meteor#9396 (comment)

[bustEXZ]

@rofrol 1, 2 allready complete

3. Its not warning. Its compilation error, and storybook cant complete compilation.

[stale]

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!

[Hypnosphi]

@bustEXZ it should be babel-core@7.0.0-bridge.0 not babel-bridge@1.12.11

[stale]

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!