Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

rc.1 breaks when remove: false, property is set with Error: No errors message #371

Closed
filipesilva opened this issue Jan 28, 2017 · 23 comments

Comments

@filipesilva
Copy link

Versions: using extract-text-webpack-plugin@2.0.0-rc.1, node@7.4.0, OS: any
Repro steps - include remove:false in

    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          remove: false,
          fallbackLoader: "style-loader",
          use: "css-loader"
        })
      }
    ]

Run webpack, see similar error message:

No errors
Error: No errors
    at validate (/home/carlos/empresa.com.br/PROJECT/node_modules/extract-text-webpack-plugin/schema/validator.js:10:9)
    at Function.ExtractTextPlugin.extract (/home/carlos/empresa.com.br/PROJECT/node_modules/extract-text-webpack-plugin/index.js:188:3)
    at /home/carlos/empresa.com.br/PROJECT/node_modules/angular-cli/models/webpack-build-styles.js:79:83
    at Array.map (native)
    at Object.getWebpackStylesConfig (/home/carlos/empresa.com.br/PROJECT/node_modules/angular-cli/models/webpack-build-styles.js:76:43)
    at new NgCliWebpackConfig (/home/carlos/empresa.com.br/PROJECT/node_modules/angular-cli/models/webpack-config.js:44:51)
    at Class.run (/home/carlos/empresa.com.br/PROJECT/node_modules/angular-cli/tasks/serve-webpack.js:23:22)
    at /home/carlos/empresa.com.br/PROJECT/node_modules/angular-cli/commands/serve.run.js:37:22
    at process._tickCallback (internal/process/next_tick.js:103:7)

