UglifyJS fails to process tmi.js in my React/Webpack project

[marcandrews]

Actual behaviour:
When using tmi.js as a dependency in my React/Webpack/UglifyJS project, UglifyJS fails to process tmi.js.

Expected behaviour:
UglifyJS processes tmi.js without error.

Error log:

Unexpected character '`'

... referring to the back-ticks in lib/*.js. It seems like tmi.js is not being compiled down to ES5.

Server configuration

• Operating system: Windows 10
• Node version (if applicable): 6/8
• NPM version (if applicable): 3/5
• tmi.js version: 1.2.1

Workaround

1. Manually build tmi.js and import tmi.min.js into your project:

   import 'tmi.min.js'; // works; tmi is part of the global scope (not ideal)
   import tmi from 'tmi.min.js' // does NOT work; tmi is undefined

2. Instruct Webpack to compile tmi.js when building by adding the following to your Webpack config's module.loaders array:

   {
     // Compile  delinquent modules
     test: /\.js$/,
     loader: 'babel-loader',
     include: [
       // tmi.js
       path.dirname(require.resolve('tmi.js')),
     ],
     query: {
       babelrc: false,
       presets: ['es2015'],
     },
   }

[marcandrews]

I'll make a PR to fix the packaging

[marcandrews]

Actually, this has been suggested in #237; however, I will still make another PR with a significantly smaller diff.

[marcandrews]

Added an additional workaround to the OP

[ahadcove]

Is there any workaround now for an unejected Create-React-App?

Receiving the same error:

Failed to compile.

static/js/main.b7a7b488.js from UglifyJs
Invalid assignment [./~/tmi.js/lib/utils.js:3,0][static/js/main.b7a7b488.js:11453,19]

[marcandrews]

@ahadcove

import 'tmi.min.js';

[ahadcove]

Uncaught Error: Cannot find module "tmi.min.js"

[ahadcove]

This is how I am currently implementing it that's giving me problems.

var tmi = require('tmi.js');
 client = new tmi.client(tmiOptions)

I tried your way and ran into two problems

Uncaught Error: Cannot find module "tmi.min.js"
and
now I can't reference new tmi()

[AlcaDesign]

@ahadcove Download the latest minified version of tmi.js and put it wherever scripts go.

[ahadcove]

Okay, @AlcaDesign I did that and now receiving problems just with react. Could you show me an example of how you imported the minified version?

  Line 1:  Unexpected use of 'self'  no-restricted-globals
  Line 1:  Unexpected use of 'self'  no-restricted-globals
  Line 2:  'chrome' is not defined   no-undef
  Line 2:  'chrome' is not defined   no-undef

[marcandrews]

@ahadcove, these are create-react-app linting rules that are failing. You may wish to file an issue with them for further support.

[ahadcove]

I've been reading around and testing all day to no avail. @marcandrews does your branch handle this for the tmi.js being able to compile to react with no problem?
and how come they haven't merged the PR yet? seems like a pretty big deal

[ahadcove]

Nvm, I seen the PR you had and just installed that instead.
Works perfectly, thanks for your help
I hope this get's merged soon

npm i -S marcandrews/tmi.js#bugfix/packaging

[marcandrews]

@ahadcove oh wow, that's awesome! I thought there was a bug with npm not building modules installed from GitHub, but I guess not. Glad to hear it worked out for you.

[ahadcove]

Yeah, thankfully everything is working perfectly now :)