Module Css data is in production build in version 2@next

[a-marcel]

I use css modules with 2.0.0-next.66cc7a90 and figure out, that after a production build, the raw css content for this module/file is inside the javascript. Is there a reason for this or is the text-extract plugin not configured properly ?

Thanks and i look forward to webpack 4 and react-scripts 2.x

Marcel

[phoker]

Hey if ur using next with webpack updated to 4 then extract-text-plugin wouldn’t be config’d since it was replaced?

#4077 (comment)

[a-marcel]

Hello,

i use: @2.0.0-next.66cc7a90

and if i debug the config a little bit, it shows me this attached output. And i see there is still ExtractTextPlugin used. Maybe this PullRequest is not approved yet.

{ bail: true,
  devtool: 'source-map',
  entry:
   { main: '/src/index.js' },
  output:
   { path: '/build',
     filename: 'static/js/[name].[chunkhash:8].js',
     chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js',
     publicPath: '/',
     devtoolModuleFilenameTemplate: [Function: devtoolModuleFilenameTemplate],
     sourceMapFilename: 'static/js/[name].map.js' },
  resolve:
   { modules:
      [ 'node_modules',
        '/src' ],
     extensions: [ '.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx' ],
     alias:
      { '@babel/runtime': '/node_modules/@babel/runtime',
        'react-native': 'react-native-web' },
     plugins:
      [ ModuleScopePlugin {
          appSrcs: [ '/src' ],
          allowedFiles:
           Set {
             '/package.json' } } ] },
  module:
   { strictExportPresence: true,
     rules:
      [ { parser: { requireEnsure: false } },
        { test: /\.(js|jsx|mjs)$/,
          enforce: 'pre',
          use:
           [ { options:
                { formatter: [Function: formatter],
                  eslintPath: '/node_modules/eslint/lib/api.js',
                  baseConfig:
                   { extends:
                      [ '/node_modules/eslint-config-react-app/index.js' ] },
                  ignore: false,
                  useEslintrc: false },
               loader: '/node_modules/eslint-loader/index.js' } ],
          include: [ '/src' ],
          exclude: [ /[\/\\\\]node_modules[\/\\\\]/ ] },
        { oneOf:
           [ { test: [ /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/ ],
               loader: '/node_modules/url-loader/index.js',
               options: { limit: 10000, name: 'static/media/[name].[hash:8].[ext]' } },
             { test: /\.(js|jsx|mjs)$/,
               include: [ '/src' ],
               exclude: [ /[\/\\\\]node_modules[\/\\\\]/ ],
               use:
                [ '/node_modules/thread-loader/dist/cjs.js',
                  { loader: '/node_modules/babel-loader/lib/index.js',
                    options:
                     { babelrc: false,
                       presets:
                        [ '/node_modules/babel-preset-react-app/index.js' ],
                       plugins:
                        [ [ '/node_modules/babel-plugin-named-asset-import/index.js',
                            { loaderMap: { svg: { ReactComponent: 'svgr/webpack![path]' } } } ] ],
                       compact: true,
                       highlightCode: true } } ] },
             { test: /\.js$/,
               use:
                [ '/node_modules/thread-loader/dist/cjs.js',
                  { loader: '/node_modules/babel-loader/lib/index.js',
                    options:
                     { babelrc: false,
                       compact: false,
                       presets:
                        [ '/node_modules/babel-preset-react-app/dependencies.js' ],
                       cacheDirectory: true,
                       highlightCode: true } } ] },
             { test: /\.css$/,
               exclude: /\.module\.css$/,
               loader:
                [ { loader: '/node_modules/extract-text-webpack-plugin/dist/loader.js',
                    options: { omit: 1, remove: true } },
                  { loader: '/node_modules/style-loader/index.js',
                    options: { hmr: false } },
                  { loader: '/node_modules/css-loader/index.js',
                    options: { importLoaders: 1, minimize: true, sourceMap: true } },
                  { loader: '/node_modules/postcss-loader/lib/index.js',
                    options:
                     { ident: 'postcss',
                       plugins: [Function: plugins],
                       sourceMap: true } } ] },
             { test: /\.css$/,
               loader:
                [ { loader: '/node_modules/extract-text-webpack-plugin/dist/loader.js',
                    options: { omit: 1, remove: true } },
                  { loader: '/node_modules/style-loader/index.js',
                    options: { hmr: false } },
                  { loader: '/node_modules/css-loader/index.js',
                    options:
                     { importLoaders: 1,
                       minimize: true,
                       sourceMap: true,
                       modules: true,
                       getLocalIdent: [Function: getLocalIdent] } },
                  { loader: '/node_modules/postcss-loader/lib/index.js',
                    options:
                     { ident: 'postcss',
                       plugins: [Function: plugins],
                       sourceMap: true } } ] },
             { test: /\.(scss|sass)$/,
               exclude: /\.module\.(scss|sass)$/,
               loader:
                [ { loader: '/node_modules/extract-text-webpack-plugin/dist/loader.js',
                    options: { omit: 1, remove: true } },
                  { loader: '/node_modules/style-loader/index.js',
                    options: { hmr: false } },
                  { loader: '/node_modules/css-loader/index.js',
                    options: { importLoaders: 2, minimize: true, sourceMap: true } },
                  { loader: '/node_modules/postcss-loader/lib/index.js',
                    options:
                     { ident: 'postcss',
                       plugins: [Function: plugins],
                       sourceMap: true } },
                  { loader: '/node_modules/sass-loader/lib/loader.js',
                    options: { sourceMap: true } } ] },
             { test: /\.module\.(scss|sass)$/,
               loader:
                [ { loader: '/node_modules/extract-text-webpack-plugin/dist/loader.js',
                    options: { omit: 1, remove: true } },
                  { loader: '/node_modules/style-loader/index.js',
                    options: { hmr: false } },
                  { loader: '/node_modules/css-loader/index.js',
                    options:
                     { importLoaders: 2,
                       minimize: true,
                       sourceMap: true,
                       modules: true,
                       getLocalIdent: [Function: getLocalIdent] } },
                  { loader: '/node_modules/postcss-loader/lib/index.js',
                    options:
                     { ident: 'postcss',
                       plugins: [Function: plugins],
                       sourceMap: true } },
                  { loader: '/node_modules/sass-loader/lib/loader.js',
                    options: { sourceMap: true } } ] },
             { test: /\.(graphql)$/, loader: 'graphql-tag/loader' },
             { loader: '/node_modules/file-loader/dist/cjs.js',
               exclude: [ /\.(js|jsx|mjs)$/, /\.html$/, /\.json$/ ],
               options: { name: 'static/media/[name].[hash:8].[ext]' } } ] } ] },
  plugins:
   [ InterpolateHtmlPlugin { replacements: { NODE_ENV: 'production', PUBLIC_URL: '' } },
     HtmlWebpackPlugin {
       options:
        { template: '/public/index.html',
          filename: 'index.html',
          hash: false,
          inject: true,
          compile: true,
          favicon: false,
          minify:
           { removeComments: true,
             collapseWhitespace: true,
             removeRedundantAttributes: true,
             useShortDoctype: true,
             removeEmptyAttributes: true,
             removeStyleLinkTypeAttributes: true,
             keepClosingSlash: true,
             minifyJS: true,
             minifyCSS: true,
             minifyURLs: true },
          cache: true,
          showErrors: true,
          chunks: 'all',
          excludeChunks: [],
          title: 'Webpack App',
          xhtml: false } },
     DefinePlugin {
       definitions:
        { 'process.env': { NODE_ENV: '"production"', PUBLIC_URL: '""' } } },
     UglifyJsPlugin {
       options:
        { test: /\.js$/i,
          warningsFilter: [Function],
          extractComments: false,
          sourceMap: true,
          cache: true,
          parallel: true,
          include: undefined,
          exclude: undefined,
          uglifyOptions:
           { output: { ecma: 5, comments: false, ascii_only: true },
             parse: { ecma: 8 },
             compress: { ecma: 5, warnings: false, comparisons: false },
             mangle: { safari10: true } } } },
     ExtractTextPlugin {
       filename: 'static/css/[name].[contenthash:8].css',
       id: 1,
       options: {} },
     ManifestPlugin {
       opts:
        { basePath: '',
          publicPath: '/',
          fileName: 'asset-manifest.json',
          stripSrc: null,
          transformExtensions: /^(gz|map)$/i,
          writeToFileEmit: false,
          cache: null,
          seed: null,
          filter: null,
          map: null,
          reduce: null } },
     SWPrecacheWebpackPlugin {
       config: {},
       options:
        { cacheId: 'sw-precache-webpack-plugin',
          filename: 'service-worker.js',
          importScripts: [],
          staticFileGlobsIgnorePatterns: [ /\.map$/, /asset-manifest\.json$/ ],
          mergeStaticsConfig: false,
          minify: true,
          dontCacheBustUrlsMatching: /\.\w{8}\./,
          logger: [Function: logger] },
       overrides: {},
       warnings: [] },
     IgnorePlugin {
       resourceRegExp: /^\.\/locale$/,
       contextRegExp: /moment$/,
       checkIgnore: [Function: bound checkIgnore] },
     CommonsChunkPlugin {
       chunkNames: [ 'vendor' ],
       filenameTemplate: undefined,
       minChunks: [Function: minChunks],
       selectedChunks: undefined,
       children: undefined,
       deepChildren: undefined,
       async: undefined,
       minSize: undefined,
       ident: '/node_modules/webpack/lib/optimize/CommonsChunkPlugin.js0' } ],
  node:
   { dgram: 'empty',
     fs: 'empty',
     net: 'empty',
     tls: 'empty',
     child_process: 'empty',
     Buffer: false } }

[phoker]

Apologies, I got mixed up since I thought 2.0.0-next was using https://github.com/facebook/create-react-app/blob/next/packages/react-scripts/package.json but I was mistaken and 2.0.0-next is still using extract-text-plugin

Edit: for completeness sake #3815 (comment) it’s merged, but not published yet

[Timer]

All this got replaced with webpack 4.