Error: Cannot find scss module error after babel build

Question

I'm trying to publish a react library to npm, but in my local npm builds I get errors due to scss files. I'm using babel to transpile to es5 but the final files are still requiring scss files.

An example is that my original console.js file has the following import:

import './console.scss'

My transpiled console.js file that is causing the error contains the following:

require('./console.scss')

I get an error: Error: Cannot find module './console.scss'

I'm testing this by creating a local npm package. My process is:

npm run build
npm run build:babel
npm pack

I then install the package in another project to test it, where I'm getting the errors.

This is my package.json:

 {
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.js",
  "scripts": {
    "start": "nodemon server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "build-watch": "webpack -w",
    "build-babel": "babel src --presets babel-preset-es2015  --out-dir dist"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "presets": [
      "es2015",
      "react"
    ]
  },
  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.24.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "babel-plugin-css-modules-transform": "^1.2.7",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.0",
    "express": "^4.15.2",
    "html-loader": "^0.4.5",
    "node-sass": "^4.5.2",
    "node-sass-loader": "^0.1.7",
    "nodemon": "^1.11.0",
    "path": "^0.12.7",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "webpack": "^2.3.3"
  }
}

This is my webpack config:

'use strict';

const webpack = require('webpack')
const path = require('path')

module.exports = {
    entry: "./src/indexLocal.js",
    output: {
        path: path.join(__dirname, 'src'),
        filename: 'bundle.js',
    },
    module: {
        loaders: [
        {
            test: /.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015'],
            },
        },
        {
        test: /\.scss$/,
        loaders: ['style-loader', 'css-loader', 'sass-loader'],
        }
        ,{
            test: /.html$/,
            loader: 'html-loader',
            query: {
                minimize: true
            }
        }
        ]
    }
};

How do I ensure my npm package contains the original styling without running into errors due to importing scss files? Cheers

Is your npm package meant to publish the Webpack bundle, or a normal structured directory? You've got two separate build tools and it's not clear why both affect this question. If you're using babel's CLI to publish, then there is nothing there to compile the .scss files for Node. — loganfsmyth
My npm package is supposed to publish a normal structured dir. The webpack build is for local dev but I thought I'd include it in the question if anyone wanted to see. What would I use to compile the .scss files for Node? — Darkzuh

UX Nomaan UX Nomaan · Accepted Answer · 2018-07-18T21:25:18

When you run build-babel script it creates dist folder with your transpiled code but it doesn't move your sass files so you need another npm script to move your sass file to the dist folder.

Error: Cannot find scss module error after babel build

2 Answers