Strange issue when using webpack 2
See original GitHub issueTrying 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:
- Created 7 years ago
- Comments:11
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
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';
@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…