Gatsby: Gatsby build fails due to bootstrap | How to import scss from node_modules?

[rickymetz]

Summary

Gatsby build fails when trying to grab sass inside node_modules via @imports.

Relevant information

Locally gatsby develop works as expected but fails when running gatsby build on netlify:

5:05:37 PM: Build ready to start
5:05:38 PM: build-image version: 42bca793ccd33055023c56c4ca8510463a56d317
5:05:38 PM: buildbot version: 15854c92f1b74f9c77ad951b5536193c76eff25e
5:05:38 PM: Fetching cached dependencies
5:05:38 PM: Starting to download cache of 92.4MB
5:05:39 PM: Finished downloading cache in 627.729957ms
5:05:39 PM: Starting to extract cache
5:05:43 PM: Finished extracting cache in 3.593616334s
5:05:43 PM: Finished fetching cache in 4.302520939s
5:05:43 PM: Starting to prepare the repo for build
5:05:43 PM: Preparing Git Reference refs/heads/master
5:05:44 PM: Starting build script
5:05:44 PM: Installing dependencies
5:05:44 PM: Started restoring cached node version
5:05:47 PM: Finished restoring cached node version
5:05:47 PM: v8.12.0 is already installed.
5:05:48 PM: Now using node v8.12.0 (npm v6.4.1)
5:05:49 PM: Attempting ruby version 2.3.6, read from environment
5:05:50 PM: Using ruby version 2.3.6
5:05:50 PM: Using PHP version 5.6
5:05:50 PM: Started restoring cached node modules
5:05:50 PM: Finished restoring cached node modules
5:05:50 PM: Started restoring cached yarn cache
5:05:50 PM: Finished restoring cached yarn cache
5:05:51 PM: Installing NPM modules using Yarn version 1.3.2
5:05:52 PM: yarn install v1.3.2
5:05:52 PM: [1/4] Resolving packages...
5:05:55 PM: [2/4] Fetching packages...
5:06:16 PM: info [email protected]: The platform "linux" is incompatible with this module.
5:06:16 PM: info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
5:06:16 PM: [3/4] Linking dependencies...
5:06:16 PM: warning "gatsby > mini-css-extract-plugin > schema-utils > [email protected]" has unmet peer dependency "ajv@>=5.0.0".
5:06:16 PM: warning "gatsby-plugin-sass > [email protected]" has unmet peer dependency "webpack@^3.0.0 || ^4.0.0".
5:06:24 PM: [4/4] Building fresh packages...
5:06:28 PM: success Saved lockfile.
5:06:28 PM: Done in 35.64s.
5:06:28 PM: NPM modules installed using Yarn
5:06:28 PM: Started restoring cached go cache
5:06:28 PM: Finished restoring cached go cache
5:06:28 PM: unset GOOS;
5:06:28 PM: unset GOARCH;
5:06:28 PM: export GOROOT='/opt/buildhome/.gimme/versions/go1.10.linux.amd64';
5:06:28 PM: export PATH="/opt/buildhome/.gimme/versions/go1.10.linux.amd64/bin:${PATH}";
5:06:28 PM: go version >&2;
5:06:28 PM: export GIMME_ENV='/opt/buildhome/.gimme/env/go1.10.linux.amd64.env';
5:06:28 PM: go version go1.10 linux/amd64
5:06:28 PM: Installing missing commands
5:06:28 PM: Verify run directory
5:06:28 PM: Executing user command: gatsby build
5:06:31 PM: success open and validate gatsby-configs — 0.010 s
5:06:31 PM: success load plugins — 0.263 s
5:06:32 PM: success onPreInit — 0.783 s
5:06:32 PM: success delete html and css files from previous builds — 0.117 s
5:06:32 PM: success initialize cache — 0.009 s
5:06:32 PM: success copy gatsby files — 0.035 s
5:06:32 PM: success onPreBootstrap — 0.015 s
5:06:33 PM: success source and transform nodes — 0.074 s
5:06:33 PM: success building schema — 0.304 s
5:06:33 PM: success createPages — 0.006 s
5:06:33 PM: success createPagesStatefully — 0.021 s
5:06:33 PM: success onPreExtractQueries — 0.001 s
5:06:33 PM: success update schema — 0.157 s
5:06:33 PM: success extract queries from components — 0.045 s
5:06:33 PM: success run graphql queries — 0.047 s — 6/6 130.94 queries/second
5:06:33 PM: success write out page data — 0.004 s
5:06:33 PM: success write out redirect data — 0.001 s
5:06:33 PM: success onPostBootstrap — 0.002 s
5:06:33 PM: info bootstrap finished - 4.913 s
5:06:46 PM: error Generating JavaScript bundles failed
5:06:46 PM: 
5:06:46 PM:   Error: ./src/scss/boot.scss
5:06:47 PM:   Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.j  s):
5:06:47 PM:   ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loa  der.js):
5:06:47 PM:   
5:06:47 PM:   @import '../../node_modules/bootstrap/scss/bootstrap.scss';
5:06:47 PM:   ^
5:06:47 PM:         File to import not found or unreadable: ../../node_modules/bootstrap/scs  s/bootstrap.scss.
5:06:47 PM:         in /opt/build/repo/src/scss/boot.scss (line 64, column 1)
5:06:47 PM:       at runLoaders (/opt/build/repo/node_modules/webpack/lib/NormalModule.js:28  6:20)
5:06:47 PM:       at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:364:11
5:06:47 PM:       at /opt/build/repo/node_modules/loader-runner/lib/LoaderRunner.js:230:18
5:06:47 PM:       at context.callback (/opt/build/repo/node_modules/loader-runner/lib/Loader  Runner.js:111:13)
5:06:47 PM:       at Object.render [as callback] (/opt/build/repo/node_modules/sass-loader/l  ib/loader.js:52:13)
5:06:47 PM:       at Object.done [as callback] (/opt/build/repo/node_modules/neo-async/async  .js:8077:18)
5:06:47 PM:       at options.error (/opt/build/repo/node_modules/node-sass/lib/index.js:294:  32)
5:06:47 PM:    @ ./src/components/layout.js 8:0-27
5:06:47 PM:    @ ./src/pages/404.js
5:06:47 PM:    @ ./.cache/async-requires.js
5:06:47 PM:    @ ./.cache/production-app.js
5:06:47 PM: 
5:06:47 PM: Caching artifacts
5:06:47 PM: Started saving node modules
5:06:47 PM: Finished saving node modules
5:06:47 PM: Started saving yarn cache
5:06:47 PM: Finished saving yarn cache
5:06:47 PM: Started saving pip cache
5:06:47 PM: Finished saving pip cache
5:06:47 PM: Started saving emacs cask dependencies
5:06:47 PM: Finished saving emacs cask dependencies
5:06:47 PM: Started saving maven dependencies
5:06:47 PM: Finished saving maven dependencies
5:06:47 PM: Started saving boot dependencies
5:06:47 PM: Finished saving boot dependencies
5:06:47 PM: Started saving go dependencies
5:06:47 PM: Finished saving go dependencies
5:06:47 PM: Error running command: Build script returned non-zero exit code: 1
5:06:47 PM: Failing build: Failed to build site
5:06:47 PM: failed during stage 'building site': Build script returned non-zero exit code: 1
5:06:47 PM: Finished processing build request in 1m9.176732498s

