Giter Club home page Giter Club logo

Comments (6)

gregberge avatar gregberge commented on May 23, 2024 2

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..

from error-overlay-webpack-plugin.

gregberge avatar gregberge commented on May 23, 2024

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

from error-overlay-webpack-plugin.

tomzaku avatar tomzaku commented on May 23, 2024

@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

from error-overlay-webpack-plugin.

English3000 avatar English3000 commented on May 23, 2024

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:
image

CRA:
image

image

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

from error-overlay-webpack-plugin.

English3000 avatar English3000 commented on May 23, 2024

NVM, getting it like CRA now.

from error-overlay-webpack-plugin.

Herz3h avatar Herz3h commented on May 23, 2024

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

from error-overlay-webpack-plugin.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.