ReferenceError: Can't find variable: Map at src/app/home/home.component.spec.ts:4 Angular 2 - wallaby.js

I seem to be setting up wallable wrong.
error:
ReferenceError: Can't find variable: Map
at src/app/home/home.component.spec.ts:4
ReferenceError: Can't find variable: Map
at http://localhost:63247/__modules/27.js?1483285680907:80
I set up my js file like so:
var wallabyWebpack = require('wallaby-webpack');
var webpackPostprocessor = wallabyWebpack({
entryPatterns: [
'src/wallabyTest.js',
'src/**/*spec.js'
],
module: {
loaders: [
{test: /\.css$/, loader: 'raw-loader'},
{test: /\.html$/, loader: 'raw-loader'},
{test: /\.js$/, loader: 'angular2-template-loader', exclude: /node_modules/},
{test: /\.json$/, loader: 'json-loader'},
{test: /\.styl$/, loaders: ['raw-loader', 'stylus-loader']},
{test: /\.less$/, loaders: ['raw-loader', 'less-loader']},
{test: /\.scss$|\.sass$/, loaders: ['raw-loader', 'sass-loader']},
{test: /\.(jpg|png)$/, loader: 'url-loader?limit=128000'}
]
}
});
var compilerOptions = require('./src/tsconfig.json').compilerOptions;
module.exports = function (wallaby) {
return {
files: [
{pattern: 'src/**/*.ts', load: false},
{pattern: 'src/**/*.d.ts', ignore: true},
{pattern: 'src/**/*.css', load: false},
{pattern: 'src/**/*.html', load: false},
{pattern: 'src/**/*spec.ts', ignore: true},
{pattern: 'node_modules/babel-polyfill/browser.js', instrument: false}
],
tests: [
{pattern: 'src/**/*spec.ts', load: false}
],
testFramework: 'jasmine',
compilers: {
'**/*.ts': wallaby.compilers.typeScript(compilerOptions)
},
postprocessor: webpackPostprocessor,
setup: function () {
window.__moduleBundler.loadTests();
},
debug: true
};
};
project structure:
I just found this tool today and am very excited to get it to work. I also have my project on GitHub Git Hub Link
ReferenceError: Can't find variable: Map
at src/app/home/home.component.spec.ts:4
After some research I added the following to my wallaby.js file to make sure it was not using the compiler since wallaby has it's own.
{pattern: 'node_modules/babel-polyfill/browser.js', instrument: false}
However I still get the same error.

As #YaroslavAdmin correctly mentioned, the important bit is src/wallabyTest.ts - it's where the polyfills are loaded from. You have this file missing in your project.

Related

How open image with tag a?

To create my page i use webpack. In page i want show multiple image. On internet i found library "lightbox2". This library is used for click image and popup. The library have simple example like this:
<a
class="example-image-link"
href="../image/bed-small.jpg" -- not work
href="./469cccac29babd05add3a0b2d23abf0d.jpg" -- work
data-lightbox="example-1"
><img class="example-image" src="../image/bed-small.jpg" alt="image-1" --here work
/></a>
Img src work great and i see picture on my page. When i click on image popup work but image never loaded. I used dev-tools and i see that my image is download with that name '469cccac29babd05add3a0b2d23abf0d.jpg'. So i copy and i see my image. My question is how generate that file name dynamic in my html file ? Below i add my webpack.conf
const path = require('path');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
module.exports = {
mode: 'development',
devtool: 'inline-source-map',
devServer: {
contentBase: './dist',
},
entry: {
main: './js/index.js',
fontAwesome: './js/fontAwe.js',
fontSolid: './js/fontSolid.js',
fontRegular: './js/fontRegular.js',
galery: './js/galery.js',
},
plugins: [
new CleanWebpackPlugin({ cleanStaleWebpackAssets: false }),
new HtmlWebpackPlugin({
title: 'none',
template: './index.html',
inject: true,
chunks: ['main', 'fontAwesome', 'fontSolid', 'fontRegular'],
filename: 'index.html',
}),
new HtmlWebpackPlugin({
title: 'none',
template: './pages/galeria.html',
inject: true,
chunks: ['galery'],
filename: 'galeria.html',
}),
],
output: {
publicPath: '/',
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['#babel/preset-env'],
},
},
},
{
test: /\.s[ac]ss$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'sass-loader',
options: {
// Prefer `dart-sass`
implementation: require('sass'),
},
},
],
},
{
test: /\.html$/i,
loader: 'html-loader',
},
{
//IMAGE LOADER
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'file-loader',
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
},
],
},
};
My dev-tool
No longer current. I found solution. Import image to js file and changed href ;)
change name of photo and use:<div class=""><a src="></a>

