Use with webpack & gatsby

[jacoblapworth]

Hi there, i've tried to install react-view in a Gatsby project and i'm running into issues with I'm guessing webpack and babel:

This dependency was not found:
* fs in ./node_modules/convert-source-map/index.js, ./node_modules/react-view/node_modules/@babel/core/lib/transformation/normalize-file.js

Stackoverflow suggests adding this to the Webpack config:

node: {
      fs: 'empty'
    }

Which doesn't seem to solve it, is there anything i'm missing? Relatively new to webpack sorry.

[raunofreiberg]

Can you try upgrading @babel/core to the latest version?

[tajo]

@raunofreiberg Do you still rely on mocking fs in your webpack config? This should just work out of the box. I kinda removed that fs import from convert-source-map and babel/core was bumped since then.

[tajo]

What version of webpack do you use?
What version of convert-source-map you have in your node_modules?

[jacoblapworth]

Here's a sample project started with Gatsby's default and added react-view:
https://github.com/jacoblapworth/gatsby-starter-default-with-react-view
Gatsby has Webpack as a dependency: "webpack": "~4.41.6"

[swashcap]

Our team is finalizing a migration to gatsby@^3, which includes an upgrade to webpack@^5, which removed default for Node.js built-ins (ref: https://webpack.js.org/migrate/5/). We had to modify configuration significantly to get react-view to work because it relies on @babel/*, which depends on Node.js built-ins.

Here's what we did:

// gatsby-node.js
exports.onCreateWebpackConfig = ({actions}) => {
  actions.setWebpackConfig({
    node: {
      global: true,
    },
    plugins: [
      new webpack.ProvidePlugin({
        Buffer: require.resolve("buffer/"),
        process: require.resolve("./stubs/process.js"),
      }),
    ],
    resolve: {
      alias: {
        chalk: require.resolve("./stubs/chalk.js"),
        process: require.resolve("./stubs/process.js"),
      },
      fallback: {
        assert: false,
        fs: false,
        os: false,
        path: require.resolve("path-browserify"),
      },
    },
  });
};

// stubs/chalk.js
const stub = (...args) => args;

module.exports = {
  grey: stub,
  red: {
    bold: stub,
  },
  reset() {},
};

// stubs/process.js
module.exports =
  typeof global !== "undefined" && global.process
    ? global.process
    : require("../node_modules/process/browser.js");

(We also installed path-browserify, process, and buffer packages from npmjs.com.)