It seems other people have had similar problems but there doesn't seem to be a decided solution for v2 (that I could find).

From https://github.com/gatsbyjs/gatsby/issues/7452 :

This works for me @import "../../node_modules/bootstrap/dist/css/bootstrap.css";.
It appears v1 is clumsy when importing styles.

Tried several variations on this theme to no avail.

What is the proper way to grab scss/css from packages in node_modules?

Environment

  System:
    OS: macOS 10.14
    CPU: x64 Intel(R) Core(TM) i5-4288U CPU @ 2.60GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.6.0 - ~/.nvm/versions/node/v8.6.0/bin/node
    Yarn: 1.9.2 - /usr/local/bin/yarn
    npm: 6.4.1 - ~/.nvm/versions/node/v8.6.0/bin/npm
  Browsers:
    Chrome: 70.0.3538.77
    Firefox: 63.0
    Safari: 12.0
  npmPackages:
    gatsby: ^2.0.19 => 2.0.19
    gatsby-image: ^2.0.15 => 2.0.15
    gatsby-plugin-manifest: ^2.0.5 => 2.0.5
    gatsby-plugin-offline: ^2.0.5 => 2.0.5
    gatsby-plugin-react-helmet: ^3.0.0 => 3.0.0
    gatsby-plugin-sass: ^2.0.2 => 2.0.2
    gatsby-plugin-sharp: ^2.0.10 => 2.0.10
    gatsby-source-filesystem: ^2.0.4 => 2.0.4
    gatsby-transformer-sharp: ^2.1.4 => 2.1.4
  npmGlobalPackages:
    gatsby-cli: 2.4.3

