Karma + Webpack2: module parse failed and imports not found - javascript

I'm trying to write tests for my React.js + Redux project using webpack2 to bundle everything and I'd like to use Karma + mocha as my test runners. I have managed to get my webpack.conf.js and karma.conf.js files in order and running simple tests (as well as compiling my bundle), however karma seems to choke whenever a test has a ... operator or the import keyword.
My project structure is fairly simple; config files live in / of the project, react files live in /components/ and tests (named *.test.js) live in /tests/. Whenever I include a test with ... I get the following error:
Error: Module parse failed: /....../components/actions.jsx Unexpected token (5:2)
You may need an appropriate loader to handle this file type.
|
| module.exports = {
| ...generatorActions,
| ...creatorActions
| }
at test/actions/actions.test.js:1088
If I remove the ..., but leave the import statements, I get:
ERROR in ./components/actions.jsx
Module not found: Error: Can't resolve 'creatorActions' in '/..../components'
# ./components/actions.jsx 2:0-43
# ./test/actions/actions.test.js
Firefox 53.0.0 (Mac OS X 10.12.0) ERROR
Error: Cannot find module "generatorActions"
at test/actions/actions.test.js:1090
For reference, the file actions.jsx looks like this:
import generatorActions from 'generatorActions'
import creatorActions from 'creatorActions'
module.exports = {
...generatorActions,
...creatorActions
}
and actions.test.js looks like this:
const expect = require('expect')
const actions = require('../../components/actions.jsx')
describe('Actions', () => {
it('Should exist', () => {
expect(actions).toExist()
})
})
A strange thing that I don't understand is that the lines in the error messages(1088 and 1090) can't correspond to the vanilla files, so I can only assume that they correspond to the generated webpack bundle - so I believe webpack is being invoked. If I completely comment out the contents of actions.jsx the dummy test I have passes (a simple test asserting expect(1).toBe(1)). Here's my webpack.config.js:
function buildConfig(env) {
return require('./build/webpack/webpack.' + (env || 'dev') + '.config.js');
}
module.exports = buildConfig;
And my webpack.dev.config.js looks like:
var path = require('path');
var webpack = require('webpack');
const appRoot = require('app-root-path').path
module.exports = {
context: path.resolve(appRoot, 'components'),
devtool: 'eval',
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('development')
}
})
],
entry: {
app: './App.jsx',
},
output: {
path: path.resolve(appRoot, 'public/'),
filename: '[name].js'
},
resolve: {
modules: [
path.resolve(appRoot, "components"),
path.resolve(appRoot, "components/common"),
path.resolve(appRoot, "components/common/presentational"),
path.resolve(appRoot, "components/common/components"),
path.resolve(appRoot, "components/creator"),
path.resolve(appRoot, "components/creator/actions"),
path.resolve(appRoot, "components/creator/reducers"),
path.resolve(appRoot, "components/creator/presentational"),
path.resolve(appRoot, "components/creator/components"),
path.resolve(appRoot, "components/generator"),
path.resolve(appRoot, "components/generator/presentational"),
path.resolve(appRoot, "components/generator/stateful"),
path.resolve(appRoot, "components/generator/actions"),
path.resolve(appRoot, "components/generator/reducers"),
path.resolve(appRoot, "node_modules")
],
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: [
["es2015", {modules: false}],
'react',
'stage-0',
[
"env", {"targets": {"browsers": ["last 2 versions"]}}
]
],
plugins: [
'syntax-dynamic-import',
'transform-async-to-generator',
'transform-regenerator',
'transform-runtime',
'babel-plugin-transform-object-rest-spread'
]
}
}
]
}
}
and my karma.conf
const webpackConfig = require('./webpack.config.js');
module.exports = function(config) {
config.set({
browsers: ['Firefox'],
singleRun: true,
frameworks: ['mocha'],
files: [
'test/**/*.test.js'
],
preprocessors: {
'test/**/*.js': ['webpack'],
'components/**/*.js': ['webpack'],
'components/*.js': ['webpack']
},
reporters: ['mocha'], //, 'coverage', 'mocha'],
client:{
mocha:{
timeout: '5000'
}
},
webpack: webpackConfig,
webpackServer:{
noInfo: true
},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: false,
concurrency: Infinity
})
}

I finally figured it out! All I needed to do was change the line const webpackConfig = require('./webpack.config.js'); to const webpackConfig = require('./webpack.config.js')(); in my karma.conf.js

Related

Configuring Webpack to Execute TypeScript + Mocha Tests

