question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Strange issue when using webpack 2

See original GitHub issue

Trying to upgrade to webpack 2, my build fails with the following error:

ERROR in ./~/ng-table/src/browser/pager.html Module build failed

Importing library (fails):

import * as ngTable from 'ng-table'

Requiring bundle (success):

require('ng-table/bundles/ng-table.js')

webpack config:

'use strict';

const webpack = require('webpack');
const NgAnnotatePlugin = require('ng-annotate-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const argv = require('yargs').argv;
const path = require('path');

module.exports = {
  watch: false,
  bail: true,
  cache: true,
  devtool: 'source-map',
  entry: './typescript/app/app.ts',
  output: {
    path: path.resolve(__dirname, 'public'),
    filename: 'build/main.bundle.js',
    sourceMapFilename: '[name]-[chunkhash].map'
  },
  resolve: {
    extensions: [
      '.webpack.js',
      '.web.js',
      '.ts',
      '.js'
    ],
    alias: {
      Raven: path.resolve(__dirname, 'node_modules/raven-js/src/raven.js')
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
    }),
    new NgAnnotatePlugin({
      add: true
    }),
    new ExtractTextPlugin('build/[name].css'),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      inject: false,
      hash: true,
      cache: false,
      template: 'ejs-loader!./typescript/index.html',
      locals: {
        environment: ENVIRONMENT,
        production: process.env.PRODUCTION,
        cdnDomain: CDN_DOMAIN,
        backendUrl: BACKEND_URL,
        releaseVersion: RELEASE_VERSION
      }
    }),
    new webpack.SourceMapDevToolPlugin({
      filename: '[file].map', // if no value is provided the sourcemap is inlined
      test: /\.(ts|js)($|\?)/i // process .js and .ts files only
    })
  ],
  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: 'awesome-typescript-loader'
      },
      {
        test: /\.p?css$/,
        loader: ExtractTextPlugin.extract({
          fallbackLoader: 'style-loader',
          loader: [
            'css-loader',
            'postcss-loader'
          ]
        })
      },
      {
        test: /\.html$/,
        exclude: /index.html$/,
        use: [
          {
            loader: 'ngtemplate-loader',
            options: {
              relativeTo: path.resolve(__dirname, 'typescript')
            }
          },
          {
            loader: 'html-loader'
          }
        ]
      }
    ]
  },
  devServer: {
    historyApiFallback: true
  }
}

Issue Analytics

  • State:open
  • Created 7 years ago
  • Comments:11

github_iconTop GitHub Comments

9reactions
radiuscommented, May 25, 2017

Yo, I was able to solve this by changing how I import ng-table into my project. Importing directly from the bundle fixed it for me:

import 'ng-table/bundles/ng-table';

5reactions
richtmatcommented, Feb 27, 2017

@mheppner unfortunately, for me it does not change a thing (here and https://github.com/esvit/ng-table/issues/969).

Only difference is that local templates are wrong as well. The url ending on .dev is my local development url, you obviously cannot go there.

As I said in https://github.com/esvit/ng-table/issues/969 , I put the template content of the bundle in my files. The templates are put into the cache like this: $templateCache.put('ng-table/pager.html', html);. I still struggle to find out if its a ng-table or webpack issue…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Webpack2 is inserting invisible characters into bundle (visible ...
I can "work around" this issue if I manually delete the semicolon and bang, and manually type them into the eval string. If...
Read more >
HTML element's property text literally having spaces added in ...
This occurs on page that contains two JavaScript packages, both packaged with Webpack and using Babel. This issue only occurs in IE11, ...
Read more >
Webpack 5 release (2020-10-10)
Clean up internal structures that were left in a weird state while implementing features in v4 without introducing any breaking changes. Prepare ...
Read more >
Common errors | npm Docs
Some strange issues can be resolved by simply running npm cache clean and trying again. If you are having trouble with npm install...
Read more >
Webpack issue loading CSS - Material Design for Bootstrap
p><strong>Expected behavior</strong> React (16.12.0) + Webpack (4.41.2) without CRA and trying to use a navbar. It should look like this: <img ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found