Mixing
Module parse failed: Unexpected token on React Component Render
0
I am trying to make configure React with Typescript (only for for type checking), Babel for all code transpilation, Jest for testing, ESLint for code checking and other tools. Please check the repo link below with all the files.
I followed the Kent C. Dodds and following tutorial to add webpack with Typescript: https://blog.wax-o.com/2018/05/webpack-loaders-babel-sourcemaps-react-hot-module-reload-typescript-modules-code-splitting-and-lazy-loading-full-tutorial-to-transpile-and-bundle-your-code/
It seems to be possible to get all these tools working together as at some point build did work for TypeScript files, but dev server didn't and now neither works.
I would appreciate more experienced pair of eyes to take a look at the configuration as I am complete beginner at this.
Error message:
PS D:serverwwwapache24_29htdocsreact-boilerplate> npm run build
> react-boilerplate@1.0.0 build D:serverwwwapache24_29htdocsreact-boilerplate
> webpack --env.NODE_ENV=production
Start build for NODE_ENV: production
clean-webpack-plugin: D:serverwwwapache24_29htdocsreact-boilerplatewebpackConfigdist has been removed.
Hash: a14d15aa8f5505a1657a
Version: webpack 4.28.3
Time: 200ms
Built at: 2019-01-01 12:00:02
2 assets
Entrypoint main = index.js sourcemaps/main.js.map
[0] ./src/index.tsx 262 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.tsx 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.| import { HelloComponent } from "./hello";
|
> ReactDOM.render(<HelloComponent />, document.getElementById("root"));
|
Webpack Bundle Analyzer saved report to D:serverwwwapache24_29htdocsreact-boilerplatedistreport.html
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-boilerplate@1.0.0 build: `webpack --env.NODE_ENV=production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-boilerplate@1.0.0 build 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...AppDataRoamingnpm-cache_logs2019-01-01T11_00_03_174Z-debug.log
I created a repository with current version. It's all work in progress:
https://github.com/ethernal/react-boilerplate
I am posting configuration here as well.
package.json
{
"name" : "react-boilerplate",
"version" : "1.0.0",
"description": "React Boilerplate with Typescript, Babel, Jest, EsLint, Prettier, Styled Components, React Testig Library, Webpack, Webpack Dev Server",
"main" : "index.tsx",
"scripts" : {
"format" : "prettier "**/*.(js|ts|tsx|jsx)" --write",
"lint" : "eslint . --ext ".js,.ts,.tsx"",
"typecheck" : "tsc",
"test" : "jest --watch",
"cover" : "jest --coverage",
"start" : "babel-node --extensions '.ts,.tsx' index.ts",
"build" : "webpack --env.NODE_ENV=production",
"server-no-reaload": "webpack-dev-server --env.NODE_ENV=development",
"server" : "nodemon --watch webpack.config.ts -x webpack-dev-server -- --env.NODE_ENV=development"
},
"author" : "",
"license" : "ISC",
"dependencies": {
"@reach/router" : "^1.2.1",
"babel-plugin-styled-components": "^1.10.0",
"react" : "^16.7.0",
"react-dom" : "^16.7.0",
"styled-components" : "^4.1.3"
},
"devDependencies": {
"@babel/cli" : "^7.2.3",
"@babel/core" : "^7.2.2",
"@babel/parser" : "^7.2.3",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-syntax-dynamic-import" : "^7.2.0",
"@babel/preset-env" : "^7.2.3",
"@babel/preset-react" : "^7.0.0",
"@babel/preset-typescript" : "^7.1.0",
"@types/jest" : "^23.3.10",
"@types/node" : "^10.12.18",
"@types/react" : "^16.7.17",
"@types/react-dom" : "^16.0.11",
"@types/webpack" : "^4.4.22",
"babel-loader" : "^8.0.4",
"clean-webpack-plugin" : "^1.0.0",
"copy-webpack-plugin" : "^4.6.0",
"eslint" : "^5.10.0",
"eslint-plugin-typescript" : "^0.14.0",
"html-minifier" : "^3.5.21",
"jest" : "^23.6.0",
"jest-runner-eslint" : "^0.7.1",
"jest-runner-tsc" : "^1.3.2",
"nodemon" : "^1.18.9",
"pluggable-babel-eslint" : "^0.3.0",
"prettier" : "^1.15.3",
"react-hot-loader" : "^4.6.3",
"react-testing-library" : "^5.4.2",
"source-map-loader" : "^0.2.4",
"ts-loader" : "^5.3.2",
"ts-node" : "^7.0.1",
"typescript" : "^3.2.2",
"typescript-babel-jest" : "^1.0.5",
"typescript-eslint-parser" : "^21.0.2",
"uglifyjs-webpack-plugin" : "^2.1.1",
"webpack" : "^4.28.3",
"webpack-bundle-analyzer" : "^3.0.3",
"webpack-cli" : "^3.1.2",
"webpack-dev-server" : "^3.1.14"
},
"jest": {
"setupFiles": [
"./jest.config.js"
],
"moduleDirectories": [
"./node_modules",
"./src"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
],
"transform": {
"^.+\.(js|jsx|ts|tsx)$": "typescript-babel-jest"
}
},
"resolutions": {
"babel-core": "^7.0.0-bridge.0"
}
}
webpack main configuration:
const path = require('path');
const productionConfig = require('./webpackConfig/production');
const developmentConfig = require('./webpackConfig/development');
module.exports = env => {
if (env.NODE_ENV === 'production')
return productionConfig(env, path.resolve(__dirname));
if (env.NODE_ENV === 'development')
return developmentConfig(env, path.resolve(__dirname));
};
webpack development configuration:
const webpack = require("webpack");
function buildDevelopementConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
devtool: "cheap-module-eval-source-map",
output : {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "development",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
devServer: {
host : "0.0.0.0",
contentBase : dirname + "/src",
hotOnly : true,
overlay : true,
publicPath : "/",
watchContentBase: false
},
module: {
rules: [
{
test : /.(tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["> 0.5%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"react-hot-loader/babel"
]
}
}
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
}
module.exports = buildDevelopementConfig;
Webpack production configuration:
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HTMLMinifier = require("html-minifier");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
function buildProductionConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
output: {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "production",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
module: {
rules: [
{
test : /.(js|jsx|ts|tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["cover 99%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties"
]
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new UglifyJsPlugin({
parallel : true,
sourceMap : true,
cache : true,
include : dirname + "/src",
uglifyOptions: {
compress: true,
toplevel: true,
safari10: true,
output : {
comments: false
}
}
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.SourceMapDevToolPlugin({
filename : "sourcemaps/[name].js.map",
lineToLine: true
}),
new BundleAnalyzerPlugin({ analyzerMode: "static" }),
new CopyWebpackPlugin(
[
{
from: dirname + "/src/index.html",
to : dirname + "/dist",
transform(htmlAsBuffer) {
return Buffer.from(
HTMLMinifier.minify(
htmlAsBuffer.toString("utf8"),
{
collapseWhitespace : true,
collapseBooleanAttributes : true,
collapseInlineTagWhitespace: true
}
)
);
}
}
],
{}
)
],
performance: {
hints: "warning"
}
};
}
module.exports = buildProductionConfig;
reactjs typescript webpack configuration babel
edited Jan 1 at 11:30
Flimzy
39.3k106698
asked Jan 1 at 11:29
EthernalEthernal
161111
add a comment |
0
I am trying to make configure React with Typescript (only for for type checking), Babel for all code transpilation, Jest for testing, ESLint for code checking and other tools. Please check the repo link below with all the files.
I followed the Kent C. Dodds and following tutorial to add webpack with Typescript: https://blog.wax-o.com/2018/05/webpack-loaders-babel-sourcemaps-react-hot-module-reload-typescript-modules-code-splitting-and-lazy-loading-full-tutorial-to-transpile-and-bundle-your-code/
It seems to be possible to get all these tools working together as at some point build did work for TypeScript files, but dev server didn't and now neither works.
I would appreciate more experienced pair of eyes to take a look at the configuration as I am complete beginner at this.
Error message:
PS D:serverwwwapache24_29htdocsreact-boilerplate> npm run build
> react-boilerplate@1.0.0 build D:serverwwwapache24_29htdocsreact-boilerplate
> webpack --env.NODE_ENV=production
Start build for NODE_ENV: production
clean-webpack-plugin: D:serverwwwapache24_29htdocsreact-boilerplatewebpackConfigdist has been removed.
Hash: a14d15aa8f5505a1657a
Version: webpack 4.28.3
Time: 200ms
Built at: 2019-01-01 12:00:02
2 assets
Entrypoint main = index.js sourcemaps/main.js.map
[0] ./src/index.tsx 262 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.tsx 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.| import { HelloComponent } from "./hello";
|
> ReactDOM.render(<HelloComponent />, document.getElementById("root"));
|
Webpack Bundle Analyzer saved report to D:serverwwwapache24_29htdocsreact-boilerplatedistreport.html
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-boilerplate@1.0.0 build: `webpack --env.NODE_ENV=production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-boilerplate@1.0.0 build 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...AppDataRoamingnpm-cache_logs2019-01-01T11_00_03_174Z-debug.log
I created a repository with current version. It's all work in progress:
https://github.com/ethernal/react-boilerplate
I am posting configuration here as well.
package.json
{
"name" : "react-boilerplate",
"version" : "1.0.0",
"description": "React Boilerplate with Typescript, Babel, Jest, EsLint, Prettier, Styled Components, React Testig Library, Webpack, Webpack Dev Server",
"main" : "index.tsx",
"scripts" : {
"format" : "prettier "**/*.(js|ts|tsx|jsx)" --write",
"lint" : "eslint . --ext ".js,.ts,.tsx"",
"typecheck" : "tsc",
"test" : "jest --watch",
"cover" : "jest --coverage",
"start" : "babel-node --extensions '.ts,.tsx' index.ts",
"build" : "webpack --env.NODE_ENV=production",
"server-no-reaload": "webpack-dev-server --env.NODE_ENV=development",
"server" : "nodemon --watch webpack.config.ts -x webpack-dev-server -- --env.NODE_ENV=development"
},
"author" : "",
"license" : "ISC",
"dependencies": {
"@reach/router" : "^1.2.1",
"babel-plugin-styled-components": "^1.10.0",
"react" : "^16.7.0",
"react-dom" : "^16.7.0",
"styled-components" : "^4.1.3"
},
"devDependencies": {
"@babel/cli" : "^7.2.3",
"@babel/core" : "^7.2.2",
"@babel/parser" : "^7.2.3",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-syntax-dynamic-import" : "^7.2.0",
"@babel/preset-env" : "^7.2.3",
"@babel/preset-react" : "^7.0.0",
"@babel/preset-typescript" : "^7.1.0",
"@types/jest" : "^23.3.10",
"@types/node" : "^10.12.18",
"@types/react" : "^16.7.17",
"@types/react-dom" : "^16.0.11",
"@types/webpack" : "^4.4.22",
"babel-loader" : "^8.0.4",
"clean-webpack-plugin" : "^1.0.0",
"copy-webpack-plugin" : "^4.6.0",
"eslint" : "^5.10.0",
"eslint-plugin-typescript" : "^0.14.0",
"html-minifier" : "^3.5.21",
"jest" : "^23.6.0",
"jest-runner-eslint" : "^0.7.1",
"jest-runner-tsc" : "^1.3.2",
"nodemon" : "^1.18.9",
"pluggable-babel-eslint" : "^0.3.0",
"prettier" : "^1.15.3",
"react-hot-loader" : "^4.6.3",
"react-testing-library" : "^5.4.2",
"source-map-loader" : "^0.2.4",
"ts-loader" : "^5.3.2",
"ts-node" : "^7.0.1",
"typescript" : "^3.2.2",
"typescript-babel-jest" : "^1.0.5",
"typescript-eslint-parser" : "^21.0.2",
"uglifyjs-webpack-plugin" : "^2.1.1",
"webpack" : "^4.28.3",
"webpack-bundle-analyzer" : "^3.0.3",
"webpack-cli" : "^3.1.2",
"webpack-dev-server" : "^3.1.14"
},
"jest": {
"setupFiles": [
"./jest.config.js"
],
"moduleDirectories": [
"./node_modules",
"./src"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
],
"transform": {
"^.+\.(js|jsx|ts|tsx)$": "typescript-babel-jest"
}
},
"resolutions": {
"babel-core": "^7.0.0-bridge.0"
}
}
webpack main configuration:
const path = require('path');
const productionConfig = require('./webpackConfig/production');
const developmentConfig = require('./webpackConfig/development');
module.exports = env => {
if (env.NODE_ENV === 'production')
return productionConfig(env, path.resolve(__dirname));
if (env.NODE_ENV === 'development')
return developmentConfig(env, path.resolve(__dirname));
};
webpack development configuration:
const webpack = require("webpack");
function buildDevelopementConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
devtool: "cheap-module-eval-source-map",
output : {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "development",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
devServer: {
host : "0.0.0.0",
contentBase : dirname + "/src",
hotOnly : true,
overlay : true,
publicPath : "/",
watchContentBase: false
},
module: {
rules: [
{
test : /.(tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["> 0.5%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"react-hot-loader/babel"
]
}
}
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
}
module.exports = buildDevelopementConfig;
Webpack production configuration:
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HTMLMinifier = require("html-minifier");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
function buildProductionConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
output: {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "production",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
module: {
rules: [
{
test : /.(js|jsx|ts|tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["cover 99%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties"
]
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new UglifyJsPlugin({
parallel : true,
sourceMap : true,
cache : true,
include : dirname + "/src",
uglifyOptions: {
compress: true,
toplevel: true,
safari10: true,
output : {
comments: false
}
}
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.SourceMapDevToolPlugin({
filename : "sourcemaps/[name].js.map",
lineToLine: true
}),
new BundleAnalyzerPlugin({ analyzerMode: "static" }),
new CopyWebpackPlugin(
[
{
from: dirname + "/src/index.html",
to : dirname + "/dist",
transform(htmlAsBuffer) {
return Buffer.from(
HTMLMinifier.minify(
htmlAsBuffer.toString("utf8"),
{
collapseWhitespace : true,
collapseBooleanAttributes : true,
collapseInlineTagWhitespace: true
}
)
);
}
}
],
{}
)
],
performance: {
hints: "warning"
}
};
}
module.exports = buildProductionConfig;
reactjs typescript webpack configuration babel
edited Jan 1 at 11:30
Flimzy
39.3k106698
asked Jan 1 at 11:29
EthernalEthernal
161111
add a comment |
0
0
0
I am trying to make configure React with Typescript (only for for type checking), Babel for all code transpilation, Jest for testing, ESLint for code checking and other tools. Please check the repo link below with all the files.
I followed the Kent C. Dodds and following tutorial to add webpack with Typescript: https://blog.wax-o.com/2018/05/webpack-loaders-babel-sourcemaps-react-hot-module-reload-typescript-modules-code-splitting-and-lazy-loading-full-tutorial-to-transpile-and-bundle-your-code/
It seems to be possible to get all these tools working together as at some point build did work for TypeScript files, but dev server didn't and now neither works.
I would appreciate more experienced pair of eyes to take a look at the configuration as I am complete beginner at this.
Error message:
PS D:serverwwwapache24_29htdocsreact-boilerplate> npm run build
> react-boilerplate@1.0.0 build D:serverwwwapache24_29htdocsreact-boilerplate
> webpack --env.NODE_ENV=production
Start build for NODE_ENV: production
clean-webpack-plugin: D:serverwwwapache24_29htdocsreact-boilerplatewebpackConfigdist has been removed.
Hash: a14d15aa8f5505a1657a
Version: webpack 4.28.3
Time: 200ms
Built at: 2019-01-01 12:00:02
2 assets
Entrypoint main = index.js sourcemaps/main.js.map
[0] ./src/index.tsx 262 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.tsx 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.| import { HelloComponent } from "./hello";
|
> ReactDOM.render(<HelloComponent />, document.getElementById("root"));
|
Webpack Bundle Analyzer saved report to D:serverwwwapache24_29htdocsreact-boilerplatedistreport.html
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-boilerplate@1.0.0 build: `webpack --env.NODE_ENV=production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-boilerplate@1.0.0 build 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...AppDataRoamingnpm-cache_logs2019-01-01T11_00_03_174Z-debug.log
I created a repository with current version. It's all work in progress:
https://github.com/ethernal/react-boilerplate
I am posting configuration here as well.
package.json
{
"name" : "react-boilerplate",
"version" : "1.0.0",
"description": "React Boilerplate with Typescript, Babel, Jest, EsLint, Prettier, Styled Components, React Testig Library, Webpack, Webpack Dev Server",
"main" : "index.tsx",
"scripts" : {
"format" : "prettier "**/*.(js|ts|tsx|jsx)" --write",
"lint" : "eslint . --ext ".js,.ts,.tsx"",
"typecheck" : "tsc",
"test" : "jest --watch",
"cover" : "jest --coverage",
"start" : "babel-node --extensions '.ts,.tsx' index.ts",
"build" : "webpack --env.NODE_ENV=production",
"server-no-reaload": "webpack-dev-server --env.NODE_ENV=development",
"server" : "nodemon --watch webpack.config.ts -x webpack-dev-server -- --env.NODE_ENV=development"
},
"author" : "",
"license" : "ISC",
"dependencies": {
"@reach/router" : "^1.2.1",
"babel-plugin-styled-components": "^1.10.0",
"react" : "^16.7.0",
"react-dom" : "^16.7.0",
"styled-components" : "^4.1.3"
},
"devDependencies": {
"@babel/cli" : "^7.2.3",
"@babel/core" : "^7.2.2",
"@babel/parser" : "^7.2.3",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-syntax-dynamic-import" : "^7.2.0",
"@babel/preset-env" : "^7.2.3",
"@babel/preset-react" : "^7.0.0",
"@babel/preset-typescript" : "^7.1.0",
"@types/jest" : "^23.3.10",
"@types/node" : "^10.12.18",
"@types/react" : "^16.7.17",
"@types/react-dom" : "^16.0.11",
"@types/webpack" : "^4.4.22",
"babel-loader" : "^8.0.4",
"clean-webpack-plugin" : "^1.0.0",
"copy-webpack-plugin" : "^4.6.0",
"eslint" : "^5.10.0",
"eslint-plugin-typescript" : "^0.14.0",
"html-minifier" : "^3.5.21",
"jest" : "^23.6.0",
"jest-runner-eslint" : "^0.7.1",
"jest-runner-tsc" : "^1.3.2",
"nodemon" : "^1.18.9",
"pluggable-babel-eslint" : "^0.3.0",
"prettier" : "^1.15.3",
"react-hot-loader" : "^4.6.3",
"react-testing-library" : "^5.4.2",
"source-map-loader" : "^0.2.4",
"ts-loader" : "^5.3.2",
"ts-node" : "^7.0.1",
"typescript" : "^3.2.2",
"typescript-babel-jest" : "^1.0.5",
"typescript-eslint-parser" : "^21.0.2",
"uglifyjs-webpack-plugin" : "^2.1.1",
"webpack" : "^4.28.3",
"webpack-bundle-analyzer" : "^3.0.3",
"webpack-cli" : "^3.1.2",
"webpack-dev-server" : "^3.1.14"
},
"jest": {
"setupFiles": [
"./jest.config.js"
],
"moduleDirectories": [
"./node_modules",
"./src"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
],
"transform": {
"^.+\.(js|jsx|ts|tsx)$": "typescript-babel-jest"
}
},
"resolutions": {
"babel-core": "^7.0.0-bridge.0"
}
}
webpack main configuration:
const path = require('path');
const productionConfig = require('./webpackConfig/production');
const developmentConfig = require('./webpackConfig/development');
module.exports = env => {
if (env.NODE_ENV === 'production')
return productionConfig(env, path.resolve(__dirname));
if (env.NODE_ENV === 'development')
return developmentConfig(env, path.resolve(__dirname));
};
webpack development configuration:
const webpack = require("webpack");
function buildDevelopementConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
devtool: "cheap-module-eval-source-map",
output : {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "development",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
devServer: {
host : "0.0.0.0",
contentBase : dirname + "/src",
hotOnly : true,
overlay : true,
publicPath : "/",
watchContentBase: false
},
module: {
rules: [
{
test : /.(tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["> 0.5%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"react-hot-loader/babel"
]
}
}
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
}
module.exports = buildDevelopementConfig;
Webpack production configuration:
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HTMLMinifier = require("html-minifier");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
function buildProductionConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
output: {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "production",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
module: {
rules: [
{
test : /.(js|jsx|ts|tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["cover 99%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties"
]
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new UglifyJsPlugin({
parallel : true,
sourceMap : true,
cache : true,
include : dirname + "/src",
uglifyOptions: {
compress: true,
toplevel: true,
safari10: true,
output : {
comments: false
}
}
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.SourceMapDevToolPlugin({
filename : "sourcemaps/[name].js.map",
lineToLine: true
}),
new BundleAnalyzerPlugin({ analyzerMode: "static" }),
new CopyWebpackPlugin(
[
{
from: dirname + "/src/index.html",
to : dirname + "/dist",
transform(htmlAsBuffer) {
return Buffer.from(
HTMLMinifier.minify(
htmlAsBuffer.toString("utf8"),
{
collapseWhitespace : true,
collapseBooleanAttributes : true,
collapseInlineTagWhitespace: true
}
)
);
}
}
],
{}
)
],
performance: {
hints: "warning"
}
};
}
module.exports = buildProductionConfig;
reactjs typescript webpack configuration babel
edited Jan 1 at 11:30
Flimzy
39.3k106698
asked Jan 1 at 11:29
EthernalEthernal
161111
I am trying to make configure React with Typescript (only for for type checking), Babel for all code transpilation, Jest for testing, ESLint for code checking and other tools. Please check the repo link below with all the files.
I followed the Kent C. Dodds and following tutorial to add webpack with Typescript: https://blog.wax-o.com/2018/05/webpack-loaders-babel-sourcemaps-react-hot-module-reload-typescript-modules-code-splitting-and-lazy-loading-full-tutorial-to-transpile-and-bundle-your-code/
It seems to be possible to get all these tools working together as at some point build did work for TypeScript files, but dev server didn't and now neither works.
I would appreciate more experienced pair of eyes to take a look at the configuration as I am complete beginner at this.
Error message:
PS D:serverwwwapache24_29htdocsreact-boilerplate> npm run build
> react-boilerplate@1.0.0 build D:serverwwwapache24_29htdocsreact-boilerplate
> webpack --env.NODE_ENV=production
Start build for NODE_ENV: production
clean-webpack-plugin: D:serverwwwapache24_29htdocsreact-boilerplatewebpackConfigdist has been removed.
Hash: a14d15aa8f5505a1657a
Version: webpack 4.28.3
Time: 200ms
Built at: 2019-01-01 12:00:02
2 assets
Entrypoint main = index.js sourcemaps/main.js.map
[0] ./src/index.tsx 262 bytes {0} [built] [failed] [1 error]
ERROR in ./src/index.tsx 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.| import { HelloComponent } from "./hello";
|
> ReactDOM.render(<HelloComponent />, document.getElementById("root"));
|
Webpack Bundle Analyzer saved report to D:serverwwwapache24_29htdocsreact-boilerplatedistreport.html
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! react-boilerplate@1.0.0 build: `webpack --env.NODE_ENV=production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the react-boilerplate@1.0.0 build 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...AppDataRoamingnpm-cache_logs2019-01-01T11_00_03_174Z-debug.log
I created a repository with current version. It's all work in progress:
https://github.com/ethernal/react-boilerplate
I am posting configuration here as well.
package.json
{
"name" : "react-boilerplate",
"version" : "1.0.0",
"description": "React Boilerplate with Typescript, Babel, Jest, EsLint, Prettier, Styled Components, React Testig Library, Webpack, Webpack Dev Server",
"main" : "index.tsx",
"scripts" : {
"format" : "prettier "**/*.(js|ts|tsx|jsx)" --write",
"lint" : "eslint . --ext ".js,.ts,.tsx"",
"typecheck" : "tsc",
"test" : "jest --watch",
"cover" : "jest --coverage",
"start" : "babel-node --extensions '.ts,.tsx' index.ts",
"build" : "webpack --env.NODE_ENV=production",
"server-no-reaload": "webpack-dev-server --env.NODE_ENV=development",
"server" : "nodemon --watch webpack.config.ts -x webpack-dev-server -- --env.NODE_ENV=development"
},
"author" : "",
"license" : "ISC",
"dependencies": {
"@reach/router" : "^1.2.1",
"babel-plugin-styled-components": "^1.10.0",
"react" : "^16.7.0",
"react-dom" : "^16.7.0",
"styled-components" : "^4.1.3"
},
"devDependencies": {
"@babel/cli" : "^7.2.3",
"@babel/core" : "^7.2.2",
"@babel/parser" : "^7.2.3",
"@babel/plugin-proposal-class-properties": "^7.2.3",
"@babel/plugin-syntax-dynamic-import" : "^7.2.0",
"@babel/preset-env" : "^7.2.3",
"@babel/preset-react" : "^7.0.0",
"@babel/preset-typescript" : "^7.1.0",
"@types/jest" : "^23.3.10",
"@types/node" : "^10.12.18",
"@types/react" : "^16.7.17",
"@types/react-dom" : "^16.0.11",
"@types/webpack" : "^4.4.22",
"babel-loader" : "^8.0.4",
"clean-webpack-plugin" : "^1.0.0",
"copy-webpack-plugin" : "^4.6.0",
"eslint" : "^5.10.0",
"eslint-plugin-typescript" : "^0.14.0",
"html-minifier" : "^3.5.21",
"jest" : "^23.6.0",
"jest-runner-eslint" : "^0.7.1",
"jest-runner-tsc" : "^1.3.2",
"nodemon" : "^1.18.9",
"pluggable-babel-eslint" : "^0.3.0",
"prettier" : "^1.15.3",
"react-hot-loader" : "^4.6.3",
"react-testing-library" : "^5.4.2",
"source-map-loader" : "^0.2.4",
"ts-loader" : "^5.3.2",
"ts-node" : "^7.0.1",
"typescript" : "^3.2.2",
"typescript-babel-jest" : "^1.0.5",
"typescript-eslint-parser" : "^21.0.2",
"uglifyjs-webpack-plugin" : "^2.1.1",
"webpack" : "^4.28.3",
"webpack-bundle-analyzer" : "^3.0.3",
"webpack-cli" : "^3.1.2",
"webpack-dev-server" : "^3.1.14"
},
"jest": {
"setupFiles": [
"./jest.config.js"
],
"moduleDirectories": [
"./node_modules",
"./src"
],
"moduleFileExtensions": [
"ts",
"tsx",
"js",
"jsx"
],
"transform": {
"^.+\.(js|jsx|ts|tsx)$": "typescript-babel-jest"
}
},
"resolutions": {
"babel-core": "^7.0.0-bridge.0"
}
}
webpack main configuration:
const path = require('path');
const productionConfig = require('./webpackConfig/production');
const developmentConfig = require('./webpackConfig/development');
module.exports = env => {
if (env.NODE_ENV === 'production')
return productionConfig(env, path.resolve(__dirname));
if (env.NODE_ENV === 'development')
return developmentConfig(env, path.resolve(__dirname));
};
webpack development configuration:
const webpack = require("webpack");
function buildDevelopementConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
devtool: "cheap-module-eval-source-map",
output : {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "development",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
devServer: {
host : "0.0.0.0",
contentBase : dirname + "/src",
hotOnly : true,
overlay : true,
publicPath : "/",
watchContentBase: false
},
module: {
rules: [
{
test : /.(tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["> 0.5%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties",
"react-hot-loader/babel"
]
}
}
}
]
},
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.HotModuleReplacementPlugin()
]
};
}
module.exports = buildDevelopementConfig;
Webpack production configuration:
const webpack = require("webpack");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HTMLMinifier = require("html-minifier");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
function buildProductionConfig(env, dirname) {
//eslint-disable-next-line no-console
console.log("Start build for NODE_ENV: ", env.NODE_ENV);
return {
entry : dirname + "/src/index.tsx",
output: {
path : dirname + "/dist",
filename : "index.js",
publicPath : "/",
sourceMapFilename: "bundle.map"
},
mode : "production",
resolve: {
extensions: [".js", ".json", ".ts", ".jsx", ".tsx"],
alias : {
UIComponents: dirname + "/src/components",
UIAssets : dirname + "/src/assets"
}
},
module: {
rules: [
{
test : /.(js|jsx|ts|tsx?)$/i,
include: dirname + "/src",
use : {
loader : "babel-loader",
options: {
presets: [
[
"@babel/preset-env",
{
modules: false,
debug : true,
target : {
browsers: ["cover 99%"]
}
}
],
"@babel/preset-react",
"@babel/typescript"
],
plugins: [
"babel-plugin-styled-components",
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-class-properties"
]
}
}
}
]
},
plugins: [
new CleanWebpackPlugin(["dist"]),
new UglifyJsPlugin({
parallel : true,
sourceMap : true,
cache : true,
include : dirname + "/src",
uglifyOptions: {
compress: true,
toplevel: true,
safari10: true,
output : {
comments: false
}
}
}),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.SourceMapDevToolPlugin({
filename : "sourcemaps/[name].js.map",
lineToLine: true
}),
new BundleAnalyzerPlugin({ analyzerMode: "static" }),
new CopyWebpackPlugin(
[
{
from: dirname + "/src/index.html",
to : dirname + "/dist",
transform(htmlAsBuffer) {
return Buffer.from(
HTMLMinifier.minify(
htmlAsBuffer.toString("utf8"),
{
collapseWhitespace : true,
collapseBooleanAttributes : true,
collapseInlineTagWhitespace: true
}
)
);
}
}
],
{}
)
],
performance: {
hints: "warning"
}
};
}
module.exports = buildProductionConfig;
reactjs typescript webpack configuration babel
reactjs typescript webpack configuration babel
edited Jan 1 at 11:30
Flimzy
39.3k106698
asked Jan 1 at 11:29
EthernalEthernal
161111
edited Jan 1 at 11:30
Flimzy
39.3k106698
asked Jan 1 at 11:29
EthernalEthernal
161111
edited Jan 1 at 11:30
Flimzy
39.3k106698
edited Jan 1 at 11:30
Flimzy
39.3k106698
edited Jan 1 at 11:30
Flimzy
39.3k106698
39.3k106698
asked Jan 1 at 11:29
EthernalEthernal
161111
asked Jan 1 at 11:29
EthernalEthernal
161111
asked Jan 1 at 11:29
EthernalEthernal
161111
161111
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
0
It seems I did not post a link to the repo (or it was removed), but I managed to clear all the pain points today. If you want to see a working example it is located here: https://github.com/ethernal/react-boilerplate
My initial problem was that I tried to transpile TS/JS files twice.
PS. I would be grateful for comments about the configuration and how to improve it if anyone is interested.
answered Jan 3 at 21:58
EthernalEthernal
161111
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995064%2fmodule-parse-failed-unexpected-token-on-react-component-render%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
It seems I did not post a link to the repo (or it was removed), but I managed to clear all the pain points today. If you want to see a working example it is located here: https://github.com/ethernal/react-boilerplate
My initial problem was that I tried to transpile TS/JS files twice.
PS. I would be grateful for comments about the configuration and how to improve it if anyone is interested.
answered Jan 3 at 21:58
EthernalEthernal
161111
add a comment |
0
It seems I did not post a link to the repo (or it was removed), but I managed to clear all the pain points today. If you want to see a working example it is located here: https://github.com/ethernal/react-boilerplate
My initial problem was that I tried to transpile TS/JS files twice.
PS. I would be grateful for comments about the configuration and how to improve it if anyone is interested.
answered Jan 3 at 21:58
EthernalEthernal
161111
add a comment |
0
0
0
It seems I did not post a link to the repo (or it was removed), but I managed to clear all the pain points today. If you want to see a working example it is located here: https://github.com/ethernal/react-boilerplate
My initial problem was that I tried to transpile TS/JS files twice.
PS. I would be grateful for comments about the configuration and how to improve it if anyone is interested.
answered Jan 3 at 21:58
EthernalEthernal
161111
It seems I did not post a link to the repo (or it was removed), but I managed to clear all the pain points today. If you want to see a working example it is located here: https://github.com/ethernal/react-boilerplate
My initial problem was that I tried to transpile TS/JS files twice.
PS. I would be grateful for comments about the configuration and how to improve it if anyone is interested.
answered Jan 3 at 21:58
EthernalEthernal
161111
answered Jan 3 at 21:58
EthernalEthernal
161111
answered Jan 3 at 21:58
EthernalEthernal
161111
answered Jan 3 at 21:58
EthernalEthernal
161111
161111
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53995064%2fmodule-parse-failed-unexpected-token-on-react-component-render%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