Webpack 4: error with malformatted json

I'm using webpack 4 (4.6.0), I don't use the json-loader as it is my understanding that webpack handle this by default now.
When I'm working locally (I'm using serve from browser-sync to create a local dev-server), and I modified a JSON file wrongly (the JSON is not formatted correctly after my hcange), webpack exit with an error (instead of just telling me that there is an error on the json file and continue when I fix it).
Anyone experienced this issue (and knows how to solve it)?
This is the error I'm getting:
/code/program/node_modules/webpack/lib/JsonGenerator.js:10
JSON.stringify(data).replace(
^
TypeError: Cannot read property 'replace' of undefined
at stringifySafe (/code/program/node_modules/webpack/lib/JsonGenerator.js:10:22)
at JsonGenerator.generate (/code/program/node_modules/webpack/lib/JsonGenerator.js:36:53)
at NormalModule.source (/code/program/node_modules/webpack/lib/NormalModule.js:413:33)
at ModuleTemplate.render (/code/program/node_modules/webpack/lib/ModuleTemplate.js:43:31)
at modules.map.module (/code/program/node_modules/webpack/lib/Template.js:157:28)
at Array.map (<anonymous>)
at Function.renderChunkModules (/code/program/node_modules/webpack/lib/Template.js:154:28)
at HotUpdateChunkTemplate.render (/code/program/node_modules/webpack/lib/HotUpdateChunkTemplate.js:48:34)
at compilation.hooks.additionalChunkAssets.tap (/code/program/node_modules/webpack/lib/HotModuleReplacementPlugin.js:165:48)
at SyncHook.eval (eval at create (/code/program/node_modules/tapable/lib/HookCodeFactory.js:17:12), <anonymous>:7:1)
at SyncHook.lazyCompileHook [as _call] (/code/program/node_modules/tapable/lib/Hook.js:35:21)
at hooks.optimizeTree.callAsync.err (/code/program/node_modules/webpack/lib/Compilation.js:944:37)
at AsyncSeriesHook.eval [as callAsync] (eval at create (/code/program/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:6:1)
at AsyncSeriesHook.lazyCompileHook [as _callAsync] (/code/program/node_modules/tapable/lib/Hook.js:35:21)
at Compilation.seal (/code/program/node_modules/webpack/lib/Compilation.js:890:27)
at hooks.make.callAsync.err (/code/program/node_modules/webpack/lib/Compiler.js:481:17)
at _done (eval at create (/code/program/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:9:1)
at _err1 (eval at create (/code/program/node_modules/tapable/lib/HookCodeFactory.js:24:12), <anonymous>:32:22)
at _addModuleChain (/code/program/node_modules/webpack/lib/Compilation.js:758:12)
at processModuleDependencies.err (/code/program/node_modules/webpack/lib/Compilation.js:697:9)
at _combinedTickCallback (internal/process/next_tick.js:131:7)
at process._tickDomainCallback (internal/process/next_tick.js:218:9)
EDIT: Find below my webpack config:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackNotifierPlugin = require('webpack-notifier');
const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: {},
resolve: {
modules: [
path.resolve(__dirname),
path.resolve(__dirname, 'node_modules')
],
extensions: [ '.js' ],
alias: {
app: 'client/app',
common: 'client/app/common',
components: 'client/app/components'
}
},
output: {
filename: '[name].bundle.js',
chunkFilename: '[name].bundle.js',
publicPath: '/',
path: path.resolve(__dirname, 'client')
},
mode: 'development';
module: {
rules : [
{
test: /\.js$/,
exclude: [ /app\/lib/, /node_modules/],
enforce: 'pre',
use: [
{
loader: 'eslint-loader',
options: {
failOnWarning: false,
failOnError: true
}
},
],
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
'postcss-loader',
]
},
{
test: /\.(scss|sass)/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
sourceMap: true
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: true
}
},
{
loader: 'sass-loader',
options: {
includePaths: [ path.resolve(__dirname, './client/app') ],
sourceMap: true
}
},
]
},
{
test: /\.html$/,
use: [
{
loader: 'raw-loader',
options: {
minimize: false
}
}
]
},
{
test: /\.js$/,
exclude: [ /app\/lib/, /node_modules/],
use: [
{
loader: 'ng-annotate-loader?add=true&single_quotes=true'
},
{
loader: 'babel-loader'
}
]
},
{
test: /\.svg/,
use: [
{
loader: 'svg-url-loader'
}
]
},
{
test: /\.(png|jpg)$/,
use: [
{
loader: 'url-loader?limit=1024'
}
]
},
{
test: /\.woff$/,
use: [
{
loader: 'url-loader?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]'
}
]
},
{
test: /\.woff2$/,
use: [
{
loader: 'url-loader?limit=65000&mimetype=application/font-woff2&name=public/fonts/[name].[ext]'
}
]
},
{
test: /\.[ot]tf$/,
use: [
{
loader: 'url-loader?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]'
}
]
},
{
test: /\.eot$/,
use: [
{
loader: 'url-loader?limit=65000&mimetype=application/vnd.ms-fontobject&name=public/fonts/[name].[ext]'
}
]
}
],
noParse: [
'/node_modules/d3-cloud/build/d3.layout.cloud.js',
]
},
plugins: [
new webpack.DefinePlugin({
VERSION: JSON.stringify(require("./package.json").version)
}),
new webpack.ProvidePlugin({
c3: 'c3',
Bugsnag: 'bugsnag-js'
}),
// This is used to have a banner shown to the user to "Add to home screen"
// It works with the service-worker called in app.js
new CopyWebpackPlugin([
{
from: './config',
to: path.resolve(__dirname, 'dist/')
},
{
from: './assets/**/*',
to: path.resolve(__dirname, 'dist/')
},
]),
// Injects bundles in your index.html instead of wiring all manually.
// It also adds hash to all injected assets so we don't have problems
// with cache purging during deployment.
new HtmlWebpackPlugin({
template: 'client/indexMockBackEnd.html',
//template: 'client/index.html',
inject: 'body',
hash: true,
favicon: 'client/app/common/favicon/favicon.ico'
}),
new webpack.DefinePlugin({
ENVIRONMENT: JSON.stringify('development'),
BROCHURE_HOME_URL: JSON.stringify(`https://pl.dev`)
}),
// Adds webpack HMR support. It act's like livereload,
// reloading page after webpack rebuilt modules.
// It also updates stylesheets and inline assets without page reloading.
new webpack.HotModuleReplacementPlugin(),
// displays desktop notifications on MacOS
new WebpackNotifierPlugin(),
],
optimization: {
namedModules: true, // NamedModulesPlugin()
splitChunks: {
chunks: "all"
},
runtimeChunk: true,
concatenateModules: true //ModuleConcatenationPlugin
}
};
This was a bug in webpack.
See details of the bug here: https://github.com/webpack/webpack/issues/7082
See pull request to fix it here: https://github.com/webpack/webpack/pull/7590
It is now fixed (as of July 2018)

