We Keep Coding

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']
}
};
};

Unexpected token You may need an appropriate loader to handle this file type.importing strapi sdk

Hi I am trying to import javascript strapi sdk (link) in my new project which is configured using web pack
Here is my code yet
index.ts file
import * as $ from 'jquery';
import Strapi from 'strapi-sdk-javascript'
const strapi = new Strapi('http://localhost:1337')
here is my webpack.config.file
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: './src/index.ts',
module: {
rules: [
{
test: /\.js$/,
use:
{loader: 'babel-loader',
options: {
presets: ['env']
}
},
// include: [path.resolve(__dirname, "./src/app")],
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
$: "jquery/src/jquery",
}
},
devtool: 'inline-source-map',
devServer: {
contentBase: './dist'
},
plugins: [
new CleanWebpackPlugin(['dist']),
new HtmlWebpackPlugin({
template: 'src/assets/template.html'
})
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
and this is giving my this error
what am i doing wrong here . please
help thanks in advance

You can try something like this
// Process JS with Babel.
{
test: /\.(js|jsx|mjs)$/,
include: [path.resolve(__dirname,"./src/app")path.resolve('node_modules/strapi-sdk-javascript')],
loader: require.resolve('babel-loader'),
},

How to limit scope of webpack

I'm currently trying to implement typescript into my backend, but since it's quite new to me, I'm trying to figure things out one by one in a test folder, however it seems like webpack is taking all of my files and trying to read them, which gives me errors like:
Duplicate identifier, Module '"xxxx"' has no default export, Cannot find name 'Proxy'., Cannot redeclare block-scoped variable 'xxxx'.
Here's my config file (still using webpack3 for reasons):
"use strict"
const path = require("path")
// const utils = require("./utils")
// const config = require("../config")
var fs = require("fs")
const NodemonPlugin = require("nodemon-webpack-plugin")
const nodeExternals = require("webpack-node-externals")
function resolve(dir)
{
return path.join(__dirname, "..", dir)
}
module.exports = {
context: path.resolve(__dirname, "../src/server/test"),
entry: "./test.ts",
output: {
path: path.resolve(__dirname, "../src/server/test"),
filename: "bundle.js",
},
plugins: [
// new NodemonPlugin(),
],
resolve: {
extensions: [".js",".ts", ".tsx"],
alias: {
"#": resolve("src"),
"#": resolve("src/server")
}
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: [resolve("src"), resolve("test")]
},
{
test: /\.tsx?$/,
loader: "ts-loader",
},
]
},
externals: [
nodeExternals()
],
target: "node"
}

webpack - output.filename error

I know this is a common question for webpack; it's really hard to debug something if it won't give you any information about the cause or location of the error.
I'm getting the error:
Error: 'output.filename' is required, either in config file or as --output-filename
I know it has to do with a syntax error somewhere, but I'm too new to webpack to figure it out.
Here's my config file. It's called "webpack.config.js" in the root folder (i.e. the folder in which I initially ran: npm init).
const webpack = require('webpack');
const path = require("path");
const ExtractTextPlugin = require("extract-text-webpack-plugin")
const RewriteImportPlugin = require("less-plugin-rewrite-import");
const root_dir = path.resolve(__dirname)
const src_dir = path.resolve(__dirname, "webpack_src")
const build_dir = path.resolve(__dirname, "webpack_bin")
const node_mod_dir = path.resolve(__dirname, 'node_modules');
const extractLESS = new ExtractTextPlugin('style.css');
const config = {
entry: {
index: path.resolve(src_dir, 'index.js')
},
output: {
path: build_dir,
filename: 'bundle.js'
},
resolve: {
modules: [root_dir, 'node_modules'],
},
module: {
rules: [
{
loader: 'babel-loader',
test: /\.(js)$/
},
{
use: extractLESS.extract({
fallback: 'style-loader',
use: [
'css-loader',
{
loader: 'less-loader',
options: {
paths: [root_dir, node_mod_dir],
plugins: [
new RewriteImportPlugin({
paths: {
'../../theme.config': __dirname + '/semantic_ui/theme.config',
}
})
]
}
}]
}),
test: /\.less$/
},
{
use: ['file-loader'],
test: /\.(png|jpg|gif|woff|svg|eot|ttf|woff2)$/
},
]
},
plugins: [
extractLESS,
new webpack.optimize.ModuleConcatenationPlugin()
]
};
module.exports = {
config
};

You're exporting module.exports = { config }, which means that you are exporting an object with one property, namely config, but webpack expects the object to be your entire config. Webpack requires output.filename, whereas you only provide config.output.filename.
The export should be your config:
module.exports = config;

Error in React: unknown word when using webpack

I have set up a React environment with webpack and babel. However, when I run webpack-dev-server --progress --colors, I get error like this:
ERROR in multi (webpack)-dev-server/client?http://localhost:8080 E:/src/index.js
Module not found: Error: can't resolve 'E:\src/index.js' in 'E:\personal_projects\web-site-name'
...
(2:1) Unknown word
1: var url = require("url");
^
My webpack.config.js file is this:
var webpack = require('webpack');
var path = require('path');
var BUILD_DIR = path.resolve(__dirname, '/public');
var APP_DIR = path.resolve(__dirname, '/src');
var config = {
entry: APP_DIR + '/index.js',
output: {
path: BUILD_DIR,
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
},
{
test: /(\.css$)/,
loaders: ['style-loader', 'css-loader', 'postcss-loader']
},
{
loader: 'postcss-loader',
options: {
plugins: () => [require('autoprefixer')]
}
}
]
}
};
module.exports = config;
I think there is some problem with babel and it compiling my index.js to my bundle.js file. Any advice on this?

You either need to use path.join or remove your slashes, e.g.
path.resolve(__dirname, '/src');
and other lines using resolve should be
path.resolve(__dirname, 'src');
or
path.join(__dirname, 'src');
or even
path.join(__dirname, '/src');
Your usage of .resolve passes an absolute path /src, meaning that the first argument is essentially discarded.