webpack build error

[tonyhayes]

I downloaded today - using 2.0.0

I get these build errors

[at-loader] Checking finished with 2 errors [1] [at-loader] node_modules/ng2-quill-editor/quillEditor.component.ts:22:3 [1] TS1117: An object literal cannot have multiple properties with the same name in strict mode. [1] [1] [at-loader] node_modules/ng2-quill-editor/quillEditor.component.ts:22:3 [1] TS2300: Duplicate identifier 'styles'. [1]

[JFernandoGomez]

+1 same error

[damsorian]

+1

[kurtiev]

+1 the same

[kurtiev]

https://github.com/surmon-china/ngx-quill-editor/blob/master/quillEditor.component.ts

Seems that if comment lines 23-25 problem is disappear, but styles doesn't work :-)

require('quill/dist/quill.core.css'), require('quill/dist/quill.snow.css'), require('quill/dist/quill.bubble.css')

[surmon-china]

You can try to change the styles to:

styleUrls: [
    '../quill/dist/quill.core.css',
    '../quill/dist/quill.snow.css',
    '../quill/dist/quill.bubble.css'
]

Does it work?

[surmon-china]

@kurtiev

[kurtiev]

@surmon-china Yep! it's work)

[surmon-china]

@kurtiev OK，I will fix it!

[kurtiev]

@surmon-china Thanks a lot!

[JFernandoGomez]

hey guys, still not working for me, I do see that error while compiling with Webpack gone, but I see this at the browser's console after doing this change Uncaught TypeError: cssText.replace is not a function at extractStyleUrls (eval at <anonymous> (http://localhost:3333/js/vendor.js:203:2), <anonymous>:10469:54)

this are my webpack.config.js and package.json files

// Helper: root() is defined at the bottom
var path = require('path');
var webpack = require('webpack');

// Webpack Plugins
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;

/**
 * Env
 * Get npm lifecycle event to identify the environment
 */
var ENV = process.env.npm_lifecycle_event;
var isTestWatch = ENV === 'test-watch';
var isTest = ENV === 'test' || isTestWatch;
var isProd = ENV === 'build';