How to fix “Module build failed: SyntaxError: Unexpected token” error when using JSON file in react?

I am following a react tutorial by Brian holt and i need to import .json file inside my react component like this :
code
When I try to build my project i was getting
ERROR in ./data.json
Module build failed: SyntaxError: Unexpected token, expected
like this:
Error caption in terminal
at first i thought that it was an eslint issue but it seems that it happens on the build step, i tried adding a json-loader to webpack but without any success.
Webpack Version:
2.6.1
Babel Core Version:
6.24.1
Babel Loader Version:
7.0.0,
this is my webpack config file :
const path = require('path')
module.exports = {
context: __dirname,
entry: './js/clientApp',
devtool: 'cheap-eval-source-map',
output: {
path: path.join(__dirname, 'public'),
filename: 'bundle.js',
publicPath: '/assets/'
},
resolve: {
extensions: ['.js', '.jsx', ',json']
},
devServer: {
publicPath: '/public/',
port: 2110,
open: true,
historyApiFallback: true
},
stats: {
colors: true,
reasons: true,
chunks: true
},
module: {
rules: [
{
enforce: 'pre',
test: /\.jsx?/,
loader: 'eslint-loader',
exclude: /node_modules/
},
{
test: /\.jsx?/,
loader: 'babel-loader'
}
]
}
}
and this is my .babelrc file :
{
"presets": [
"react", ["env", {
"targets": {
"browsers": "last 2 versions"
},
"loose": true,
"modules": false
}]
]
}
Any suggestions please ?
Regular Expression
The test property identifies which file or files should be transformed.
The problem is the regular expression on your rules:
{ test: /\.jsx?/ }
Your telling webpack to use babel-loader with any file extension starting with .js or .jsx
So as you can see .json match the test.
Solution
$ - matches anything until the end of the string
To fix this just replace ? with $, see the example below:
module: {
rules: [
{
test: /\.jsx$/,
loader: 'babel-loader'
}
]
}

