preact-cli icon indicating copy to clipboard operation
preact-cli copied to clipboard

Module build failed: Error: composition is only allowed when selector is single :local class name

Open zanderisrael opened this issue 5 years ago • 1 comments

Do you want to request a feature or report a bug?

a bug

What is the current behaviour?

✖ ERROR ./node_modules/preact-cli/lib/lib/webpack/proxy-loader.js??ref--2-0!./src/containers/unsubscribe/form/style.scss
Module build failed: Error: composition is only allowed when selector is single :local class name not in ".verifyButtonProcessing", ".verifyButtonProcessing" is weird
    at /Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:26:13
    at Array.map (native)
    at getSingleLocalNamesForComposes (/Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:20:26)
    at /Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:106:26
    at /Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:158:28
    at /Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:110:26
    at Rule.each (/Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:78:22)
    at Rule.walk (/Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:109:21)
    at Rule.walkDecls (/Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:156:25)
    at /Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:105:12
    at /Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:199:28
    at /Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:110:26
    at Root.each (/Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:78:22)
    at Root.walk (/Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:109:21)
    at Root.walkRules (/Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss/lib/container.es6:197:25)
    at /Users/Zander/hatash-web-cli/node_modules/css-loader/node_modules/postcss-modules-scope/lib/index.js:101:9
From previous event:
    at LazyResult.then (/Users/Zander/hatash-web-cli/node_modules/postcss/lib/lazy-result.es6:199:29)
    at Promise.resolve.then.then (/Users/Zander/hatash-web-cli/node_modules/preact-cli/node_modules/postcss-loader/lib/index.js:145:8)
    at runCallback (timers.js:651:20)
    at tryOnImmediate (timers.js:624:5)
    at processImmediate [as _immediateCallback] (timers.js:596:5)
From previous event:
    at Object.loader (/Users/Zander/hatash-web-cli/node_modules/preact-cli/node_modules/postcss-loader/lib/index.js:96:6)
 @ ./src/containers/unsubscribe/form/style.scss 4:14-258 18:2-22:4 19:20-264
 @ ./src/containers/unsubscribe/form/index.js
 @ ./src/containers/unsubscribe/index.js
 @ ./src/containers/app/app/content/index.js
 @ ./src/containers/app/app/app.js
 @ ./src/containers/app/app/index.js
 @ ./src/containers/app/index.js
 @ ./src/init.js
 @ ./src/index.js
 @ ./node_modules/preact-cli/lib/lib/entry.js
 @ multi ./node_modules/preact-cli/lib/lib/entry webpack-dev-server/client webpack/hot/dev-server

If the current behaviour is a bug, please provide the steps to reproduce. create scss file with compose in one of the classes. #package.json

{
  "private": true,
  "name": "hatash-web-cli",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "start": "per-env",
    "start:production": "npm run -s serve",
    "start:development": "npm run -s dev",
    "build": "preact build",
    "serve": "preact build && preact serve",
    "dev": "preact watch",
    "lint": "eslint src",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": "eslint-config-synacor"
  },
  "eslintIgnore": [
    "build/*"
  ],
  "devDependencies": {
    "eslint": "^4.9.0",
    "eslint-config-synacor": "^2.0.2",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^21.2.1",
    "node-sass": "^4.12.0",
    "per-env": "^1.0.2",
    "preact-cli": "^2.1.0",
    "preact-render-spy": "^1.2.1",
    "sass-loader": "^7.1.0"
  },
  "dependencies": {
    "add-dom-event-listener": "^1.1.0",
    "blacklist": "^1.1.4",
    "classnames": "^2.2.6",
    "connected-react-router": "^6.4.0",
    "copy-to-clipboard": "^3.2.0",
    "disable-scroll": "^0.4.1",
    "email-validator": "^2.0.4",
    "fetch-jsonp": "^1.1.3",
    "fetch-polyfill": "^0.8.2",
    "google-map-react": "^1.1.4",
    "intl": "^1.2.5",
    "is-safari": "^1.0.0",
    "isomorphic-fetch": "^2.2.1",
    "jsbarcode": "^3.11.0",
    "moment": "^2.24.0",
    "preact": "^8.2.6",
    "preact-compat": "^3.17.0",
    "preact-helmet": "^4.0.0-alpha-3",
    "preact-portal": "^1.1.3",
    "preact-router": "^2.5.7",
    "qrcode.react": "^0.9.3",
    "raven-for-redux": "^1.4.0",
    "raven-js": "^3.27.0",
    "react-autosuggest": "^9.4.3",
    "react-dnd": "^7.4.5",
    "react-dnd-html5-backend": "^7.4.4",
    "react-ga": "^2.5.7",
    "react-hamburger-menu": "^1.1.1",
    "react-id-swiper": "^2.1.2",
    "react-images": "^0.5.19",
    "react-input-mask": "^2.0.4",
    "react-intl": "^2.8.0",
    "react-intl-redux": "^2.1.1",
    "react-loadable": "^5.5.0",
    "react-redux": "^7.0.3",
    "react-responsive": "^6.1.2",
    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0",
    "react-spinners": "^0.5.4",
    "react-virtualized": "^9.21.0",
    "redux": "^4.0.1",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "reduxsauce": "^1.1.0",
    "url-search-params-polyfill": "^6.0.0"
  },
  "jest": {
    "verbose": true,
    "setupFiles": [
      "<rootDir>/tests/__mocks__/browserMocks.js"
    ],
    "testRegex": "(/(__tests__|tests)/.*|(\\.|/)(test|spec))\\.jsx?$",
    "testPathIgnorePatterns": [
      "/node_modules/",
      "<rootDir>/tests/__mocks__/*"
    ],
    "testURL": "http://localhost:8080",
    "moduleFileExtensions": [
      "js",
      "jsx"
    ],
    "moduleDirectories": [
      "node_modules"
    ],
    "moduleNameMapper": {
      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
      "\\.(css|less|scss)$": "identity-obj-proxy",
      "^./style$": "identity-obj-proxy",
      "^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",
      "^react$": "preact-compat",
      "^react-dom$": "preact-compat",
      "^create-react-class$": "preact-compat/lib/create-react-class",
      "^react-addons-css-transition-group$": "preact-css-transition-group"
    }
  }
}

#preact.config.js

const path = require('path');

export default function (config, env, helpers) {
	config.resolve.alias = Object.assign(
    {},
		{
				components: path.resolve(__dirname, "src/components"),    // used for tests
				containers: path.resolve(__dirname, "src/containers"),    // used for tests
				actions: path.resolve(__dirname, "src/actions"),    // used for tests
				reducers: path.resolve(__dirname, "src/reducers"),    // used for tests
				assets: path.resolve(__dirname, "src/assets"),    // used for tests
				lib: path.resolve(__dirname, "src/lib"),    // used for tests
				'react': 'preact-compat',
				'react-dom': 'preact-compat',
				config: path.resolve(__dirname, env.production === 'production' ? "src/config.prod.json" : "src/config.dev.json")
			},
    config.resolve.alias
  );
}

What is the expected behaviour?

should compile.

  • Node version: v7.4.0
  • npm version: v4.2.0
  • Operating system: MacOS 10.14.4
  • CLI version: preact-cli 2.2.1
  • Browser

zanderisrael avatar May 06 '19 16:05 zanderisrael

Is this a problem with preact-cli or sass?

ForsakenHarmony avatar Jun 29 '19 21:06 ForsakenHarmony