search

davidhu2000 / react-spinners

A collection of loading spinner components for react
https://www.davidhu.io/react-spinners
MIT License
3.03k stars 263 forks source link

[Question] How to use react-spinners/BarLoader as externals in webpack? #430

Closed gabrielbahniuk closed 2 years ago

gabrielbahniuk commented 3 years ago

Hi,

I am trying to use react-spinners version 0.11.0 with React and for the Prod html template I load it:

  <body>
    <div id="root"></div>
    [... other libs here]
    <script crossorigin src="https://unpkg.com/react-spinners@0.11.0/index.js"></script>
  </body>

Then in my webpack.prod.js I have:

  externals: {
  [... other libs here...]
    'react-spinners': 'BarLoader'
  }

I import it like this in my code:

import { BarLoader } from 'react-spinners'

However I get the following errors:

index.js:formatted:8 Uncaught ReferenceError: exports is not defined
    at index.js:formatted:8
(anonymous) @ index.js:formatted:8
bundle.js:146 Uncaught ReferenceError: BarLoader is not defined
    at bundle.js:146
    at bundle.js:216
    at bundle.js:216

Is there a working version in a CDN? I could not find a /dist folder.

If not, would that be possible to create it?

Thank you.

AwolDes commented 3 years ago

I'm also getting this error. When compiling with webpack it's working fine, but as soon as I try and load a spinner I get this error

Failed to compile.

./src/node_modules/react-spinners/BarLoader.js
SyntaxError: /app/src/node_modules/react-spinners/BarLoader.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | "use strict";
    | ^
  2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
  3 |     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
  4 |     return cooked;

It might be linked to https://github.com/emotion-js/emotion/issues/2041?

davidhu2000 commented 3 years ago

this isn't something i've tested. but i found this comment in another repo. https://github.com/system-ui/theme-ui/issues/1160#issuecomment-683830024

does that solve your issue?

gabrielbahniuk commented 3 years ago

I'm also getting this error. When compiling with webpack it's working fine, but as soon as I try and load a spinner I get this error

Failed to compile.

./src/node_modules/react-spinners/BarLoader.js
SyntaxError: /app/src/node_modules/react-spinners/BarLoader.js: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | "use strict";
    | ^
  2 | var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
  3 |     if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
  4 |     return cooked;

It might be linked to emotion-js/emotion#2041?

Hi @AwolDes, I think we have different problems.

Mine is regarding using the BarLoader as externals in webpack and adding it into an template.prod.html file. This gives me a different error output from yours.

Are you sure they are related somehow?

davidhu2000 commented 2 years ago

@gabrielbahniuk i published a new alpha version. try using externals with this url?

https://unpkg.com/browse/react-spinners@0.12.0-alpha.1/umd/index.js
davidhu2000 commented 2 years ago
Screen Shot 2021-09-25 at 10 57 13 AM

seems like we get a different error now.

davidhu2000 commented 2 years ago

so based on what i've worked through, while this is techincally possible, I personally would not recommend doing this. The main issue being: the loaders in this require react to run, so i'd have to bundle react as well.

I pushed a code change to fix tree shaking

https://bundlephobia.com/package/react-spinners@0.12.0-alpha.1

so your final bundle will only include the loader you imported. (each loader around 8kb)

davidhu2000 commented 2 years ago

closing this issue for now. feel free to reopen if there are any follow ups