search

preactjs / preact-cli

😺 Your next Preact PWA starts in 30 seconds.
MIT License
4.68k stars 376 forks source link

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

Open zanderisrael opened 5 years ago

zanderisrael commented 5 years ago

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.

ForsakenHarmony commented 5 years ago

Is this a problem with preact-cli or sass?