File contents

gatsby-config.js:

module.exports = {
  siteMetadata: {
    title: 'Gatsby Default Starter',
  },
  plugins: [
    'gatsby-plugin-react-helmet',
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    'gatsby-transformer-sharp',
    'gatsby-plugin-sharp',
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: 'gatsby-starter-default',
        short_name: 'starter',
        start_url: '/',
        background_color: '#663399',
        theme_color: '#663399',
        display: 'minimal-ui',
        // icon: 'src/images/gatsby-icon.png', // This path is relative to the root of the site.
      },
    },
    'gatsby-plugin-offline',
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        precision: 8,
        includePaths: [
          require('path').resolve(__dirname, 'node_modules')
        ],
      },
    },
  ],
}

package.json:

{
  "name": "gatsby-starter-default",
  "description": "Gatsby default starter",
  "version": "1.0.0",
  "author": "Kyle Mathews <[email protected]>",
  "dependencies": {
    "gatsby": "^2.0.19",
    "gatsby-image": "^2.0.15",
    "gatsby-plugin-manifest": "^2.0.5",
    "gatsby-plugin-offline": "^2.0.5",
    "gatsby-plugin-react-helmet": "^3.0.0",
    "gatsby-plugin-sass": "^2.0.2",
    "gatsby-plugin-sharp": "^2.0.10",
    "gatsby-source-filesystem": "^2.0.4",
    "gatsby-transformer-sharp": "^2.1.4",
    "node-sass": "^4.9.4",
    "react": "^16.5.1",
    "react-dom": "^16.5.1",
    "react-helmet": "^5.2.0"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"src/**/*.js\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "prettier": "^1.14.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-default"
  }
}

gatsby-node.js: N/A
gatsby-browser.js: N/A
gatsby-ssr.js: N/A

[rickymetz]

Interestingly enough, I can build it locally fine:

gatsby build
success open and validate gatsby-config — 0.009 s
success load plugins — 0.186 s
⠁ objc[9225]: Class GNotificationCenterDelegate is implemented in both /Users/richardmetzger/code/sam-site/node_modules/gatsby-plugin-sharp/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib (0x1079b3498) and /Users/richardmetzger/code/sam-site/node_modules/sharp/vendor/lib/libgio-2.0.0.dylib (0x1088bb510). One of the two will be used. Which one is undefined.
success onPreInit — 0.677 s
success delete html and css files from previous builds — 0.033 s
success initialize cache — 0.010 s
success copy gatsby files — 0.063 s
success onPreBootstrap — 0.008 s
success source and transform nodes — 0.061 s
success building schema — 0.214 s
success createPages — 0.006 s
success createPagesStatefully — 0.025 s
success onPreExtractQueries — 0.001 s
success update schema — 0.123 s
success extract queries from components — 0.039 s
success run graphql queries — 0.039 s — 6/6 162.02 queries/second
success write out page data — 0.008 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.002 s

info bootstrap finished - 5.072 s

success Building production JavaScript and CSS bundles — 6.522 s
success Building static HTML for pages — 0.519 s — 5/5 21.84 pages/second
Generated public/sw.js, which will precache 14 files, totaling 461279 bytes.
info Done building in 12.325 sec

So I'm not certain where the point of failure is. Any help would be greatly appreciated.

[dajocarter]

Try using a ~ in front your path like @import "~bootstrap/dist/css/bootstrap"

[rickymetz]

@dajocarter

Neither @import '~/bootstrap/scss/bootstrap.scss'; nor @import '~/bootstrap/scss/bootstrap'; work, they also fail to compile in develop:

/src/scss/boot.scss (./node_modules/css-loader??ref--13-oneOf-1-1!./node_modules/postcss-loader/lib??postcss-3!./node_modules/sass-loader/lib/loader.js??ref--13-oneOf-1-3!./src/scss/boot.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

@import '~/bootstrap/scss/bootstrap';
^
      File to import not found or unreadable: ~/bootstrap/scss/bootstrap.
      in /Users/richardmetzger/code/sam-site/src/scss/boot.scss (line 64, column 1)

Is there any other info I can provide that might help? I'm at a loss.

[dajocarter]

Did you try without the forward slash at the start, like @import ~bootstrap/...?

[dajocarter]

@rickymetz See here https://stackoverflow.com/questions/49518277/import-css-from-node-modules-in-webpack

[rickymetz]

@dajocarter That worked! Thank you so much for your help!