Compiling js via webpacker results in: SassError: expected "{"

Question

I'm trying to use scss in my rails application, configured by webpacker. Whenever I run rails webpacker:compile, I get the following error:

ERROR in ./app/javascript/stylesheets/application.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".
  ╷
1 │ import api from "!../../../node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js";
  │                                                                                               ^
  ╵
  app/javascript/stylesheets/application.scss 1:95  root stylesheet

I'm having trouble debugging this problem and would appreciate any help.

---

Dependencies

rails: 6.1
webpacker: 6.0.0.pre1
@webpack-cli/serve
webpack: 5.11
webpack-cli: 4.2
webpack-dev-server: 3.11 

---

package.json

{
  "name": "ostor",
  "private": true,
  "dependencies": {
    "@popperjs/core": "^2.6.0",
    "@rails/actioncable": "^6.1.2-1",
    "@rails/activestorage": "^6.1.2-1",
    "@rails/ujs": "^6.1.2-1",
    "@rails/webpacker": "^6.0.0-beta.5",
    "autoprefixer": "^10.2.4",
    "bootstrap": "^v5.0.0-beta2",
    "css-loader": "^5.0.2",
    "css-minimizer-webpack-plugin": "^1.2.0",
    "d3": "^6.2.0",
    "jquery": "^3.5.1",
    "mini-css-extract-plugin": "^1.3.7",
    "postcss": "^8.2.6",
    "postcss-loader": "^5.0.0",
    "sass": "^1.32.7",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "turbolinks": "^5.2.0",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  },
  "version": "0.1.0",
  "devDependencies": {
    "@webpack-cli/serve": "^1.3.0",
    "webpack-dev-server": "^3.11.2"
  },
  "babel": {
    "presets": [
      "./node_modules/@rails/webpacker/package/babel/preset.js"
    ]
  },
  "browserslist": [
    "defaults"
  ]
}

---

config/webpack/base.js:

const { webpackConfig, merge } = require('@rails/webpacker')

const customConfig = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        exclude: /node_modules/,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
}

module.exports = merge(webpackConfig, customConfig)

---

app/javascript/packs/application.js

import ActiveStorage from "@rails/activestorage";
import * as RailsUjs from "@rails/ujs";
import Turbolinks from "turbolinks";

ActiveStorage.start();
RailsUjs.start();
Turbolinks.start();

import "channels";
import "bootstrap";

import "../stylesheets/application.scss";

Breaststroke

I don't think you can use a JavaScript import in a stylesheet. – Mickey

Could you update to the latest Webpacker beta version? The Webpacker config should enable CSS processing for you without you having to modify to config as long as you follow the README instructions: github.com/rails/webpacker#css – Mickey

@Mickey It was working in previous versions and projects :) – Breaststroke

That’s what I’m saying. You may need to work around the default Webpacker 6 config which will extract CSS into a separate file. But I don’t understand why you would want to import webpack loader JavaScript in a CSS file. It seems like a misapplication of webpack. – Mickey

@Mickey You may be right. I'm looking into this. Seems I'm not the only one having this problem: github.com/rails/webpacker/issues/2916 – Breaststroke

Thanks for the link. I misinterpreted your error. Not sure if this is a bug or intended behavior on the maintainers part, but it will make upgrading confusing if it stays this way. – Mickey

As a workaround, I think it should work to remove the stylesheet import and move applicaton.scss to the same directory as application.js, i.e., because they have the same name, Webpacker will recognize these a dual entrypoint. – Mickey

@Mickey Yea, I went with your suggestion. It also helps to read the upgrade guide and to blitz any previous configuration. – Breaststroke

Answer 1

Remove the custom config rules you added for SASS/SCSS. Webpacker 6 will provide the appropriate CSS rules for you when it detects you've installed css-loader, postcss-loader, mini-css-extract-plugin, etc.

Mickey

Answer 2

For the shakapacker users:

You don't need to add the option:

 test: /\.s[ac]ss$/i

in the "rules" section. You just need to add:

yarn add sass sass-loader

and:

  extensions:
    - .sass
    - .scss

in your webpacker.yml file, and shakapacker will transpile sass/scss files.

Outwards

Answer 3

I had the same problem, In my case, I created a style.scss file with windows power shell. And it's creating the file under the wrong encoding (UTF-16). After much searching, I see in my wonderful PhpStorm on the bottom that I have this wrong encoding. It only took one click to change the encoding. In UTF-8, everything works! holy shi...

Millennium

Answer 4

For shakapacker v7, you need to remove the rule added by default at index 3:

{
  test: /\.(scss|sass)(\.erb)?$/i,
  use: [
    '/Users/me/Programming/project/node_modules/mini-css-extract-plugin/dist/loader.js',
    {
      loader: '/Users/me/Programming/project/node_modules/css-loader/dist/cjs.js',
      options: [Object]
    },
    {
      loader: '/Users/me/Programming/project/node_modules/sass-loader/dist/cjs.js',
      options: [Object]
    }
  ]
}

This was the source of the problem, and by deleting it with:

webpackConfig.module.rules.splice(3, 1);

the error can be solved.

Recursion