React external script method is not defined

Question

I need to import BlotterJS on my React projet so I set it in my index.html file as :

<script crossorigin src="https://rawgit.com/bradley/Blotter/master/build/blotter.min.js"></script>

I'm using it on my component: in componentWillMount I generate the Blotter text with my method generateText but it needs to create a new Blotter instance. Here is the component:

export class Home extends React.Component {
  constructor() {
    super()
  }
  componentWillMount() {
    this.text = this.generateText()
  }
  render() {
    return (
      <div className="container">
        <div id="welcome"></div>
        <nav>
          <div className={styles.double_buttons}>
            <Link to="/about" className={`button ${styles.button_small}`}>About me</Link>
            <Link to="/work" className="button button_small">Work</Link>
          </div>
          <Link to="/contact" className="button button_large">Contact</Link>
        </nav>
      </div>
    )
  }
  generateText () {
    return new Blotter.Text("WELCOME.", {
      family : "'EB Garamond', serif",
      size : 50,
      fill : "#202020"
    })
  }
  // Things here to generate the material and create the scope, but same issue, I can't do this because it needs Blotter too
}

I'm getting the following error: I just want to be able to use the Blotter type. I don't know if I'm importing BlotterJS correctly.

Maybe don't fail your build on lint errors? That would let you experiment at least. — Aluan Haddad
– Aluan Haddad, Commented Mar 29, 2018 at 13:05
Without the linter it doesn't compile anymore, and I'm using Webpack — Bastien Robert
– Bastien Robert, Commented Mar 29, 2018 at 13:25

JCQuintas · Accepted Answer · 2018-03-29 13:33:33Z

4

Try using window.Blotter instead of Blotter.

It seems your compiler isn't finding the variable definition and throwing an error, but your logic seems fine so I would guess this will fix it.

answered Mar 29, 2018 at 13:33

JCQuintas

1,1681 gold badge8 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bipul · Accepted Answer · 2018-03-29 13:39:20Z

-1

If you are using webpack then you need to configure Blotter as an external library. Refer webpack documentation: https://webpack.js.org/configuration/externals/

Essentially, you can add following to your webpack.config.js

externals: {
    Blotter: 'Blotter'
}

After that you can use it as any other library:

import Blotter from 'Blotter';

answered Mar 29, 2018 at 13:39

Bipul

1,6161 gold badge16 silver badges16 bronze badges

2 Comments

Bastien Robert Over a year ago

Yes but you'll think it going to work even if Blotter is not an NPM package ?

Bipul Over a year ago

That's exactly what externals are for. Created bundle relies on dependency to be present in the consumer's environment. Here <script/> tag will make it available for created bundle. I have used externals for google apis.

Collectives™ on Stack Overflow

React external script method is not defined

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related