Is there anyway to use this without using 'create-react-app'

[tomzaku]

I read this: https://github.com/smooth-code/error-overlay-webpack-plugin#usage but it's not working.

Dependences

typescript: 3.1.2,
ts-loader: 5.3.3,
webpack: v4,
react: v16.8,

[gregberge]

Hello @tomzaku, could you please provide a repro example? Thanks.

[tomzaku]

@neoziro thanks for your response. I created the repo at this
In the file src/index.tsx has error at line 6. It throw error at terminal/ console. But it's not working with browser

[gregberge]

The error seems to be a TypeScript error, I don't know how it works with TypeScript but it is not officially supported. You are on your own..

[English3000]

I also tried using this on my own with TypeScript. I'm getting an error message, but for the same syntax error (a missing > on the first tag) the message is different (and much less helpful) than for create-react-app

my project:

CRA:

I'm guessing this has to do with something in CRA's webpack.config.js

And here's mine (using Webpack 4):

const path                    = require('path'),
      glob                    = require('glob'),
      UglifyJsPlugin          = require('uglifyjs-webpack-plugin'),
      OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin'),
      MiniCssExtractPlugin    = require('mini-css-extract-plugin'),
      CopyWebpackPlugin       = require('copy-webpack-plugin'),
      { CheckerPlugin }       = require('awesome-typescript-loader'),
      ErrorOverlayPlugin      = require('error-overlay-webpack-plugin')

module.exports = (env, options) => ({
  devtool: 'source-map',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: false }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  entry: {
    // './js/app.tsx': ['./js/app.tsx'].concat(glob.sync('./vendor/**/*.js'))
    './js/app.js': ['./js/app.js'].concat(glob.sync('./vendor/**/*.js'))
  },
  output: {
    filename: 'app.js',
    path: path.resolve(__dirname, '../priv/static/js')
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'awesome-typescript-loader' },
      { test: /\.jsx?$/, exclude: /node_modules/, enforce: 'pre', loader: 'source-map-loader' },
      { test: /\.jsx?$/, exclude: /node_modules/, use: {loader: 'babel-loader'} },
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/app.css' }),
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new CheckerPlugin(),
    new ErrorOverlayPlugin(),
  ],
  resolve: {
    alias: {
      'react-native$': 'react-native-web',
      'react-native-svg': 'svgs'
    },
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  }
});

[English3000]

NVM, getting it like CRA now.

[Herz3h]

Is this a CRA specific plugin ? Doesn't seem to work with webpack 4 + vuejs 2