Add assets folder in mern io

i am using mern.io my web pack config is looks like :
var webpack = require('webpack');
var cssnext = require('postcss-cssnext');
var postcssFocus = require('postcss-focus');
var postcssReporter = require('postcss-reporter');
module.exports = {
devtool: 'cheap-module-eval-source-map',
entry: {
app: [
'eventsource-polyfill',
'webpack-hot-middleware/client',
'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./client/index.js',
],
vendor: [
'react',
'react-dom',
],
},
output: {
path: __dirname,
filename: 'app.js',
publicPath: 'http://0.0.0.0:8888/',
},
resolve: {
extensions: ['', '.js', '.jsx'],
modules: [
'client',
'node_modules',
],
},
module: {
loaders: [
{
test: /\.css$/,
exclude: /node_modules/,
loader: 'style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader',
}
, {
test: /\.css$/,
include: /node_modules/ ,
loaders: ['style-loader', 'css-loader'],
}
, {
test: /\.jsx*$/,
exclude: [/node_modules/, /.+\.config.js/],
loader: 'babel',
}, {
test: /\.(jpe?g|gif|png|svg)$/i,
loader: 'url-loader?limit=10000',
}, {
test: /\.json$/,
loader: 'json-loader',
},
{ test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=1&minetype=application/font-woff" },
{ test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=1&minetype=application/font-woff" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=1' }
],
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks: Infinity,
filename: 'vendor.js',
}),
new webpack.DefinePlugin({
'process.env': {
CLIENT: JSON.stringify(true),
'NODE_ENV': JSON.stringify('development'),
}
}),
],
postcss: () => [
postcssFocus(),
cssnext({
browsers: ['last 2 versions', 'IE > 10'],
}),
postcssReporter({
clearMessages: true,
}),
],
};
i would like to add a custom css file which resides in : /public/assets/css/custom.css; Then what would be my configurations?
i can import css file in node_modules eg : require('rc-slider/assets/index.css');
as it says in the config :
{
test: /\.css$/,
include: /node_modules/ ,
loaders: ['style-loader', 'css-loader'],
}
i have replicated the entry with :
{
test: /\.css$/,
include: /public/ ,
loaders: ['style-loader', 'css-loader'],
}
but not working
There can be two approach to handle this situation.
1.
You can use the following to add public folder to serve static files.
app.use(express.static('public'));
And then you can add the file in the html if you are using server side rendering.
2.
You can put this file on client side and simply import the file at the entry point of webpack on client side.
And webpack will automatically include it using style loader.

Configure wallaby for React-redux-es6-typescript-immutable applications

How to configure wallaby for React-redux-es6-typescript-immutable application. I use webstorm editor. My base code is committed here
I tried the following code in wallaby.js, but it throws
ReferenceError: Can't find variable: exports
at src/store.ts:3
module.exports = function (wallaby) {
return {
files: [
'src/*.ts'
],
tests: [
'test/*Spec.ts'
],
compilers: {
'**/*.ts': wallaby.compilers.typeScript({
module: 5, // ES6
target: 2 // ES6
})
},
preprocessors: {
'**/*.js': file => require('babel-core').transform(
file.content,
{sourceMap: true, presets: ['es2015']})
}
}
}
I have more or less the same setup as you. Did you try setting the env variable to node?
My working wallaby.js config file for babel 6 is the following:
module.exports = function() {
return {
files: [
{pattern: "src/**/*.js*"}
],
tests: [
{pattern: "tests/integration/*.js"}
],
env: {
type: "node"
},
preprocessors: {
"**/*.js": file => require("babel-core").transform(file.content, {sourceMap: true, presets: ["es2015"]})
}
};
};