module.exports = function makeWebpackConfig() {
  /**
   * Config
   * Reference: http://webpack.github.io/docs/configuration.html
   * This is the object where all configuration gets set
   */
  var config = {};

  /**
   * Devtool
   * Reference: http://webpack.github.io/docs/configuration.html#devtool
   * Type of sourcemap to use per build type
   */
  if (isProd) {
    config.devtool = 'source-map';
  }
  else if (isTest) {
    config.devtool = 'inline-source-map';
  }
  else {
    config.devtool = 'eval-source-map';
  }

  // add debug messages
  config.debug = !isProd || !isTest;

  /**
   * Entry
   * Reference: http://webpack.github.io/docs/configuration.html#entry
   */
  config.entry = isTest ? {} : {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/main.ts' // our angular app
  };

  /**
   * Output
   * Reference: http://webpack.github.io/docs/configuration.html#output
   */
  config.output = isTest ? {} : {
    path: root('dist'),
    publicPath: isProd ? '/' : 'http://localhost:3333/',
    filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
    chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
  };

  /**
   * Resolve
   * Reference: http://webpack.github.io/docs/configuration.html#resolve
   */
  config.resolve = {
    cache: !isTest,
    root: root(),
    // only discover files that have those extensions
    extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html'],
    alias: {
      'app': 'src/app',
      'common': 'src/common',
      'shared': 'src/app/shared'
    }
  };

  var atlOptions = '';
  if (isTest && !isTestWatch) {
    // awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
    atlOptions = 'inlineSourceMap=true&sourceMap=false';
  }

  /**
   * Loaders
   * Reference: http://webpack.github.io/docs/configuration.html#module-loaders
   * List: http://webpack.github.io/docs/list-of-loaders.html
   * This handles most of the magic responsible for converting modules
   */
  config.module = {
    preLoaders: isTest ? [] : [{ test: /\.ts$/, loader: 'tslint' }],
    loaders: [
      // Support for .ts files.
      {
        test: /\.ts$/,
        loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader'],
        exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
      },

      // copy those assets to output
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'file?name=fonts/[name].[hash].[ext]?'
      },

      // Support for *.json files.
      { test: /\.json$/, loader: 'json' },

      // Support for CSS as raw text
      // use 'null' loader in test mode (https://github.com/webpack/null-loader)
      // all css in src/style will be bundled in an external css file
      {
        test: /\.css$/,
        exclude: root('src', 'app'),
        loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss')
      },
      // all css required in src/app files will be merged in js files
      { test: /\.css$/, include: root('src', 'app'), loader: 'raw!postcss' },

      // support for .scss files
      // use 'null' loader in test mode (https://github.com/webpack/null-loader)
      // all css in src/style will be bundled in an external css file
      {
        test: /\.scss$/,
        exclude: root('src', 'app'),
        loader: isTest ? 'null' : ExtractTextPlugin.extract('style', 'css?sourceMap!postcss!sass')
      },
      // all css required in src/app files will be merged in js files
      { test: /\.scss$/, exclude: root('src', 'style'), loader: 'raw!postcss!sass' },

      // support for .html as raw text
      // todo: change the loader to something that adds a hash to images
      { test: /\.html$/, loader: 'raw', exclude: root('src', 'public') }
    ],
    postLoaders: []
  };

  if (isTest && !isTestWatch) {
    // instrument only testing sources with Istanbul, covers ts files
    config.module.postLoaders.push({
      test: /\.ts$/,
      include: path.resolve('src'),
      loader: 'istanbul-instrumenter-loader',
      exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/]
    });
  }

  /**
   * Plugins
   * Reference: http://webpack.github.io/docs/configuration.html#plugins
   * List: http://webpack.github.io/docs/list-of-plugins.html
   */
  config.plugins = [
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    }),
    // Define env variables to help with builds
    // Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
    new webpack.DefinePlugin({
      // Environment helpers
      'process.env': {
        ENV: JSON.stringify(ENV)
      }
    })
  ];

  if (!isTest && !isProd) {
    config.plugins.push(new DashboardPlugin());
  }

  if (!isTest) {
    config.plugins.push(
      new ForkCheckerPlugin(),

      // Generate common chunks if necessary
      // Reference: https://webpack.github.io/docs/code-splitting.html
      // Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
      new CommonsChunkPlugin({
        name: ['vendor', 'polyfills']
      }),

      // Inject script and link tags into html files
      // Reference: https://github.com/ampedandwired/html-webpack-plugin
      new HtmlWebpackPlugin({
        template: './src/public/index.html',
        chunksSortMode: 'dependency'
      }),

      // Extract css files
      // Reference: https://github.com/webpack/extract-text-webpack-plugin
      // Disabled when in test mode or not in build mode
      new ExtractTextPlugin('css/[name].[hash].css', { disable: !isProd })
    );
  }

  // Add build specific plugins
  if (isProd) {
    config.plugins.push(
      // Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
      // Only emit files when there are no errors
      new webpack.NoErrorsPlugin(),

      // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
      // Dedupe modules in the output
      new webpack.optimize.DedupePlugin(),

      // Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
      // Minify all javascript, switch loaders to minimizing mode
      new webpack.optimize.UglifyJsPlugin({ mangle: { keep_fnames: true } }),

      // Copy assets from the public folder
      // Reference: https://github.com/kevlened/copy-webpack-plugin
      new CopyWebpackPlugin([{
        from: root('src/public')
      }])
    );
  }

  /**
   * PostCSS
   * Reference: https://github.com/postcss/autoprefixer-core
   * Add vendor prefixes to your css
   */
  config.postcss = [
    autoprefixer({
      browsers: ['last 2 version']
    })
  ];

  /**
   * Sass
   * Reference: https://github.com/jtangelder/sass-loader
   * Transforms .scss files to .css
   */
  config.sassLoader = {
    //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
  };

  /**
   * Apply the tslint loader as pre/postLoader
   * Reference: https://github.com/wbuchwalter/tslint-loader
   */
  config.tslint = {
    emitErrors: false,
    failOnHint: false
  };

  /**
   * Dev server configuration
   * Reference: http://webpack.github.io/docs/configuration.html#devserver
   * Reference: http://webpack.github.io/docs/webpack-dev-server.html
   */
  config.devServer = {
    contentBase: './src/public',
    historyApiFallback: true,
    quiet: true,
    stats: 'minimal', // none (or false), errors-only, minimal, normal (or true) and verbose
  };

  return config;
} ();

// Helper functions
function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

