Describe the bug
Loaders (babel and typescript) are not being respected. Although they correctly transpile during build and development. This is at least present on latest versions (tested from 1.1.2 - 1.1.4)
Here's the mumbojambo from terminal. Pretty much just errors caused by missed loaders:
WEBPACK Compiling...
[=========================] 100% (completed)
WEBPACK Failed to compile with 7 error(s)
Error in ./test/techniques/functional/monads_level1.spec.ts
Module parse failed: The keyword 'interface' is reserved (27:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| // NOTE: However - Since we R functional AF we have a maker function:
> interface Monad<T> {
| (value?: T): M<T>
| };
Error in ./test/EcmaNext/stage2.spec.js
Module parse failed: Unexpected token (11:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| \ outside of the constructor:`, function () {
| class NewFoo {
> x = 0;
| incrementX () { this.x++; }
| readX () { return this.x }
Error in ./test/basics/prototypes.spec.js
Module parse failed: Unexpected token (133:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|
> boundFunctionB = () => this.instanceProp;
| }
| let foo = new Foo();
Error in ./test/EcmaNext/stage3.spec.js
Module parse failed: Unexpected token (21:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| class Foo {
| // NOTE: Behaves as before:
> instanceProp = "bar";
| boundFunction = () => {
| return this.instanceProp;
Error in ./test/EcmaNext/stage0.spec.js
Module parse failed: Unexpected token (21:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| expect(outer.foo()).to.equal(1);
|
> outer.foo = outer.inner::outer.inner.foo;
| expect(outer.foo()).to.equal(2);
|
Error in ./test/EcmaNext/stage1.spec.js
Module parse failed: Unexpected token (29:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| let qux;
> qux ||= bar;
| expect(qux).to.equal(1);
|
Error in ./test/TS/TSTypes.spec.ts
Module parse failed: Unexpected token (8:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| describe("Booleans:", function () {
| it("Forbids the use of other values than 'true/false'", function () {
> let isBoolean: boolean = false;
| // Compile time error:
| // isBoolean = 1;
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] test: `mochapack --webpack-config webpack.config.test.js --require ./test/test_helper.js ./test/index.spec.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] test script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Reaper\AppData\Roaming\npm-cache\_logs\2019-09-02T12_15_40_283Z-debug.log
D:\Projects\JavaScript\JS\MasterClass>npm run test
> [email protected] test D:\Projects\JavaScript\JS\MasterClass
> mochapack --webpack-config webpack.config.test.js --require ./test/test_helper.js ./test/index.spec.js
WEBPACK Compiling...
[=========================] 100% (completed)
WEBPACK Failed to compile with 7 error(s)
Error in ./test/techniques/functional/monads_level1.spec.ts
Module parse failed: The keyword 'interface' is reserved (27:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| */
| // NOTE: However - Since we R functional AF we have a maker function:
> interface Monad<T> {
| (value?: T): M<T>
| };
Error in ./test/EcmaNext/stage2.spec.js
Module parse failed: Unexpected token (11:10)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| \ outside of the constructor:`, function () {
| class NewFoo {
> x = 0;
| incrementX () { this.x++; }
| readX () { return this.x }
Error in ./test/basics/prototypes.spec.js
Module parse failed: Unexpected token (133:23)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
|
> boundFunctionB = () => this.instanceProp;
| }
| let foo = new Foo();
Error in ./test/EcmaNext/stage3.spec.js
Module parse failed: Unexpected token (21:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| class Foo {
| // NOTE: Behaves as before:
> instanceProp = "bar";
| boundFunction = () => {
| return this.instanceProp;
Error in ./test/EcmaNext/stage0.spec.js
Module parse failed: Unexpected token (21:29)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| expect(outer.foo()).to.equal(1);
|
> outer.foo = outer.inner::outer.inner.foo;
| expect(outer.foo()).to.equal(2);
|
Error in ./test/EcmaNext/stage1.spec.js
Module parse failed: Unexpected token (29:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|
| let qux;
> qux ||= bar;
| expect(qux).to.equal(1);
|
Error in ./test/TS/TSTypes.spec.ts
Module parse failed: Unexpected token (8:21)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| describe("Booleans:", function () {
| it("Forbids the use of other values than 'true/false'", function () {
> let isBoolean: boolean = false;
| // Compile time error:
| // isBoolean = 1;
npm ERR! code ELIFECYCLE
npm ERR! errno 1
To Reproduce
To run:
mochapack --webpack-config webpack.config.test.js --require ./test/test_helper.js ./test/index.spec.js
The configuration I have:
babel.config.js
module.exports = function(api) {
api.cache(true);
const presets = [
[ "@babel/preset-env", {
"targets": {
"browsers": [ "last 2 versions", "> 1%" ],
"node": "current"
},
"modules": false,
"useBuiltIns": "entry",
"debug": true
}]
];
const plugins = [
[ "@babel/plugin-transform-runtime", { "regenerator": true } ],
// Stage 0
"@babel/plugin-proposal-function-bind",
// Stage 1
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-logical-assignment-operators",
[ "@babel/plugin-proposal-optional-chaining", { "loose": false } ],
[ "@babel/plugin-proposal-pipeline-operator", { "proposal": "minimal" } ],
[ "@babel/plugin-proposal-nullish-coalescing-operator", { "loose": false } ],
"@babel/plugin-proposal-do-expressions",
// Stage 2:
[ "@babel/plugin-proposal-decorators", { "legacy": true } ],
"@babel/plugin-proposal-function-sent",
"@babel/plugin-proposal-export-namespace-from",
"@babel/plugin-proposal-numeric-separator",
"@babel/plugin-proposal-throw-expressions",
// Stage 3:
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-syntax-import-meta",
["@babel/plugin-proposal-class-properties", { "loose": false }],
"@babel/plugin-proposal-json-strings"
];
return {
presets,
plugins
};
};
webpack.config.js:
const path = require("path"),
webpack = require("webpack"),
merge = require("webpack-merge"),
APP_DIR = path.resolve(__dirname, "src"),
BUILD_DIR = path.resolve(__dirname, "build");
let commonConfig = {
target: "node",
output: {
path: BUILD_DIR,
publicPath: "/",
filename: "bundle.js"
},
resolve: {
extensions: [ ".ts", ".js" ]
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: APP_DIR
}, {
test: /\.ts$/,
loader: "awesome-typescript-loader",
include: APP_DIR,
options: {
// NOTE: serves as a handy switch for prototyping needs:
transpileOnly: true
}
}
]
}
};
module.exports = env =>
env && env.production
? merge(commonConfig, {
mode: "production",
entry: [
`${APP_DIR}/index.js`
]
})
: merge(commonConfig, {
mode: "development",
entry: [
"webpack/hot/only-dev-server", // Prevents reloading during errors.
`${APP_DIR}/index.js`
],
plugins: [
new webpack.HotModuleReplacementPlugin()
]
});
webpack.config.test.js
let config = require("./webpack.config"),
path = require("path"),
TEST_DIR = path.resolve(__dirname, "test");
config.entry = [
`${TEST_DIR}/index.spec.js`
];
config.module = {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
include: TEST_DIR
}, {
test: /\.ts$/,
loader: "awesome-typescript-loader",
include: TEST_DIR,
options: {
// Currently not used, since TS gives a bit of a headache on EcmaNext:
// NOTE: serves as a handy switch for prototyping needs:
transpileOnly: true
}
}
]
};
module.exports = config;
test_helper.js
"use strict";
var chai = require("chai"),
chaiAsPromised = require("chai-as-promised");
chai.use(chaiAsPromised);
chai.should();
Relevant libraries in package.json:
"devDependencies": {
"@babel/core": "^7.5.5",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-proposal-do-expressions": "^7.5.0",
"@babel/plugin-proposal-export-default-from": "^7.5.2",
"@babel/plugin-proposal-export-namespace-from": "^7.5.2",
"@babel/plugin-proposal-function-bind": "^7.2.0",
"@babel/plugin-proposal-function-sent": "^7.5.0",
"@babel/plugin-proposal-json-strings": "^7.2.0",
"@babel/plugin-proposal-logical-assignment-operators": "^7.2.0",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
"@babel/plugin-proposal-numeric-separator": "^7.2.0",
"@babel/plugin-proposal-object-rest-spread": "^7.5.5",
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
"@babel/plugin-proposal-pipeline-operator": "^7.5.0",
"@babel/plugin-proposal-throw-expressions": "^7.2.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-syntax-import-meta": "^7.2.0",
"@babel/plugin-transform-runtime": "^7.5.5",
"@babel/preset-env": "^7.5.5",
"@babel/runtime": "^7.5.5",
"@types/html-webpack-plugin": "^3.2.1",
"@types/mocha": "^5.2.7",
"@types/node": "^12.7.3",
"@types/webpack-env": "^1.14.0",
"awesome-typescript-loader": "^5.2.1",
"babel-loader": "^8.0.6",
"chai": "^4.2.0",
"chai-as-promised": "^7.1.1",
"eslint": "^6.3.0",
"loglevel": "^1.6.3",
"mocha": "^6.2.0",
"mochapack": "^1.1.2",
"sinon": "^7.4.1",
"typescript": "^3.6.2",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-merge": "^4.2.2"
},
Environment if relevant (please complete the following information):
- OS: Windows 10
- Node version 10.16.3
- Mochapack version 1.1.2 - 1.1.4
- Webpack version 4.39.3
EDIT: I have updated my node but the issue persists. The issue description has been updated accordingly.