SyntaxError: Cannot use import statement outside a module

[dallinbjohnson]

Steps to reproduce

Install into feathers v4 app using js.

server/node_modules/feathers-authentication-management/dist/index.js:1
import setup from './setupAuthManagement';
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at Object.compileFunction (node:vm:352:18)
    at wrapSafe (node:internal/modules/cjs/loader:1027:15)
    at Module._compile (node:internal/modules/cjs/loader:1063:27)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
    at Module.load (node:internal/modules/cjs/loader:975:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:999:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Module._compile (node:internal/modules/cjs/loader:1099:14)

Node.js v17.9.1

• [ ] Tell us what broke. The more detailed the better.
• [ ] Include the feathers-gen-specs.json file from your app.
• [ ] Include the src/services/[serviceName]/[serviceName].schema.?s files if the issue involves the fields in one or more services.

These last 2 items usually allow us to regen enough of your app to recreate the issue. We may otherwise ask you to provide a minimal GitHub repo or gist isolating the issue.

Expected behavior

Tell us what should happen

Actual behavior

Tell us what happens instead

System configuration

Tell us about the applicable parts of your setup.

Module versions (especially the part that's not working):

NodeJS version:

Operating System:

Browser Version:

React Native Version:

Module Loader:

[claustres]

What module version are you using v3 or v4 ? Usually this error is linked to the fact you are trying to import an ES module into a CommonJS module. You might have to set the type property to module in your package.json file if you are working with ES modules. Maybe it is related to typescript so that the code is not correctly transpiled. However I will not be able to help on that, @fratzinger might help ?

[fratzinger]

I'll publish a commonJS version of the package 👍

[claustres]

As far as I can see @fratzinger I have feathers-authentication-management v4 installed in my project and in the dist folder it seems js files are correctly transpiled, no import but require instead.

[sedouard]

I ran into the same error today using ts-jest:

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/steven/Documents/github/b2b-backend/node_modules/feathers-authentication-management/src/index.ts:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import setup from './setupAuthManagement';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import {
        | ^
      2 |   AuthenticationManagementService
      3 | } from 'feathers-authentication-management';
      4 |

      at Runtime.createScriptFromCode (../../../.nvm/versions/node/v16.17.0/lib/node_modules/jest/node_modules/jest-runtime/build/index.js:1678:14)
      at Object.<anonymous> (src/services/auth-management/auth-management.class.ts:1:1)
      at Object.<anonymous> (src/services/auth-management/auth-management.service.ts:4:1)
      at Object.<anonymous> (src/services/index.ts:4:1)
      at Object.<anonymous> (src/app.ts:16:1)
      at Object.<anonymous> (test/services/users.test.ts:1:1)

But I'm really not sure why I'm having this issue as other feathers packages writtenin TS import just fine.

[claustres]

@sedouard What is strange is that your error is referencing the src folder instead of the dist folder.

[sedouard]

Oh sorry! I did forget I messed with the feathers-authentication-management package.json file's main key. The error is the same though but instead points to dist/index.js:

    Jest encountered an unexpected token

    Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.

    Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.

    By default "node_modules" folder is ignored by transformers.

    Here's what you can do:
     • If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
     • If you are trying to use TypeScript, see https://jestjs.io/docs/getting-started#using-typescript
     • To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
     • If you need a custom transformation specify a "transform" option in your config.
     • If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.

    You'll find more details and examples of these config options in the docs:
    https://jestjs.io/docs/configuration
    For information about custom transformations, see:
    https://jestjs.io/docs/code-transformation

    Details:

    /Users/steven/Documents/github/b2b-backend/node_modules/feathers-authentication-management/dist/index.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,jest){import setup from './setupAuthManagement';
                                                                                      ^^^^^^

    SyntaxError: Cannot use import statement outside a module

    > 1 | import {
        | ^
      2 |   AuthenticationManagementService
      3 | } from 'feathers-authentication-management';
      4 |

      at Runtime.createScriptFromCode (../../../.nvm/versions/node/v16.17.0/lib/node_modules/jest/node_modules/jest-runtime/build/index.js:1678:14)
      at Object.<anonymous> (src/services/auth-management/auth-management.class.ts:1:1)
      at Object.<anonymous> (src/services/auth-management/auth-management.service.ts:4:1)
      at Object.<anonymous> (src/services/index.ts:4:1)
      at Object.<anonymous> (src/app.ts:16:1)
      at Object.<anonymous> (test/services/users.test.ts:1:1)

[sedouard]

I think it is because my tsconfig is expecting commonjs modules?:

{
  "compilerOptions": {
    "target": "es2018",
    "module": "commonjs",
    "outDir": "./out",
    "rootDir": "./src",
    "strict": true,
    "sourceMap": true,
    "esModuleInterop": true
  },
  "exclude": [
    "test"
  ]
}

So I think when @fratzinger publishes a commonjs module version it should just work 🤞

[sedouard]

I confirmed when I make the change in this project's .tsconfig file:

steven@Stevens-MacBook-Pro feathers-authentication-management % git diff tsconfig.json 
diff --git a/tsconfig.json b/tsconfig.json
index f17e16f..b0bc86a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,7 @@
     "outDir": "dist",
     "moduleResolution": "node",
     "target": "ES2015",
+    "module": "commonjs",
     "downlevelIteration": true,
     "sourceMap": false,
     "declaration": true,

Then I can successfully import this module into my project. Not sure what effects adding the module key to your tsconfig does for others, though. Happy to make a PR if you'd like.

[fratzinger]

I confirm that this is a problem and it's my fault.

I messed up in a commit for version 4.0.1: https://github.com/feathersjs-ecosystem/feathers-authentication-management/commit/f7e6ec345fcaf113a6c38a6436a4135749f69edc#diff-b55cdbef4907b7045f32cc5360d48d262cca5f94062e353089f189f4460039e0L7 I changed from target: "es5" to target: "ES2105", not knowing that it would change from cjs to esm. I did this because vitepress forced me to. I add module: "commonjs" now. If pipeline succeeds, I publish a fix. I'll let you know here, when there's a new version.

[fratzinger]

Released as version 4.0.2. Please try it out and let me know, if that fixes your problem.