I'd like to configure webpack to transpile (mocha + chai) tests written in typescript to javascript and them execute them. To that end, I have the webpack.test.config.js file below. Note: I've currently configured webpack to use ts-loader and mocha-loader.
Unfortunately, when I execute webpack --config webpack.test.config.js --env.dev, I receive the error:
Module parse failed: Unexpected token (2:10) You may need an
appropriate loader to handle this file type.
How can resolve this error and achieve my aforementioned goal?
const path = require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const outputPath = './bin/test';
module.exports = env => {
return {
mode: env && env.pro ? 'production' : 'development',
context: path.resolve('src'),
entry: {
core: './test/typescript/core.spec.ts'
},
output: {
filename: '[name].js',
path: path.join(__dirname, outputPath)
},
devtool: 'source-map',
plugins: [
new CleanWebpackPlugin({
dry: true,
cleanOnceBeforeBuildPatterns: ['./bin/test/**/*']
})
],
module: {
rules: [
{
test: /\.spec\.tsx?$/,
use: ['mocha-loader', 'ts-loader'],
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
}
};
};

How to webpack .cshtml views as templateUrl in Angular 2

I have setup my Angular 2 project in .NET Core solution and I have a situation where I need to use .cshtml view files to be rendered from server and use them as templates in Angular components. I am using webpack to AOT bundle them.
How can I exclude templateUrl or template to be excluded (not to be compiled into output .js file) but rather resolved on the fly?
My lazy load component (notfound.component.ts):
import { Component } from "#angular/core";
#Component({
templateUrl: "/Home/PageNotFound" // This is my Controller/Action
})
export class NotFoundComponent
{
}
webpack.config.js:
var webpack = require("webpack");
var clean = require("clean-webpack-plugin");
var compression = require("compression-webpack-plugin");
var path = require("path");
var analyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
"app": "./Client/main-aot.ts" // AoT compilation
},
devtool: "source-map",
output: {
path: __dirname + "/wwwroot/dist/bundle",
//filename: "[name]-[hash:8].bundle.js",
filename: "[name].js",
chunkFilename: "[id]-[hash:8].chunk.js",
publicPath: "/dist/bundle/",
},
resolve: {
extensions: [".ts", ".js"]
},
module: {
rules: [
{
test: /\.ts$/,
use: [
"awesome-typescript-loader",
"angular-router-loader?aot=true&genDir=aot/"
]
}
],
exprContextCritical: false
},
plugins: [
new clean(
[
__dirname + "/wwwroot/dist/bundle"
]
),
new analyzer(),
new webpack.LoaderOptionsPlugin({
minimize: true,
debug: false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
output: {
comments: false
},
sourceMap: true
}),
new compression({
asset: "[path].gz[query]",
algorithm: "gzip",
test: /\.js$|\.html$/,
threshold: 10240,
minRatio: 0.8
})
]
};
When I run following NPM command, its giving me error:
"node_modules/.bin/ngc -p tsconfig-aot.json" && webpack --configebpack.config.js
Error: Compilation failed. Resource file not found:
C:/Users/Saad/Documents/Visual Studio 2017/Projects/HelloAngular/HelloAngular/Client/notfound/dist/template/notfound/notfound.html

Still getting 'Symbol' is undefined' error even after adding babel-polyfill in my webpack

