Issue in combination with Storybook and Cypress

[silversonicaxel]

Hello, I'm using this library in a Storybook project. The library is imported as described in the README and it works as expected.

At the same time, there are Cypress tests running against the Storybook website. Since the storybook-multilevel-sort library is used Cypress tests are failing.

Cypress dashboard opens regularly, once a test is selected to be run, effect is that No tests found. Cypress could not detect tests in this file. and the output in the Cypress window is the following

SyntaxError: 'import' and 'export' may appear only with 'sourceType: module'
    at EventEmitter.handler (/Users/xxxxxxxxx/Library/Caches/Cypress/9.5.3/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:69:27)
    at EventEmitter.emit (node:events:394:28)
    at ChildProcess.<anonymous> (/Users/xxxxxxxxx/Library/Caches/Cypress/9.5.3/Cypress.app/Contents/Resources/app/packages/server/lib/plugins/util.js:19:22)
    at ChildProcess.emit (node:events:394:28)
    at emit (node:internal/child_process:920:12)
    at processTicksAndRejections (node:internal/process/task_queues:84:21)

I was thinking to use babel in cypress plugin configuration, but this makes no sense since the code with the import lives in Storybook files and not in Cypress files or tests files. It is not super clear what to try to babelify in the process, since Cypress tests are independent by Storybook, or maybe I'm not seeing something obvious?

Thanks for the support

[prantlf]

It appears that Cypress doesn't play with ESM well (!16467). There are some workarounds described there, but fur such a simple package as this one it is no problem to expose a CJS module. I published 1.1.0 with this feature. You should be able to import it using the CJS syntax too:

const sort = require('storybook-multilevel-sort')

Requesting the exports by the name of the NPM module ('storybook-multilevel-sort') will choose automatically between 'storybook-multilevel-sort/lib/index.js' (ESM) and 'storybook-multilevel-sort/lib/index.cjs' (CJS).

Does it work in your project?

[silversonicaxel]

Not yet, this is the error message at the moment

    Error sorting stories with sort parameter function storySort(story1, story2) {
      return sort((0,_utils__WEBPACK_IMPORTED_MODULE_10__.getSortedMenuItems)(), story1, story2);
    }:

> sort is not a function

Are you using a V7-style sort function in V6 compatibility mode?

More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#v7-style-story-sort

[prantlf]

What is the value of sort in your script? Could you print it using console.log, please?

I tried it in both CJS and ESM modules and it is always a function.

❯ mkdir module-test
❯ cd module-test
❯ echo '{ "private": "boolean", "dependencies": { "storybook-multilevel-sort": "*" } }' > package.json
❯ npm i

added 1 package in 1s
❯ node -pe 'require("storybook-multilevel-sort")'
[Function: index]
❯ node --input-type=module -e 'import sort from "storybook-multilevel-sort"; console.log(sort)'
[Function: index]

❯ rm -r node_modules package-lock.json
❯ echo '{ "private": "boolean", "type": "module", "dependencies": { "storybook-multilevel-sort": "*" } }' > package.json
❯ npm i

added 1 package in 775ms
❯ node -pe 'require("storybook-multilevel-sort")'
[Function: index]
❯ node --input-type=module -e 'import sort from "storybook-multilevel-sort"; console.log(sort)'
[Function: index]

[silversonicaxel]

So, I console logged on the browser the same file content, meaning the sort const, twice.

Via node_modules This is the one imported directly from node modules with this command const sort = require('storybook-multilevel-sort')

Module {__esModule: true, Symbol(Symbol.toStringTag): 'Module', default: ƒ}
default: (order, story1, story2) => {…}
length: 3
name: ""
arguments: (...)
caller: (...)
[[FunctionLocation]]: index.jss:60
[[Prototype]]: ƒ ()
[[Scopes]]: Scopes[2]
__esModule: true
Symbol(Symbol.toStringTag): "Module"
[[Prototype]]: Object

and this approach does not work, and it gives the error I posted above

Via script in the project folder And this is the file imported from the same folder preview.js is, it is basically the exact code of index.cjs copied in a file called _sort.js and imported like this const sort = require('./_sort.js')

ƒ index(order, _ref, _ref2) {
  var _ref3 = _slicedToArray(_ref, 2),
      story1 = _ref3[1];

  var _ref4 = _slicedToArray(_ref2, 2),
      story2 = _ref4[1];

  var story1Path = [].concat(_toConsumab…

and this approach works

[prantlf]

I added one more way to declare CJS/ESM exports in package.json in 1.1.2:

"exports": {
  "require": "./lib/index.cjs",
  "import": "./lib/index.js"
},

It might help, but I'm not sure.

Alternatively, you could try addressing the exported files directly instead of just by the package name, for example, CJS:

const sort = require('storybook-multilevel-sort/lib/index.cjs')

and ESM:

import sort from 'storybook-multilevel-sort/lib/index.js'

[silversonicaxel]

with the version ^1.1.0 it was already working! I will close the issue then, thanks anyway for the answer