Проблема с css-модулями webpack 4?

Question

[beefront17]

Добрый день! Помогите пожалуйста решить проблему.
После обновления webpack-а до 4.5 версии имею проблему с css-модулями, не загружаются.
выдает ошибку

Warning: Unknown prop `styleName` on <div> tag. Remove this prop from the element.

Кто знает помогите пожалуйста!

Comments

[Mikhail Osher]

Покажите package.json. Конкретно интересует, какие версии модулей для обработки стилей.

[Froggyweb]

Наверное вот в чем проблеиа https://github.com/webpack/webpack/issues/6687

[beefront17]

Mikhail Osher, все лоадеры обновил до последней версии

[beefront17]

Froggyweb, Пока проблема только с development режимом,
а там я не использую ExtractTextPlugin.
Сейчас у меня все стили записываются так
<div styleName="some-class"> .... </div>
и этот div появляется без класса 'some-class__'
хотя сам стиль в css есть
Вот в чем проблема...

[Mikhail Osher]

beefront17, все так говорят. Покажите конкретные версии и тогда смогу подсказать.

[beefront17]

Mikhail Osher,

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.3",
    "babel-jest": "^22.1.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-react-css-modules": "^3.3.2",
    "babel-plugin-react-remove-properties": "^0.2.5",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-1": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "copy-webpack-plugin": "^4.5.1",
    "cross-env": "^5.1.1",
    "css-hot-loader": "^1.3.9",
    "css-loader": "^0.28.11",
    "cssnano": "^3.10.0",
    "eslint": "^4.6.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-import-resolver-webpack": "^0.9.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.2",
    "eslint-plugin-react": "^7.5.1",
    "extract-text-webpack-plugin": "^3.0.2",
    "file-loader": "^0.11.2",
    "html-webpack-plugin": "^3.2.0",
    "husky": "^0.14.3",
    "lint-staged": "^6.0.0",
    "node-sass": "^4.5.3",
    "postcss-loader": "^2.1.3",
    "postcss-nested": "^3.0.0",
    "postcss-scss": "^1.0.5",
    "raw-loader": "^0.5.1",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.19.0",
    "stylelint": "^8.4.0",
    "stylelint-config-standard": "^18.0.0",
    "stylelint-order": "^0.8.0",
    "stylelint-scss": "^2.2.0",
    "uglifyjs-webpack-plugin": "^1.2.4",
    "url-loader": "^0.5.9",
    "webpack": "^4.5.0",
    "webpack-bundle-analyzer": "^2.11.1",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.1",
    "webpack-merge": "^4.1.2"
  },

[Mikhail Osher]

beefront17, "extract-text-webpack-plugin": "^3.0.2", должен быть 4.0.0-beta*

[Mikhail Osher]

beefront17, и вообще он уже не будет юзаться. смотрите https://github.com/webpack-contrib/mini-css-extrac...

Answer 1

[Mikhail Osher]

У вас неправильная версия extract-text-webpack-plugin.
Либо 4 бета ставьте, либо https://github.com/webpack-contrib/mini-css-extrac...

Comments

[beefront17]

Спасибо, в дев режиме заработало, но там я не использовал "extract-text-webpack-plugin".
В production режиме сейчас error

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[6].use should be one of these:
   non-empty string | function | object { loader?, options?, ident?, query? } | function | [non-empty string | function | object { loader?, options?, ident?, query? }]
   -> Modifiers applied to the module when rule is matched
   Details:
    * configuration.module.rules[5].use should be a string.
    * configuration.module.rules[5].use should be an instance of function
    * configuration.module.rules[5].use should be an object.
    * configuration.module.rules[5].use should be an instance of function
    * configuration.module.rules[5].use[1] should be a string.
    * configuration.module.rules[5].use[1] should be an instance of function
    * configuration.module.rules[5].use[1] has an unknown property 'fallback'. These properties are valid:
      object { loader?, options?, ident?, query? }
    * configuration.module.rules[6].use should be a string.
    * configuration.module.rules[6].use should be an instance of function
    * configuration.module.rules[6].use should be an object.
    * configuration.module.rules[6].use should be an instance of function
    * configuration.module.rules[6].use[1] should be a string.
    * configuration.module.rules[6].use[1] should be an instance of function
    * configuration.module.rules[6].use[1] has an unknown property 'fallback'. These properties are valid:
      object { loader?, options?, ident?, query? }

[Mikhail Osher]

beefront17, покажите конфиг лоадера

[beefront17]

Mikhail Osher,

const cssnanoConf = cssnano({
  autoprefixer: {
    add: true,
    remove: true,
  },
  discardComments: {
    removeAll: true,
  },
  discardDuplicates: true,
  discardUnused: false,
  mergeIdents: false,
  sourcemap: true,
});

module.exports = merge(require('./webpack.base.config'), {
  mode: 'production',
  devtool: 'source-map',
  module: {
    rules: [{
      test: /\.(s?css|sass)$/,
      exclude: /app[\\/](components|scenes)[\\/].+\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'style-loader',
        'css-loader',
        {
          loader: 'postcss-loader',
          options: {
            plugins() {
              return [cssnanoConf];
            },
          },
        },
        {
          loader: 'sass-loader',
          options: {
            includePaths: ['./node_modules'],
          },
        },
      ],
    }, {
      test: /app[\\/](components|scenes)[\\/].+\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[local]___[hash:base64:5]',
          },
        },
        {
          loader: 'postcss-loader',
          options: {
            plugins() {
              return [cssnanoConf];
            },
          },
        },
        {
          loader: 'sass-loader',
          options: {
            includePaths: ['./node_modules'],
          },
        },
      ],
    }],
  },
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        uglifyOptions: {
          output: {
            comments: false,
          },
          compress: {
            unsafe_comps: true,
            properties: true,
            keep_fargs: false,
            pure_getters: true,
            unused: true,
            hoist_funs: true,
            if_return: true,
            join_vars: true,
            cascade: true,
            drop_console: true,
          },
        },
      }),
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main-[hash:6].css',
      allChunks: true,
    }),
    new UglifyJSPlugin({}),
    new webpack.optimize.ModuleConcatenationPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
    }),
  ],
});

Сейчас уже ошибки

/style.scss
ERROR in ../style.scss
Module build failed: ReferenceError: window is not defined
...

[beefront17]

Mikhail Osher, и почему создаеться папка vendors~main-345434.js?