https://babeljs.io/docs/usage/polyfill/#usage-in-browser
I did not understand the lines on the documentation page under:
Usage in Browser heading
can someone help me with what else is required:
Below are my code snippets:
I'm using storybook as a boilerplate:
webpack.config.js file:
entry: [
'babel-polyfill',
require.resolve('react-dev-utils/webpackHotDevClient'),
paths.appIndexJs
]
index.js file:
import 'babel-polyfill';
import React from 'react';
Is there some other files also where I need to add babel-polyfill related code.
require('babel-polyfill');
var path = require('path');
var autoprefixer = require('autoprefixer');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
var getClientEnvironment = require('./env');
var paths = require('./paths');
var publicPath = '/';
var publicUrl = '';
var env = getClientEnvironment(publicUrl);
module.exports = {
devtool: 'cheap-module-source-map',
entry: ['babel-polyfill',
require.resolve('react-dev-utils/webpackHotDevClient'),
require.resolve('./polyfills'),
paths.appIndexJs
],
output: {
path: paths.appBuild,
pathinfo: true,
filename: 'static/js/bundle.js',
publicPath: publicPath
},
resolve: {
fallback: paths.nodePaths,
extensions: ['.js', '.json', '.jsx', ''],
alias: {
'react-native': 'react-native-web'
}
},
module: {
// First, run the linter.
// It's important to do this before Babel processes the JS.
preLoaders: [{
test: /\.(js|jsx)$/,
loader: 'eslint',
include: paths.appSrc,
}],
loaders: [{
exclude: [/\.html$/, /\.(js|jsx)$/, /\.css$/, /\.json$/],
loader: 'url',
query: {
limit: 10000,
name: 'static/media/[name].[hash:8].[ext]'
}
},
// Process JS with Babel.
{
test: /\.(js|jsx)$/,
include: paths.appSrc,
loader: 'babel',
query: {
cacheDirectory: true
}
}, {
test: /\.css$/,
loader: 'style!css?importLoaders=1!postcss'
}, {
test: /\.json$/,
loader: 'json'
}
]
},
// We use PostCSS for autoprefixing only.
postcss: function() {
return [
autoprefixer({
browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9', // React doesn't support IE8 anyway
]
}),
];
},
plugins: [
new InterpolateHtmlPlugin({
PUBLIC_URL: publicUrl
}),
new HtmlWebpackPlugin({
inject: true,
template: paths.appHtml,
}),
new webpack.DefinePlugin(env),
new webpack.HotModuleReplacementPlugin(),
new CaseSensitivePathsPlugin(),
new WatchMissingNodeModulesPlugin(paths.appNodeModules)
],
node: {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
};
There are two ways to get this code into your browser.
1 - Include the babel-polyfill module in the webpack bundle
2 - Load it as an external script in your html
Webpack - adding bundle dependencies with entry arrays
Put an array as the entry point to make the babel-polyfill module available to your bundle as an export.
With webpack.config.js, add babel-polyfill to your entry array.
The webpack docs explain how an entry array is handled:
What happens when you pass an array to entry? Passing an array of file
paths to the entry property creates what is known as a "multi-main
entry". This is useful when you would like to inject multiple
dependent files together and graph their dependencies into one
"chunk".
Webpack.config.js
require("babel-polyfill");
var config = {
devtool: 'cheap-module-eval-source-map',
entry: {
main: [
// configuration for babel6
['babel-polyfill', './src/js/main.js']
]
},
}
Alternative to Webpack - load babel-polyfill as an external script in the browser html
The alternative to using webpack would mean including the module as an external script in your html. It will then be available to code in the browser but the webpack bundle won't be directly aware of it.
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.22.0/polyfill.js"></script>

webpackJsonp not defined using karma-webpack?

