I'm packaging a React module with rollup. Implemented with TypeScript. It contains Jest tests. Once I add a "test/mock/data.ts" to file, the output in "dist" changes its structure. A new "dist/src" folder appears. I need the build output to be the same as if the tests were not there at all. The library is open-source: https://github.com/kubevious/ui-properties
Directory Structure:
- src
- index.ts
- test
- mock
- data.ts
- dist
- index.js
- index.d.ts // during the CI build this file is under src/
- src // only if test/mock/data.ts file is there.
- <other>
I have an ugly workaround. Would appreciate a proper solution. During the build:
$ mv .test test
$ npm run build
$ mv test .test
package.json
{
"name": "#kubevious/ui-properties",
"version": "1.0.73",
"description": "Kubevious UI Properties Components",
"main": "dist/index.js",
"types": "dist",
"files": [
"dist/**/*",
"public/**/*"
],
"scripts": {
"test": "env TS_NODE_COMPILER_OPTIONS='{\"module\": \"commonjs\" }' jest",
"test:watch": "jest --watch",
"build": "rollup -c",
"start": "rollup -c -w",
"format": "prettier --write ./src/ ./test/",
"format-check": "prettier --write ./src/ ./test/",
"lint": "eslint",
"storybook": "start-storybook -s ./public,./node_modules/#kubevious/entity-meta/public,./node_modules/#kubevious/ui-components/public -p 6006",
"build-storybook": "build-storybook"
},
"author": "Ruben Hakopian <ruben.hakopian#gmail.com>",
"license": "Apache-2.0",
"dependencies": {
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-framework": "^1.0.59",
"#types/react-gauge-chart": "^0.3.1",
"bootstrap": "^5.0.0-beta3",
"chart.js": "^3.7.1",
"chartjs-plugin-datalabels": "^2.0.0",
"classnames": "2.3.1",
"js-yaml": "^4.0.0",
"react-chartjs-2": "^4.1.0",
"react-gauge-chart": "^0.4.0",
"the-lodash": "^2.0.9",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3"
},
"devDependencies": {
"#storybook/addon-actions": "6.5.7",
"#storybook/addon-essentials": "6.5.7",
"#storybook/addon-links": "6.5.7",
"#storybook/react": "6.5.7",
"#testing-library/jest-dom": "5.16.4",
"#testing-library/react": "12.1.5",
"#types/jest": "26.0.24",
"#types/js-yaml": "^4.0.0",
"#types/node": "^14.6.0",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/uuid": "^8.3.0",
"#typescript-eslint/eslint-plugin": "5.27.1",
"#typescript-eslint/parser": "5.27.1",
"#babel/core": "7.18.2",
"babel-loader": "8.2.5",
"eslint": "8.17.0",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.3",
"postcss": "8.4.14",
"sass": "1.52.2",
"prettier": "^2.1.0",
"#rollup/plugin-babel": "5.3.1",
"#rollup/plugin-commonjs": "22.0.0",
"#rollup/plugin-json": "4.1.0",
"rollup": "2.75.6",
"rollup-plugin-peer-deps-external": "2.2.4",
"rollup-plugin-postcss": "4.0.2",
"rollup-plugin-typescript2": "0.32.1",
"sass-loader": "13.0.0",
"should": "13.2.3",
"storybook-css-modules-preset": "1.1.1",
"ts-jest": "26.5.6",
"ts-node": "10.8.1",
"tslib": "2.4.0",
"typescript": "4.7.3",
"rollup-plugin-sass": "1.2.12",
"#storybook/preset-scss": "1.0.3",
"#types/react-router-dom": "5.3.3",
"#testing-library/dom": "8.13.0",
"#testing-library/user-event": "13.5.0",
"jest-environment-jsdom": "26.6.2",
"css-loader": "6.7.1"
},
"resolutions": {
"the-lodash": "^2.0.9",
"#kubevious/ui-framework": "^1.0.59",
"#kubevious/ui-components": "^1.0.242",
"#kubevious/ui-alerts": "^1.0.49",
"#kubevious/entity-meta": "^1.0.69",
"#kubevious/state-registry": "^1.0.13",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-router-dom": "5.3.3",
"#types/react": "17.0.2",
"#types/react-dom": "17.0.2",
"#types/react-router-dom": "5.3.3"
}
}
rollup.config.js
import typescript from 'rollup-plugin-typescript2';
import { babel } from '#rollup/plugin-babel';
import commonjs from '#rollup/plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import json from '#rollup/plugin-json';
import sass from 'rollup-plugin-sass';
import pkg from './package.json';
export default {
input: 'src/index.ts',
output: [
{
format: 'cjs',
sourcemap: true,
file: pkg.main,
globals: { react: 'React' },
},
],
plugins: [
typescript(),
peerDepsExternal(),
postcss({
extract: false,
modules: true,
use: ['sass'],
}),
babel({ exclude: 'node_modules/**' }),
commonjs({
include: 'node_modules/**',
namedExports: {
'node_modules/react-is/index.js': ['isValidElementType'],
},
}),
sass({ insert: true }),
json(),
],
external: ['react', 'react-dom'],
};
tsconfig.json
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom", "dom.iterable", "esnext","es2016", "es2017"],
"sourceMap": true,
"allowJs": false,
"jsx": "react",
"declaration": true,
"moduleResolution": "node",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"esModuleInterop": true
},
"importHelpers": true,
"include": ["./src"],
"exclude": [
"node_modules",
"dist",
"test",
"**/*.stories.js",
"**/*.stories.jsx",
"**/*.stories.ts",
"**/*.stories.tsx",
"**/test",
"**/test/**/*.test.js",
"**/test/**/*.test.ts",
"**/test/**/*.test.jsx",
"**/test/**/*.test.tsx"
]
}
Related
I have a project that is a typescript/js blend. It is structured as seen above. As you can see the bin contains a file that creates the cdk stack. The lib folder contains a file with all of my cdk code, which creates all of the AWS resources. However, this folder also contains a lot of js files, which also use react. Here is my issue when trying to run cdk deploy I get the error SyntaxError: Cannot use import statement outside a module and yes, I have read every single post around this error, and it isn't as simple is adding "type": "module" to my ts config file. (I have tried this and get the error TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts" for .../bin/aws-cdk-namespace-deployment.ts The file that it yells at me about is in the bin folder. It's a typescript file, which definitely should use imports. Here is my tsconfig:
{
"compilerOptions": {
"outDir": "./dist/",
"baseUrl": ".",
"target": "es2017",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "react",
"downlevelIteration": true
},
"include": [
"src/**/*"
]
}
Here is my package.json
{
"name": "aws-cdk-namespace-deployment",
"version": "0.1.0",
"bin": {
"aws-cdk-namespace-deployment": "bin/aws-cdk-namespace-deployment.ts"
},
"scripts": {
"build": "tsc",
"watch": "tsc -w",
"test": "jest",
"cdk": "cdk"
},
"devDependencies": {
"#babel/plugin-syntax-dynamic-import": "^7.8.3",
"#babel/preset-react": "^7.18.6",
"#babel/preset-typescript": "^7.18.6",
"#babel/register": "^7.18.9",
"#types/aws-lambda": "^8.10.102",
"#types/jest": "^27.5.2",
"#types/node": "10.17.27",
"#types/prettier": "2.6.0",
"aws-cdk": "^2.39.1",
"aws-cdk-lib": "^2.50.0",
"aws-cdk-webpack-lambda-function": "^1.0.0",
"babel-plugin-styled-components": "^2.0.7",
"babel-preset-airbnb": "^5.0.0",
"better-sqlite3": "^7.6.2",
"dotenv": "^16.0.2",
"jest": "^27.5.1",
"knex": "^2.3.0",
"mock-aws-s3": "^4.0.2",
"mysql": "^2.18.1",
"mysql2": "^2.3.3",
"nock": "^13.2.9",
"oracledb": "^5.5.0",
"pg": "^8.8.0",
"pg-native": "^3.0.1",
"pg-query-stream": "^4.2.4",
"prop-types": "^15.8.1",
"sqlite3": "^5.1.2",
"tedious": "^15.1.0",
"ts-jest": "^27.1.4",
"ts-loader": "^9.4.1",
"ts-node": "^10.9.1",
"typescript": "^4.8.4",
"webpack": "^5.75.0",
"webpack-cli": "^4.10.0"
},
"dependencies": {
"#aws-sdk/client-s3": "^3.163.0",
"#aws-sdk/s3-request-presigner": "^3.204.0",
"aws-sdk": "^2.1209.0",
"axios": "^1.1.3",
"babel": "^6.23.0",
"constructs": "^10.0.0",
"d3": "^7.6.1",
"esbuild": "^0.15.12",
"joi": "^17.6.2",
"numeral": "^2.0.6",
"proptypes": "^1.1.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-dom-server": "^0.0.1",
"s3-zip": "^3.2.1",
"source-map-support": "^0.5.21",
"styled-components": "^5.3.6",
"winston": "^3.8.2"
},
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
],
"plugins": [
"babel-plugin-styled-components",
"#babel/plugin-syntax-dynamic-import"
]
}
}
Again with the application structured as seen above and with tsconfig and package.json as seen above, when I run npm run build && cdk deploy I get the error SyntaxError: Cannot use import statement outside a module any help of suggestions would be super appreciated.
You need to handle TS files in the process. Here's how I do mine using tsx:
node ./node_modules/.bin/cdk --app='tsx ./src/cdk/myCDKStacks.ts'
You could make a bin file if desired - I just pass my stack file directly as in above. myCDKStack.ts contains the code for all my stacks.
I am very fresh as per testing. Some time ago I have configured some tests for purely TS React project. Now, I would like to do the same for React project with mixed JS and TS content. FYI, it is in the course of being rewritten to TS, but it will take some time.
Below is my jest.config.ts file content.
import type { Config } from '#jest/types';
const config: Config.InitialOptions = {
roots: ['<rootDir>/test', '<rootDir>/src'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
'^.+\\.css$': '<rootDir>/jest-config/style-mock.js',
},
setupFilesAfterEnv: ['#testing-library/jest-dom/extend-expect'],
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$',
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
testEnvironment: 'jsdom',
collectCoverage: false,
collectCoverageFrom: ['src/**/*.{ts,tsx}'],
moduleNameMapper: {
'^.+\\.(css|sass|scss)$': 'identity-obj-proxy',
},
};
export default config;
When firing first test, I have observed that it breaks on .js files. Precisely, the error text is '
SyntaxError: Unexpected token 'export
' And it pointed on certain file import declaration. When I rewrote temporarily this file content to TS faking it with anys etc.it accepted the file but broke on the next js. How should I modify the config to work well with such the mixture?
Below is also tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"noFallthroughCasesInSwitch": true
},
"include": [
"src"
]
}
and package.json
{
"name": "google_books_finder",
"homepage": "http://kiszuriwalilibori.github.io/books",
"version": "1.4.2",
"private": true,
"dependencies": {
"#babel/plugin-proposal-private-methods": "^7.10.4",
"#babel/runtime-corejs3": "^7.11.2",
"#material-ui/core": "^4.11.0",
"#material-ui/icons": "^4.9.1",
"#material-ui/lab": "^4.0.0-alpha.56",
"#reduxjs/toolkit": "^1.7.1",
"#testing-library/jest-dom": "^5.11.4",
"#testing-library/react": "^11.0.4",
"#testing-library/user-event": "^12.1.7",
"#types/jest": "^27.0.2",
"#types/node": "^16.11.6",
"#types/react": "^17.0.33",
"#types/react-dom": "^17.0.10",
"axios": "^0.23.0",
"comlink": "^4.3.0",
"dotenv": "^8.2.0",
"es6-promise": "^4.2.8",
"es6-symbol": "^3.1.3",
"eslint-plugin-jest-dom": "^4.0.1",
"eslint-plugin-testing-library": "^5.0.3",
"formik": "^2.2.9",
"identity-obj-proxy": "^3.0.0",
"jest": "^27.4.7",
"lodash": "^4.17.21",
"material-ui": "^0.20.2",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-app-polyfill": "^1.0.6",
"react-dom": "^17.0.2",
"react-hook-form": "^7.19.5",
"react-query": "^3.27.0",
"react-redux": "^7.2.1",
"react-router-dom": "^5.2.0",
"react-router-redux": "^4.0.8",
"react-scripts": "^5.0.0",
"redux": "^4.1.1",
"redux-saga": "^1.1.3",
"redux-thunk": "^2.3.0",
"throttle-debounce": "^2.3.0",
"ts-jest": "^27.1.3",
"ts-node": "^10.4.0",
"typescript": "^4.4.4",
"use-debounce": "^5.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "jest",
"test:watch": "jest --watchAll",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"devDependencies": {
"#babel/preset-stage-3": "^7.8.3",
"#types/lodash": "^4.14.176",
"#types/react-router-dom": "^5.3.2",
"babel-plugin-styled-components": "^1.11.1",
"gh-pages": "^3.2.3"
},
"eslintConfig": {
"extends": "react-app"
},
"plugins": [
"babel-plugin-styled-components",
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
]
],
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie >= 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"ie >= 11"
]
}
}
I'm encountering the following error in my vue project after packages update:
Failed to compile.
./node_modules/#polkadot/networks/packageInfo.js 6:27
Module parse failed: Unexpected token (6:27)
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
| export const packageInfo = {
| name: '#polkadot/networks',
> path: new URL('.', import.meta.url).pathname,
| type: 'esm',
| version: '8.3.1'
Honestly I've tried lot of suggestions found across the internet and nothing appears to solve it.
My package.json:
{
"name": "polkadot-frontend",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#polkadot/extension-dapp": "0.42.2",
"#polkadot/keyring": "^8.1.2",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0",
"vuex": "^3.4.0"
},
"devDependencies": {
"#typescript-eslint/eslint-plugin": "^4.18.0",
"#typescript-eslint/parser": "^4.18.0",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-router": "^4.5.15",
"#vue/cli-plugin-typescript": "~4.5.0",
"#vue/cli-plugin-vuex": "^4.5.15",
"#vue/cli-service": "~4.5.0",
"#vue/eslint-config-standard": "^5.1.2",
"#vue/eslint-config-typescript": "^7.0.0",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vuetify": "~2.4.5",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
}
My tsconfig:
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"experimentalDecorators": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"types": [
"webpack-env"
],
"paths": {
"#/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"src/**/*.ts",
"src/**/*.tsx",
"src/**/*.vue",
"tests/**/*.ts",
"tests/**/*.tsx"
],
"exclude": [
"node_modules"
]
}
My vue.config.js
module.exports = {
transpileDependencies: [
'vuetify'
]
}
My babel.config.js
module.exports = {
presets: [
'#vue/cli-plugin-babel/preset'
]
}
Does anyone have idea how to fix this? As far as I understand from the error my webpack can't parse the js file from the module. But aren't the js files supported by default in webpack?
My understanding is that somehow I need to specify in vue.config.js that I'm using esm modules, and how they can be loaded and parsed.
Any ideas will be greatly appreciated!
It appears that this is known issue with webpack 4 and older versions (I think it is fixed in version 5).
Basically in order webpack to be able to parse the problematic files it needs additional package:
https://www.npmjs.com/package/#open-wc/webpack-import-meta-loader
Once I've installed the package I've included it in my vue webpack config via the vue.config.js file as follows:
const {VueLoaderPlugin} = require("vue-loader");
module.exports = {
transpileDependencies: [
'vuetify'
],
configureWebpack: {
module: {
rules: [
{
test: /\.js$/,
loader: require.resolve('#open-wc/webpack-import-meta-loader'),
}
]
}
}
}
In my case solution proposed by #themartto was not working.
I had to set vue.config.js
{
transpileDependencies: [
'affected-dependency'
],
chainWebpack (config)
{
config.module
.rule('js')
.test(/\.js$/)
.use('#open-wc/webpack-import-meta-loader')
.loader('#open-wc/webpack-import-meta-loader');
}
}
I am writing my own React library with Typescript. I have a lot of problems with building and using it. I am using webpack with ts loader to build files into lib folder. When I am trying to use my components from build
import React from 'react'
import { Text } from '../lib'
export default () => {
return <Text lg>Blabla</Text>
}
I get an error
index.js:9 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
What is wrong?
tsconfig
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "esnext"],
"allowJs": true,
"outDir": "./lib/",
"noImplicitAny": true,
"allowSyntheticDefaultImports": true,
"module": "esnext",
"jsx": "react",
"moduleResolution": "node",
"esModuleInterop": true,
"declaration": true,
"typeRoots": ["node_modules/#types"]
},
"include": ["src"],
"exclude": ["node_modules"]
}
webpack
const path = require('path')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, '../src/index.ts'),
module: {
rules: [
{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'index.js',
path: path.resolve(__dirname, '../lib'),
library: 'my-library',
libraryTarget: 'umd',
umdNamedDefine: true
},
plugins: [new CleanWebpackPlugin()]
}
package.json
{
"name": "my-library",
"version": "1.0.0",
"private": true,
"types": "lib",
"main": "lib/index.js",
"dependencies": {
"#types/node": "^14.0.11",
"#types/react": "^16.9.35",
"#types/react-dom": "^16.9.8",
"#types/styled-components": "^5.1.0",
"clean-webpack-plugin": "^3.0.0",
"html-webpack-plugin": "^4.3.0",
"prettier": "^2.0.5",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"styled-components": "^5.1.1",
"ts-loader": "^7.0.5",
"typescript": "^3.9.5",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"build": "webpack --config config/webpack.prod.js",
"dev": "webpack-dev-server --mode development --open --hot --config config/webpack.dev.js",
"storybook": "start-storybook -p 6006",
"build-storybook": "build-storybook"
},
"devDependencies": {
"#babel/core": "^7.10.2",
"#storybook/addon-actions": "^5.3.19",
"#storybook/addon-links": "^5.3.19",
"#storybook/addons": "^5.3.19",
"#storybook/react": "^5.3.19",
"babel-loader": "^8.1.0"
}
}
I have an ASP.NET MVC solution with my front-end scripts in TypeScript. I am trying to use webpack and babel with ts-loader so I can develop with es2016 but have babel transform to es5 and be able to run and debug in IE from Visual Studio. However I find that the output js is not transformed as I expect. For example the following statements in my ts appear in my resulting js, which are not es5:
import * as moment from 'moment';
import { classes } from './order';
Here is my config:
.babelrc
{
"presets": ["es2015"]
}
webpack.config.js
var path = require('path');
module.exports = {
context: path.join(__dirname, 'Scripts'),
entry: ['babel-polyfill', './pos.ts'],
output: {
path: path.join(__dirname, 'Scripts'),
filename: '[name].js'
},
resolve: {
extensions: ['.js', '.ts']
},
module: {
loaders: [{
test: /\.ts$/,
loaders: ['babel-loader', 'ts-loader'],
exclude: /(node_modules|bower_components)/
}]
},
devtool: 'inline-source-map'
};
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es2016",
"module": "es2015",
"lib": [ "dom", "es2015", "es2016" ],
"allowSyntheticDefaultImports": true,
"moduleResolution": "node",
"preserveConstEnums": true,
"skipLibCheck": true
},
"include": [
"node_modules/#types/**/*.d.ts",
"Scripts/**/*.ts"
]
}
package.json
{
"version": "1.0.0",
"name": "foo",
"readme": "README.md",
"description": "foo",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-es2015": "^6.24.1",
"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-bower": "^0.0.13",
"gulp-clean-css": "^3.4.1",
"gulp-concat": "^2.6.1",
"gulp-copy": "^1.0.0",
"gulp-less": "^3.3.0",
"gulp-rimraf": "^0.2.1",
"gulp-sass": "^3.1.0",
"gulp-shell": "^0.6.3",
"gulp-sourcemaps": "^2.6.0",
"gulp-tsc": "^1.3.2",
"gulp-uglify": "^3.0.0",
"gulp-util": "^3.0.8",
"merge-stream": "^1.0.1",
"node-sass": "^4.5.3",
"run-sequence": "^1.2.2",
"ts-loader": "^2.3.2",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1",
"webpack-notifier": "^1.5.0"
},
"dependencies": {
"#types/jquery": "^2.0.46",
"#types/bootstrap-touchspin": "",
"#types/maskedinput": "",
"#types/bootstrap-select": ""
},
"scripts": {
"build": "webpack",
"watch": "webpack --watch",
"start": "webpack-dev-server --hot --inline"
}
}
Webpack appears to be running successfully in that there are no errors and js is created from my ts. I think that Babel is being invoked because if I put in an invalid preset I get an error. However as noted above it seems like Babel is not transforming to es5. I have tried other presets like env and 2016. What am I missing?