This specific message was generated using angular-cli (angular/angular-cli#4264).

In there we use remove: false, which still seems to exist (https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/loader.js#L40) but not be accepted starting in rc.1.

I'm not sure if the property itself is deprecated since it doesn't show in https://github.com/webpack-contrib/extract-text-webpack-plugin/blob/master/CHANGELOG.md.

@bebraw bebraw added this to the 2.0 final milestone Jan 28, 2017
@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

Yeah. If I'm interpreting right, both omit and remove fields should be added to the schema as the pitch loader depends on those.

That error is weird, though. It should throw something about extra fields instead of No errors.

@niieani
Copy link

niieani commented Jan 28, 2017

I'm getting the same error (No errors) whenever any wrong field is passed in, either when creating and instance or running .extract.

@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

@scottdj92 Just getting you here. We probably missed a couple of test cases.

@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

I see the validator bit. It should be something along

  const ajv = new Ajv({
    useDefaults: true // This mutates the original data with defaults!
  });
  const isValid = ajv.validate(schema, data);

  return {
    isValid,
    error: ajv.errors && ajv.errorsText()
  };

over the current code to comply with ajv API.

bebraw added a commit to bebraw/extract-text-webpack-plugin that referenced this issue Jan 28, 2017
bebraw added a commit to bebraw/extract-text-webpack-plugin that referenced this issue Jan 28, 2017
@bebraw bebraw mentioned this issue Jan 28, 2017
@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

I have a couple of fixes at #372 in case someone wants to give those a go.

@filipesilva
Copy link
Author

@bebraw I tested your branch with remove: false, on the loader itself:
(ng build is the command that uses webpack to compile)

$ ng build
No errors
Error: No errors
    at validate (D:\work\angular-cli\node_modules\extract-text-webpack-plugin\schema\validator.js:10:9)
    // ...

$ npm install github:bebraw/extract-text-webpack-plugin#fix-schema
// ...

$ ng build
data should NOT have additional properties
Error: data should NOT have additional properties
    at validate (D:\work\angular-cli\node_modules\extract-text-webpack-plugin\schema\validator.js:10:9)

@filipesilva
Copy link
Author

It seems like having remove: true shouldn't show data should NOT have additional properties, since it should be a valid property.

@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

@filipesilva Are you sure it's complaining about remove: true? You have use: "css-loader" in extract. That's not valid.

@filipesilva
Copy link
Author

I think it's remove: false, since everything builds correctly after I remove it.

We have some fairly involved logic but the only change I did to test is this:
image

@filipesilva
Copy link
Author

To be perfectly honest, the example I gave originally was from the readme and not our code per se: https://github.com/webpack-contrib/extract-text-webpack-plugin#usage

@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

@filipesilva Thanks for pointing that out. The readme example needs tweaking.

@michael-ciniawsky
Copy link
Member

michael-ciniawsky commented Jan 28, 2017

@bebraw Yep my bad I though use is also supported inside extract-text-plugin (it should 😛) I will fix asap loader is definitely the go to ?

@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

@michael-ciniawsky #373 for the fix. loader/fallbackLoader seems sane.

Just improving the other fix based on @filipesilva's feedback.

@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

@filipesilva Alright. Would you mind giving another go? There was some wiring to do.

bebraw added a commit to bebraw/extract-text-webpack-plugin that referenced this issue Jan 28, 2017
bebraw added a commit to bebraw/extract-text-webpack-plugin that referenced this issue Jan 28, 2017
@filipesilva
Copy link
Author

filipesilva commented Jan 28, 2017

@bebraw now I get this one:

$ npm install github:bebraw/extract-text-webpack-plugin#fix-schema
angular-cli@1.0.0-beta.26 D:\work\angular-cli
`-- extract-text-webpack-plugin@2.0.0-rc.1  (git://github.com/bebraw/extract-text-webpack-plugin.git#6f0d235c65904b024ae40c16e7c5ed8faae50203)

$ ng build
data.loader should be string,object
Error: data.loader should be string,object
    at validate (D:\work\angular-cli\node_modules\extract-text-webpack-plugin\schema\validator.js:9:9)
    at Function.ExtractTextPlugin.extract (D:\work\angular-cli\node_modules\extract-text-webpack-plugin\index.js:190:3)

@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

@filipesilva Gotcha. I added array there (missing). Let's hope it passes now. 👍

@filipesilva
Copy link
Author

The latest commit seems to work! I also tested with omit: false and did not get any validation errors.

$ npm install github:bebraw/extract-text-webpack-plugin#fix-schema
angular-cli@1.0.0-beta.26 D:\work\angular-cli
`-- extract-text-webpack-plugin@2.0.0-rc.1  (git://github.com/bebraw/extract-text-webpack-plugin.git#267a54f88bad69d96fc928410f45863cc8c3d98e)

$ ng build
Hash: cae3d9db2b5ad4a316eb
Time: 7149ms
chunk    {0} polyfills.bundle.js, polyfills.bundle.map (polyfills) 222 kB {4} [initial] [rendered]
chunk    {1} main.bundle.js, main.bundle.map (main) 4.51 kB {3} [initial] [rendered]
chunk    {2} styles.bundle.js, styles.bundle.map (styles) 10.4 kB {4} [initial] [rendered]
chunk    {3} vendor.bundle.js, vendor.bundle.map (vendor) 2.39 MB [initial] [rendered]
chunk    {4} inline.bundle.js, inline.bundle.map (inline) 0 bytes [entry] [rendered]

image

@bebraw
Copy link
Contributor

bebraw commented Jan 28, 2017

@filipesilva Awesome. Thanks for confirmation. 👍

@filipesilva
Copy link
Author

Thanks for taking the time to fix this so promptly!

joshwiens pushed a commit that referenced this issue Jan 28, 2017
joshwiens pushed a commit that referenced this issue Jan 28, 2017
joshwiens pushed a commit that referenced this issue Jan 28, 2017
@alexeyeryshev
Copy link

alexeyeryshev commented Feb 24, 2017

Is it fixed in rc.3 ?
I updated my webpack/plugins to

"extract-text-webpack-plugin": "v2.0.0-rc.3",
    "file-loader": "latest",
    "react-hot-loader": "latest",
    "style-loader": "latest",
    "ts-loader": "latest",
    "css-loader": "latest",
    "url-loader": "latest",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "latest",
    "webpack-dashboard": "0.3.0"

and still have

/data/node_modules/extract-text-webpack-plugin/schema/validator.js:10
throw new Error(ajv.errorsText());
^

Error: No errors
at validate (/data/node_modules/extract-text-webpack-plugin/schema/validator.js:10:9)
at Function.ExtractTextPlugin.extract (/data/node_modules/extract-text-webpack-plugin/index.js:188:3)
at Object. (/data/webpack.config.js:128:42)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at requireConfig (/data/node_modules/webpack/bin/convert-argv.js:96:18)
at /data/node_modules/webpack/bin/convert-argv.js:109:17
at Array.forEach (native)
at module.exports (/data/node_modules/webpack/bin/convert-argv.js:107:15)
at Object. (/data/node_modules/webpack/bin/webpack.js:153:40)
at Module._compile (module.js:570:32)

My full webpack config is

const path = require("path");
const webpack = require("webpack");
const merge = require("webpack-merge");

/* Some contants */
const PLUGINS = {
  CopyWebpackPlugin: require("copy-webpack-plugin"),
  Dashboard: require("webpack-dashboard"),
  DashboardPlugin: require("webpack-dashboard/plugin"),
  ExtractTextPlugin: require("extract-text-webpack-plugin"),
};

const PATHS = {
  outputPath: path.join(__dirname, "dist"),
  app: path.join(__dirname, "app"),
};

const APP_NAME = "";

/* Some helper functions */

/**
 * Extract options.entries in chuck options.name.
 * @param options
 * @returns {{entry: {}, plugins: [*]}}
 */
function extractBundle(options) {
  const entry = {};
  entry[options.name] = options.entries;

  return {
    // Define an entry point needed for splitting.
    entry: entry,
    plugins: [
      // Extract bundle and manifest files. Manifest is
      // needed for reliable caching.
      new webpack.optimize.CommonsChunkPlugin({
        names: [options.name, 'manifest']
      })
    ]
  };
}


/**
 * We lookup for vendor dependencies directly in package.json but we exclude some excludedDeps deps.
 * @returns {Array.<*>} dependencies array.
 */
function getVendorEntries(excludedDeps) {
  return Object.keys(require('./package.json').dependencies)
    .filter((dep) => (!excludedDeps.find(d => d === dep)));
}

/**
 * Minify stuff.
 */
function minify() {
  return {
    plugins: [
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]
  };
}

/**
 * Set some thing via DefinePlugin.
 * @param key
 * @param value
 */
function setFreeVariable(key, value) {
  const env = {};
  env[key] = JSON.stringify(value);

  return {
    plugins: [
      new webpack.DefinePlugin(env)
    ]
  };
}

function enableWebpackDashboard() {
  return {
    plugins: [
      new PLUGINS.DashboardPlugin(new PLUGINS.Dashboard().setData)
    ]
  };
}

/* Conf decalartions */

// Common conf for all build configurations.
const common = merge(
  {
    entry: {
      app: path.join(PATHS.app, "views", `${APP_NAME}.tsx`),
    },

    output: {
      path: PATHS.outputPath,
      filename: "[name].bundle.js",
      publicPath: '/',
    },

    resolve: {
      extensions: [".js", ".ts", ".tsx", ".css"],
    },

    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /(node_modules)/,
          loaders: [
            "react-hot-loader",
            "ts-loader",
          ],
        },
        {
          test: /\.css$/,
          use: PLUGINS.ExtractTextPlugin.extract({
            fallback: "style-loader",
            use: "css-loader"
          })
        },
        {
          test: /\.eot(\?v=\d+\.\d+\.\d+(.*)?)?$/,
          use: { loader: "file-loader" }
        },
        {
          test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+(.*)?)?$/,
          use: {
            loader:"url-loader?prefix=font/&limit=5000"
          }
        },
        {
          test: /\.ttf(\?v=\d+\.\d+\.\d+(.*)?)?$/,
          use: {
            loader: "url-loader?limit=10000&mimetype=application/octet-stream"
          }
        },
        {
          test: /\.(svg|png|jpg|gif)(\?v=\d+\.\d+\.\d+(.*)?)?$/,
          use: {
            loader: "url-loader?limit=10000&mimetype=image/svg+xml"
          }
        },
      ],
    },

    plugins: [
      new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
      }),

      new PLUGINS.CopyWebpackPlugin([
        {
          from: path.join(PATHS.app, "assets/index.html"),
          to: "index.html",
        },
        {
          from: path.join(PATHS.app, "assets"),
          to: "assets",
        }
      ]),

      new PLUGINS.ExtractTextPlugin(`${APP_NAME}.bundle.css`),

      new webpack.HotModuleReplacementPlugin(),
    ],

  },

  extractBundle({
    name: "vendor",
    // "font-awesome", "ionicons" are excluded as they doesnt contain any js file
    // "jquery", "bootstrap", "admin-lte" are excluded as they doesnt work in vendor bundle
    entries: getVendorEntries(["font-awesome", "ionicons", "jquery", "bootstrap", "admin-lte"]),
  })

);

