Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Error in static-app build #8744

Closed
kwameopareasiedu opened this issue Nov 6, 2019 · 7 comments
Closed

Error in static-app build #8744

kwameopareasiedu opened this issue Nov 6, 2019 · 7 comments

Comments

@kwameopareasiedu
Copy link

There seems to be an issue with version 5.2.5 which causes an error in the build of a static app.
The odd thing is that downgrading (all the way to 5.1.8) does not seem to fix the error

To Reproduce
Steps to reproduce the behavior:

  1. Install version 5.2.5 using npx
  2. Add a simple component with an associated story
  3. Run npm run build-storybook
  4. See error
  5. Open index.html of generated app
  6. See error again

Expected behavior
According to your docs... the command should build a fully functional static app I can deploy anywhere

Screenshots
Screenshot from 2019-11-06 19-17-03
Screenshot from 2019-11-06 19-17-05
Screenshot from 2019-11-06 19-17-07
Screenshot from 2019-11-06 19-19-07
Screenshot from 2019-11-06 19-19-14
Screenshot from 2019-11-06 19-19-17
Screenshot from 2019-11-06 19-19-22

Code snippets
Here's my current dev-dependencies:

        "@babel/core": "^7.7.0",
        "@babel/plugin-transform-react-jsx": "^7.7.0",
        "@babel/plugin-transform-spread": "^7.6.2",
        "@babel/preset-env": "^7.7.0",
        "@babel/preset-react": "^7.7.0",
        "@storybook/addon-actions": "^5.2.5",
        "@storybook/addon-links": "^5.2.5",
        "@storybook/addons": "^5.2.5",
        "@storybook/react": "^5.2.5",
        "autoprefixer": "^9.7.1",
        "babel-eslint": "^10.0.3",
        "babel-loader": "^8.0.6",
        "css-loader": "^3.2.0",
        "eslint": "^6.6.0",
        "eslint-plugin-react": "^7.16.0",
        "node-sass": "^4.13.0",
        "postcss-loader": "^3.0.0",
        "prettier": "^1.18.2",
        "prop-types": "^15.7.2",
        "react": "^16.11.0",
        "react-redux": "^7.1.3",
        "react-router": "^5.1.2",
        "redux": "^4.0.4",
        "sass-loader": "^8.0.0",
        "style-loader": "^1.0.0"

Heres my webpack.config.js for storybook

const path = require("path");

module.exports = ({ config }) => {
    config.module.rules.push({
        test: /\.(scss|css)$/,
        exclude: /\node_modules/,
        use: [
            { loader: "style-loader" },
            { loader: "css-loader" },
            {
                loader: "postcss-loader",
                options: { plugins: () => [require("autoprefixer")] }
            },
            { loader: "sass-loader" }
        ]
    });

    config.resolve.extensions.push(".scss");

    return config;
};

System:

Environment Info:

  System:
    OS: Linux 4.15 Ubuntu 18.04.3 LTS (Bionic Beaver)
    CPU: (4) x64 Intel(R) Core(TM) i5-7200U CPU @ 2.50GHz
  Binaries:
    Node: 10.15.3 - ~/.nvm/versions/node/v10.15.3/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.3/bin/npm
  Browsers:
    Chrome: 77.0.3865.120
  npmPackages:
    @storybook/addon-actions: ^5.2.5 => 5.2.5 
    @storybook/addon-links: ^5.2.5 => 5.2.5 
    @storybook/addons: ^5.2.5 => 5.2.5 
    @storybook/react: ^5.2.5 => 5.2.5
@aaronbarker
Copy link

aaronbarker commented Nov 6, 2019

My team ran into the same issue. We tracked it back to an update to @babel/traverse. We Changed our package.json from "@babel/core": "^7.6.0", to "@babel/core": "7.6.0", (dropped the ^for this and all babel related dependencies) and then added a hardcoded"@babel/traverse": "7.6.0",` that we didn't have before. That fixed it for us.

YMMV but hopefully that helps others or helps debug for the storybook team.

Edit: Looks like I misread things and the page I linked to is the fix, not the cause (didn't read closely enough in our mad scramble to fix). You get the idea though ;)

@kwameopareasiedu
Copy link
Author

kwameopareasiedu commented Nov 6, 2019

Ohk... Thanks very much @aaronbarker for the insight...
Will test soon and close the issue if it fixes it...

@welingtonmanoel-hotmart
Copy link

+1

@kwameopareasiedu
Copy link
Author

@aaronbarker
Apparently just installing @babel/traverse fixed the build (npm i -D @babel/traverse@7.6.0)...
I didn't even need to drop the ^ from the other babel libraries...

@kwameopareasiedu
Copy link
Author

I'm closing this issue now since the problem has been fixed. A very big thank you to @aaronbarker for pointing me in the right direction...

@matt-shine
Copy link

matt-shine commented Nov 8, 2019

I'm not sure that fixes it as the issue is intermittent (for me it usually fails the first attempt after removing node_modules and yarn.lock), but subsequent build-storybook attempts succeed.

Adding @babel/traverse@7.6.0 did not resolve for me (for a fresh install), and looking at yarn.lock I can see 7.7.2 being resolved by other dependencies. Attempting to force resolution of 7.6.0 via the package.json resolutions field hasn't panned out.

I'd be interested to see if your build succeeds the first attempt after removing node_modules and yarn.lock @kwameopareasiedu

@leomendoza123
Copy link

@matt-shine delete yarn-lock and node modules solve it for me!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants