fgnass / spin.js

A spinning activity indicator
http://spin.js.org
MIT License
9.3k stars 1.02k forks source link

Unexpected export #356

Closed holgersielaff closed 3 years ago

holgersielaff commented 6 years ago

'Unexpected export' error at line 114 (npm 5.6.0)

Maybe export Spinner directly with 'export const'

theodorejb commented 6 years ago

What's giving you that error? Are you trying to load the file in a browser that doesn't support ES6 modules? You'll need to use a module bundler such as Webpack or Rollup for this to work.

vikyd commented 6 years ago

But how can I use spin.js V3 without Webpack or Rollup?

thehig commented 6 years ago

I'm having this same issue, (unexpected token export) although not with webpack which is working fine, but within my jest tests (scaffolded through create-react-app)

image

Sample repo that demonstrates the problem: https://github.com/thehig/spinjs-unexpectedtokenimport

Edit: My guess is something's not being babelified

Edit: The 'jest' way to get the tooling to process modules is to use transformIgnorePatterns as outlined below, however this doesn't work in Create-React-App (https://github.com/facebook/create-react-app/issues/2537) without ejecting. (Obviously not your problem, but a pain in the ass nonetheless)

package.json

{
  ....
  "jest": {
    "transformIgnorePatterns": ["/node_modules/(?!(spin.js\\.js$))"]
  }
}
tolu commented 6 years ago

I'm having the same issue in my tests, using mocha with typescript (actually ts-node). The same issue will continue to be around (in node and ts-node) since even experimental module support requires the use of *.mjs file extensions at this time.

After some time spent reading up on the issue and the solutions it seems to me that it is premature to publish esnext/mjs/esm only...

This is from Rollup's readme image

That (adding a module-field to package.json) seems like a solution that would work for the issues reported here as well as the original case #341.

I'll try to get a PR going along those lines in the weekend.

theodorejb commented 6 years ago

@tolu More and more libraries are moving to ES6, though, and at some point your tests will have to work with these files. The way I currently work around the lack of Node/IE support is to use ES6 imports in my tests, and then create a test bundle file with Rollup before running it with Mocha.

thehig commented 6 years ago

This seems like an effective strategy to alienate users

tolu commented 6 years ago

@theodorejb one important fact here is that when ES6 modules can be understood by Node without the --experimental-modules flag, even the solution implemented here in spin.js wont work as the files referenced are not postfixed with *.mjs.

A relatively simple solution seems to be to publish something that everyone can consume, and that includes everyone who has opted in for ES6.

But if you are not interested in a PR, I wont bother and keep using v2.3.2 that "just works" 😉

Comprehensive article on the subject: https://medium.com/@kelin2025/so-you-wanna-use-es6-modules-714f48b3a953

adonespitogo commented 6 years ago

A browser-only library that needs nodejs package mechanism to in order to work. Great.

tolu commented 6 years ago

An updated recommendation now that modules are supported in all major browsers:

From: https://developers.google.com/web/fundamentals/primers/modules

A note on file extensions You may have noticed we’re using the .mjs file extension for modules. On the Web, the file extension doesn’t really matter, as long as the file is served with the JavaScript MIME type text/javascript. The browser knows it’s a module because of the type attribute on the script element.

Still, we recommend using the .mjs extension for modules, for two reasons:

  1. During development, it makes it crystal clear that the file is a module as opposed to a regular script. (It’s not always possible to tell just by looking at the code.) As mentioned before, modules are treated differently than regular scripts, so the difference is hugely important!
  2. It’s consistent with Node.js, where the experimental modules implementation only supports files with the .mjs extension.
ghost commented 5 years ago

https://github.com/fgnass/spin.js/issues/364#issuecomment-430523732

kgeographer commented 5 years ago

I am trying to use this in a Django app, with no ES6 or webpack. I cannot simply load spin.js the same way I load a dozen other packages, as the export command is invalid. The website statement "No dependencies" is not true, and IMHO should be changed to reflect that.

theodorejb commented 5 years ago

@kgeographer Did you read the website instructions? The Bundling paragraph says the following:

If for some reason you can't use ES6 modules or a module bundler, download spin.umd.js and save it in your repo.

kgeographer commented 5 years ago

I am ashamed to say I did not. For ES5, I needed the full reference var spinner = new Spin.Spinner().spin(); to get started, but otherwise good to go. Sorry for the bother.