I am building a boilerplate with webpack and karma with mocha.
This is the configuration I am using for karma-webpack. I am new to webpack.
var path = require('path');
var webpack = require('webpack');
var entries = {
"app": ["./index.js"]
};
var root = './';
var testSrc = path.join(root, 'tests/');
var jsSrc = path.join(root, 'src/javascripts/');
var publicPath = path.join(root , 'public/');
var filenamePattern = 'index.js';
var extensions = ['js'].map(function(extension) {
return '.' + extension;
});
var webpackConfig = {
context: jsSrc,
resolve: {
root: jsSrc,
extensions: [''].concat(extensions)
},
resolveLoader: {
root: path.join(__dirname, "node_modules")
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}]
},
entry: entries,
output: {
filename: filenamePattern,
publicPath: publicPath
},
plugins: [new webpack.optimize.CommonsChunkPlugin({
name: 'shared',
filename: filenamePattern,
})]
};
var karmaConfig = {
frameworks: ['mocha'],
files: ['tests/test-index.js'],
preprocessors: {
'tests/**/*.js': ['webpack']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true,
},
singleRun: false,
autoWatch: true,
colors: true,
reporters: ['nyan'],
browsers: ['Chrome'],
plugins: [
require("karma-nyan-reporter"),
require("karma-mocha"),
require("karma-firefox-launcher"),
require("karma-webpack"),
require("karma-chrome-launcher")
]
};
module.exports = function(config) {
config.set(karmaConfig);
};
When I run karma start karma.local.conf.js it does not execute the tests becouse it says in the browser webpackJsonp is not defined. I was wondering if I am missing something in this configuration.
You can solve this problem by changing the order of your files loaded into your Karma browser.
karma.conf.js
files: [
'build/shared.js',
'build/**/*.js',
]
Shared (in my case) is the file where "webpackJsonp" is defined.
By putting this one at the top of the files it will be loaded before the other js files. Solving the error.
I had also same problem coming in Browser in my Asp.Net MVC 5 based web application:
"webpackJsonp is not defined"
although I am not using Karma. The solution I found was to move the commons chunk file to normal script tag based inclusion. I was earlier loading this file via Asp.Net MVC's bundling BundleConfig.cs file. I guess sometimes for some unknown reason this commons chunk file loads after my other module files and thus Browser complaints.
I removed the commons.chunk.js inclusion from BundleConfig.cs and added it to page using a normal script tag, right before my bundle class:
<script type="text/javascript" src="#Url.Content("~/Scripts/build/commons.chunk.js")"></script>
#Scripts.Render("~/bundles/myModules")
After doing some research on why or how this problem was happening I found out that there is a plugin of web pack messing with karma.
So the configuration result would be:
var path = require('path');
var webpack = require('webpack');
var entries = {
"app": ["./index.js"]
};
var root = './';
var testSrc = path.join(root, 'tests/');
var jsSrc = path.join(root, 'src/javascripts/');
var publicPath = path.join(root , 'public/');
var filenamePattern = 'index.js';
var extensions = ['js'].map(function(extension) {
return '.' + extension;
});
var webpackConfig = {
context: jsSrc,
resolve: {
root: jsSrc,
extensions: [''].concat(extensions)
},
resolveLoader: {
root: path.join(__dirname, "node_modules")
},
module: {
loaders: [{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
}]
},
entry: entries,
output: {
filename: filenamePattern,
publicPath: publicPath
}
};
var karmaConfig = {
frameworks: ['mocha'],
files: ['tests/test-index.js'],
preprocessors: {
'tests/**/*.js': ['webpack']
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true,
},
singleRun: false,
autoWatch: true,
colors: true,
reporters: ['nyan'],
browsers: ['Chrome'],
plugins: [
require("karma-nyan-reporter"),
require("karma-mocha"),
require("karma-firefox-launcher"),
require("karma-webpack"),
require("karma-chrome-launcher")
]
};
module.exports = function(config) {
config.set(karmaConfig);
};
So I removed webpack plugin CommonsChunkPlugin. Here is another reference to this problem.
https://github.com/webpack/karma-webpack/issues/24

Watch all Less Files but only compile one main one

So I downloaded a theme that has a bunch of less files but there is a main one that imports the others in the correct order. It came with a gulp file that watches any .less file but recompiles only the one that imports all the others. It looks like so:
gulp.task('less', function () {
return gulp.src(Paths.LESS_TOOLKIT_SOURCES)
.pipe(sourcemaps.init())
.pipe(less())
.pipe(autoprefixer())
.pipe(sourcemaps.write(Paths.HERE))
.pipe(gulp.dest('dist'))
})
My webpackconfig so far looks like the following:
// Things I still need to do:
// 1) Add uglifier plugin for minification
var path = require('path');
var webpack = require('webpack');
var cssnext = require('cssnext');
var cssimport = require('postcss-import');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var isProd = process.env.NODE_ENV === 'production' ? true : false;
module.exports = {
devtool: 'eval',
entry: [
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./app/index'
],
stylePath: path.resolve(__dirname, 'app', 'style'),
postcss: function () {
return [
cssimport({
path: './app/style/index.css',
onImport: function (files) {
files.forEach(this.addDependency)
}.bind(this)
}),
cssnext()
]
},
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js',
cssFilename: 'style.css',
publicPath: '/static/'
},
plugins: [
new ExtractTextPlugin('style.css', {
allChunks: true
}),
new webpack.HotModuleReplacementPlugin()
],
module: {
loaders: [{
test: /\.js$/,
loaders: ['react-hot', 'babel'],
include: path.join(__dirname, 'app')
},
{
test: /\.css$/,
loader: isProd ? ExtractTextPlugin.extract('style', 'css? modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss') : 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss'
},
{
test: /\.less$/,
loader: "style!css!less"
}]
},
resolve: {
root: path.resolve(__dirname),
extensions: [
'',
'.js',
'.css'
],
modulesDirectories: [
'app',
'node_modules'
]
}
};
I am trying to accomplish the the same thing but with webpack. I have installed and setup the less-loader like the guide says but it tries to compile all of the files. Is there a way to set it up like the gulp file that will watch any file but only compile a specific file? I have this working in brunch when working in Phoenix but I trying to switch brunch out with webpack for phoenix.
In brunch I just told it to ignore the folder with the less files and then had the main less file outside that directory so brunch would only compile the main less file and import the others.

Categories