DeprecationWarning: Module Chunks

I’m getting the following warning/error when parsing a bootstrap _variable.scss file. My setup is it’s based on next.js

 ERROR  Failed to compile with 5 errors

This dependency was not found:

* fs in ./node_modules/mkdirp/index.js, ./node_modules/node-sass/lib/extensions.js and 3 others

To install it, you can run: npm install --save fs
(node:9903) DeprecationWarning: Module.chunks: Use Module.forEachChunk/mapChunks/getNumberOfChunks/isInChunk/addChunk/removeChunk instead

I’m not really whether if is related to this specific module or the sass-extract module, so I raised the same issue there.

[adamgruber]

I did some digging on this tonight. I believe the problem comes from importing sass-extract since it is not meant to be run in the browser. (It relies on node-sass which relies on fs which doesn’t exist in the browser.)

The correct way to make it work (assuming you are also using webpack) is to use sass-extract-loader. Here’s an example:

import React, { Component } from 'react';
import { ThemeProvider } from 'styled-components';
import logo from './logo.svg';
import './App.css';

const theme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!./vars.scss');

class App extends Component {
  render() {
    return (
      <ThemeProvider theme={theme}>
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1 className="App-title">Welcome to React</h1>
          </header>
          <p className="App-intro">
            To get started, edit <code>src/App.js</code> and save to reload.
          </p>
        </div>
      </ThemeProvider>
    );
  }
}

export default App;

I’ll have to update the documentation to reflect this.

[emsiuser1]

What if you aren’t using webpack? I am using a gulp compiling process. Is there anyway to use this library with that?