Can't locate module 'fs', 'tls', 'net'. Subsequent failure to extend default webpack config.

[delewis13]

Describe the bug

Attempting to create a story for a component that uses NPM modules that require 'tls', 'fs' and 'net'.

Receive error [note: do not receive this during usual build]:

ERROR in ./node_modules/forever-agent/index.js
Module not found: Error: Can't resolve 'tls' in 'C:\Program Files\Splunk\etc\apps\aaam-reportextractor-ui\appserver\static\re_react\node_modules\forever-agent'
 @ ./node_modules/forever-agent/index.js 7:10-24
 @ ./node_modules/request/request.js
 @ ./node_modules/request/index.js
 @ ./src/re_App.js
 @ ./src/re_App.stories.js
 @ ./src sync \.stories\.js$
 @ ./.storybook/config.js
 @ 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

Subsequently attempt to resolve by extending default webpack config as per https://github.com/request/request/issues/1529. As such add the following webpack.config.js file to my .stories folder which is in root directory:

module.exports = {
  node: {
    console: 'mock',
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
  }
};

Receive error:

ERROR in ./src/components/lightBox/docSettings/images/check.svg 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <?xml version="1.0" encoding="utf-8"?>
| <svg width="1792" height="1792" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(237, 237, 237)" d="M1671 566q0 40-28 68l-724 724-136 136q-28 28-68 28t-68-28l-136-136-362-362q-28-28-28-68t28-68l136-136q28-28 68-28t68 28l294 295 656-657q28-28 68-28t68 28l136 136q28 28 28 68z"/></svg>
 @ ./src/components/lightBox/docSettings/re_DocSettings.css (./node_modules/react-scripts/node_modules/css-loader??ref--6-1!./node_modules/postcss-loader/src??postcss!./src/components/lightBox/docSettings/re_DocSettings.css) 7:3963-3992
 @ ./src/components/lightBox/docSettings/re_DocSettings.css
 @ ./src/components/lightBox/docSettings/re_DocSettings.js
 @ ./src/components/lightBox/re_LightBox.js
 @ ./src/components/lightBox/re_LightBox.stories.js
 @ ./src sync \.stories\.js$
 @ ./.storybook/config.js
 @ 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

Looks like the Storybook webpack config is being overwritten rather than extended. Subsequently think that I must be doing the webpack.config extension incorrectly, so consult docs. Copy paste the example found at https://storybook.js.org/docs/configurations/custom-webpack-config/

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
      },
    ],
  },
};

Hit the same error again.

So, my issues appears twofold: (1) Issue with imports of 'fs', 'tls' and 'net' (2) Inability to properly extend Storybook default webpack.

Additional context My package.json:

{
  "name": "re_react",
  "version": "3.0.0",
  "private": true,
  "dependencies": {
    "autosize": "^4.0.2",
    "axios": "^0.18.0",
    "file-saver": "^1.3.8",
    "meteor-later": "^1.2.0",
    "moment": "^2.22.2",
    "node-forge": "^0.7.5",
    "pretty-checkbox": "^3.0.3",
    "prop-types": "^15.6.2",
    "react": "^16.8.2",
    "react-color": "^2.14.1",
    "react-cookie": "^3.0.8",
    "react-cron-builder": "~1.0.3",
    "react-dom": "^16.8.2",
    "react-fittext": "^1.0.0",
    "react-grid-layout": "^0.16.6",
    "react-input-range": "^1.3.0",
    "react-modal": "^3.5.1",
    "react-redux": "^6.0.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.5",
    "react-select": "^2.4.1",
    "reactcss": "^1.2.3",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "request": "^2.88.0",
    "universal-cookie": "^3.0.7",
    "uuid": "^3.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build-simple": "react-scripts build",
    "build": "react-scripts build && mv -f ./build/static/js/main.*.js ./build/static/js/re_main.js && mv -f ./build/static/js/runtime*.js ./build/static/js/re_runtime.js && mv -f ./build/static/js/*.*.chunk.js ./build/static/js/re_chunk.js && mv -f ./build/static/css/main.*.css ./build/static/css/reportExtractor.css",
    "build-move": "react-scripts build && mv -f ./build/static/js/main.*.js ../js/reportExtractor.js && mv -f ./build/static/css/main.*.css ../css/reportExtractor.css && rm -rf ../media && mv -f ./build/static/media ../",
    "build-windows": "react-scripts build && move /Y build\\static\\js\\main.*.js build\\static\\js\\re_main.js && move build\\static\\js\\runtime*.js build\\static\\js\\re_runtime.js && move build\\static\\js\\*.chunk.js build\\static\\js\\re_chunk.js && move /Y build\\static\\css\\main.*.css build\\static\\css\\reportExtractor.css",
    "build-windows-move": "react-scripts build && move /Y build\\static\\js\\main.*.js ..\\js\\reportExtractor.js && move /Y build\\static\\css\\main.*.css ..\\css\\reportExtractor.css && rmdir ..\\media /S /Q && move /Y .\\build\\static\\media ..\\",
    "storybook": "start-storybook -p 9009 -s public -c .storybook",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build-storybook": "build-storybook -s public"
  },
  "homepage": ".",
  "devDependencies": {
    "@babel/core": "^7.3.4",
    "@sambego/storybook-state": "^1.3.2",
    "@storybook/addon-actions": "^4.1.13",
    "@storybook/addon-links": "^4.1.13",
    "@storybook/addon-storyshots": "^4.1.13",
    "@storybook/addons": "^4.1.13",
    "@storybook/react": "^4.1.13",
    "babel-loader": "^8.0.5",
    "babel-plugin-macros": "^2.5.0",
    "core-js": "^2.6.4",
    "css-loader": "^2.1.0",
    "eslint-plugin-react": "^7.11.1",
    "install": "^0.10.4",
    "node-sass": "^4.11.0",
    "react-image-resizer": "^1.3.0",
    "react-test-renderer": "^16.8.2",
    "require-context.macro": "^1.0.4",
    "sass-loader": "^7.1.0",
    "string-replace-loader": "^2.1.1",
    "style-loader": "^0.23.1",
    "svg-sprite-loader": "^4.1.3"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

[jschimmoeller]

i ran into this issue also it has to do with you loading up node/server library with storybook. what i had to do was mock them.

let's say you have .storybook dir like this:

.storybook fsMock.js netMock.js tlsMock.js webpack.config.js

fsMock.js:

module.exports = { readFileSync: () => 'mocked file', // other things in fs that you are using }

netMock.js:

module.exports = { netFunc: () => 'mocked file', // other things in net that you are using }

tlsMock.js:

module.exports = { tlsFunc: () => 'mocked file', // other things in tls that you are using }

webpack.config.js:

const path = require('path');

module.exports = (storybookBaseConfig, configType) => { storybookBaseConfig.resolve.alias = { ...storybookBaseConfig.resolve.alias, 'fs': path.resolve(dirname, 'fsMock.js'), 'net': path.resolve(dirname, 'netMock.js'), 'tls': path.resolve(__dirname, 'tlsMock.js') };

return storybookBaseConfig; };

[stale[bot]]

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!

[stale[bot]]

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!