{
  "name": "angular2-springboot-poc",
  "version": "1.0.0",
  "scripts": {
    "clean": "rimraf node_modules doc dist && npm cache clean",
    "clean-install": "npm run clean && npm install",
    "custom-install": "cross-env SASS_BINARY_SITE=https://artifactory.astrazeneca.net/npm_v_az-npm/node-sass/- npm install",
    "sass-rebuild": "cross-env SASS_BINARY_SITE=https://artifactory.astrazeneca.net/npm_v_az-npm/node-sass/- npm rebuild node-sass",
    "clean-start": "npm run clean-install && npm start",
    "watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached",
    "build": "rimraf dist && webpack --progress --profile --colors --display-error-details --display-cached",
    "server": "webpack-dashboard -- webpack-dev-server --inline --port 3333",
    "webdriver-update": "webdriver-manager update --versions.chrome 2.24",
    "webdriver-start": "webdriver-manager start",
    "lint": "tslint --force \"src/**/*.ts\"",
    "e2e": "protractor",
    "e2e-live": "protractor --elementExplorer",
    "pretest": "npm run lint",
    "test": "karma start",
    "posttest": "remap-istanbul -i coverage/json/coverage-final.json -o coverage/html -t html",
    "test-watch": "karma start --no-single-run --auto-watch",
    "ci": "npm run e2e && npm run test",
    "docs": "typedoc --options typedoc.json src/app/app.component.ts",
    "start": "npm run server",
    "start:hmr": "npm run server --hot"
  },
  "dependencies": {
    "@angular/common": "2.4.1",
    "@angular/compiler": "2.4.1",
    "@angular/core": "2.4.1",
    "@angular/forms": "2.4.1",
    "@angular/http": "2.4.1",
    "@angular/platform-browser": "2.4.1",
    "@angular/platform-browser-dynamic": "2.4.1",
    "@angular/router": "3.4.1",
    "core-js": "2.4.1",
    "font-awesome": "4.7.0",
    "jquery": "3.1.1",
    "ng2-toastr": "1.4.1",
    "quill": "1.1.7",
    "reflect-metadata": "0.1.9",
    "rxjs": "5.0.2",
    "zone.js": "0.7.7"
  },
  "devDependencies": {
    "@angularclass/hmr": "1.2.2",
    "@angularclass/hmr-loader": "1.0.1",
    "@types/core-js": "0.9.35",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.43",
    "@types/protractor": "1.5.20",
    "@types/quill": "0.0.29",
    "@types/selenium-webdriver": "2.44.26",
    "angular2-template-loader": "0.4.0",
    "autoprefixer": "6.7.3",
    "awesome-typescript-loader": "2.2.4",
    "bunyan": "1.8.5",
    "codelyzer": "0.0.26",
    "copy-webpack-plugin": "3.0.1",
    "css-loader": "0.23.1",
    "extract-text-webpack-plugin": "1.0.1",
    "file-loader": "0.9.0",
    "html-loader": "0.4.4",
    "html-webpack-plugin": "2.28.0",
    "istanbul-instrumenter-loader": "0.2.0",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.7.0",
    "json-loader": "0.5.4",
    "karma": "1.1.2",
    "karma-chrome-launcher": "1.0.1",
    "karma-coverage": "1.1.1",
    "karma-jasmine": "1.1.0",
    "karma-phantomjs-launcher": "1.0.2",
    "karma-remap-istanbul": "0.1.1",
    "karma-sourcemap-loader": "0.3.7",
    "karma-webpack": "1.7.0",
    "node-sass": "3.7.0",
    "phantomjs-prebuilt": "2.1.4",
    "postcss-loader": "0.9.1",
    "protractor": "3.3.0",
    "raw-loader": "0.5.1",
    "remap-istanbul": "0.6.4",
    "rimraf": "2.5.4",
    "sass-loader": "4.1.1",
    "shelljs": "0.7.6",
    "style-loader": "0.13.1",
    "ts-helpers": "1.1.2",
    "tslint": "3.15.1",
    "tslint-loader": "2.1.5",
    "typedoc": "0.4.5",
    "typescript": "2.0.2",
    "url-loader": "0.5.7",
    "webpack": "1.14.0",
    "webpack-dashboard": "0.1.8",
    "webpack-dev-server": "1.16.3"
  }
}

[surmon-china]

Update to v2.0.2 please, It should be work!

[JFernandoGomez]

@surmon-china now I'm getting this error

Uncaught SyntaxError: Unexpected token export at Object.<anonymous> (app.js:518)

this at app.js:518

/***/ },
/* 196 */
/***/ function(module, exports) {

    eval("export * from './quillEditor.module';\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9+L25neC1xdWlsbC1lZGl0b3IvaW5kZXgudHM/NDM2OSJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSIsImZpbGUiOiIxOTYuanMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL3F1aWxsRWRpdG9yLm1vZHVsZSc7XG5cblxuXG4vLy8vLy8vLy8vLy8vLy8vLy9cbi8vIFdFQlBBQ0sgRk9PVEVSXG4vLyAuL34vbmd4LXF1aWxsLWVkaXRvci9pbmRleC50c1xuLy8gbW9kdWxlIGlkID0gMTk2XG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJzb3VyY2VSb290IjoiIn0=");

/***/ }

[damsorian]

The 2.0.2 version works for me. thanks!