Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SyntaxError: Cannot use import statement outside a module #191

Closed
3 tasks
dallinbjohnson opened this issue Sep 28, 2022 · 10 comments · Fixed by #193
Closed
3 tasks

SyntaxError: Cannot use import statement outside a module #191

dallinbjohnson opened this issue Sep 28, 2022 · 10 comments · Fixed by #193
Assignees

Comments

@dallinbjohnson
Copy link
Collaborator

dallinbjohnson commented Sep 28, 2022

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
Copy link
Collaborator

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
Copy link
Collaborator

I'll publish a commonJS version of the package 👍

@claustres
Copy link
Collaborator

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
Copy link

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
Copy link
Collaborator

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

@sedouard
Copy link

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
Copy link

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
Copy link

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
Copy link
Collaborator

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

I messed up in a commit for version 4.0.1: f7e6ec3#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
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

7 participants