// Webpack dev server conf for development configuration
const wds = {
  devServer: {
    host: "0.0.0.0",
    port: 9777,
    // où on copie html.
    outputPath: PATHS.outputPath,
    // où on cherche nos fichiers statique.
    contentBase: "dist/",

    inline: true,
    hot: true,
    // WebpackDashboard needs it to do its things.
    quiet: true,
    historyApiFallback: {
      rewrites: [
        {
          from: /.*\..*/, to: "/index.html",
        },
      ],
    },

    proxy: {
      "/back": {
        target: ,
        pathRewrite: {
          // remove base path
          "^/back" : "",
        }
      }
    },
  }
};

// We use process.env.NODE_ENV development/production meaning for modify our webpack conf.
// We also provide debug mode that is equal to development mode with the source maps generations.
// These variables also used to set default log level as :
// DEVELOPMENT - INFO
// DEBUG - DEBUG
// PRODUCTION - WARN
const DEVELOPMENT = "development";
const DEBUG = "debug";
const PRODUCTION = "production";

function buildConf(env) {
  env = env || DEVELOPMENT;
  // DEV
  if (env == DEVELOPMENT) {
    return merge(
      common,
      wds,
      // enableWebpackDashboard(),
      setFreeVariable(
        "process.env.NODE_ENV",
        DEVELOPMENT
      )
    );
  }
  // DEBUG
  else if (env == DEBUG) {
    return merge(
      common,
      wds,
      {
        devtool: "eval-source-map",
      },
      enableWebpackDashboard(),
      setFreeVariable(
        "process.env.NODE_ENV",
        DEBUG
      )
    );
  }
  // PROD BUILD
  return merge(
    common,
    {
      devtool: "source-map",
    },
    wds,
    setFreeVariable(
      "process.env.NODE_ENV",
      PRODUCTION
    ),
    minify()
  );
}

module.exports = buildConf(process.env.NODE_ENV);

@scottdj92
Copy link
Contributor

Did you do npm install after you upgraded? ajv is a dependency of extract-text-plugin now

@alexeyeryshev
Copy link

alexeyeryshev commented Feb 24, 2017 via email

@alexeyeryshev
Copy link

Thx npm install my problem is resolved..

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

6 participants