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

Version 4 in Node complains about "Cannot use import statement outside a module" #619

Open
perivar opened this issue Feb 21, 2023 · 13 comments · May be fixed by #620
Open

Version 4 in Node complains about "Cannot use import statement outside a module" #619

perivar opened this issue Feb 21, 2023 · 13 comments · May be fixed by #620

Comments

@perivar
Copy link

perivar commented Feb 21, 2023

First of all, thanks for a very good library!

I have spent more than 5 hours trying to upgrade my typescript node project to work after the changes between version 3 and 4, and have at this moment given up and rolled back to version 3.

The error given when running the program is:
SyntaxError: Cannot use import statement outside a module:

The error happens in:
/node_modules/chord-symbol/src/index.js:1
import './typedefs';
^^^^^^
SyntaxError: Cannot use import statement outside a module

I tried following several tutorials to see if setting typescript compiling to esnext and setting type to "module" in package.json would work but had to give up after hours of errors.
I also tried to see if it was only the first import line that stopped this from working, but then it fails on the second import in the same index.js file, so for some reasons all "imports" have stopped working.

I'm noe sure what changed between version 3 and 4 that made a standard typescript node project stop working, but I can confirm that chord-symbol version 4 works perfectly in react native expo.

Here are some tutorials I tried, but none of them helped.
https://stackoverflow.com/questions/71929951/typescript-syntaxerror-cannot-use-import-statement-outside-a-module-side-file
https://stackoverflow.com/questions/74766930/syntaxerror-cannot-use-import-statement-outside-a-module-in-nodejs-typescript

@no-chris
Copy link
Owner

no-chris commented Feb 21, 2023

Uch! I'm really sorry this happened to you 😞Have you tried importing the bundled version as described in the migration guide? https://github.com/no-chris/chord-symbol/blob/master/packages/chord-symbol/MIGRATION.md
I was a bit hesitant to do that change but it does simplify a bit the development especially in a monorepo context. But maybe the migration guide isn't easy enough to find? It is on the package readme https://github.com/no-chris/chord-symbol/tree/master/packages/chord-symbol

let me know if importing the bundled version solves your problem. Sorry again about this!

@perivar
Copy link
Author

perivar commented Feb 21, 2023

I'm using typescript and the following from the migration guide does not work, at least not in my typescript project:
import { chordPaserFactory } from 'chord-symbol/lib/chord-symbol.js';

The error message is:
Could not find a declaration file for module 'chord-symbol/lib/chord-symbol.js'. '/Users/perivar/Projects/ChordMaster/node_modules/chord-symbol/lib/chord-symbol.js' implicitly has an 'any' type.
Try npm i --save-dev @types/chord-symbol if it exists or add a new declaration (.d.ts) file containing declare module 'chord-symbol/lib/chord-symbol.js';ts(7016)

And @types/chord-symbol does not exist.

@no-chris
Copy link
Owner

Seems that it complains about not finding types... I'm not a typescript expert, can you try as it says, e.g. adding declare module 'chord-symbol/lib/chord-symbol.js' to node_module/chord-symbol/types/index.d.ts?

@perivar
Copy link
Author

perivar commented Feb 21, 2023

Thanks!
Ok, I made it work.
First of all, adding declare module 'chord-symbol/lib/chord-symbol.js' to node_module/chord-symbol/types/index.d.ts did not work!

What worked was:
I imported the chord-symbol library using:

import {
Chord,
ChordParseFailure,
chordParserFactory,
chordRendererFactory,
MaybeChord,
} from 'chord-symbol/lib/chord-symbol'; <--- notice no .js

And then I created a new chord-symbol.d.ts file in the same folder where I added the following:
declare module 'chord-symbol/lib/chord-symbol' { <--- notice no .js
export {
... here I copied everything from the chord-symbol index.d.ts file
}
}

I do not know how to fix this in your library, but at least I can manually fix the issues by creating my own copy of the index.d.ts file.

@no-chris
Copy link
Owner

I'm glad you found a workaround!
I'm not sure how to fix it, I probably need to reproduce that locally, can you share the basic characteristics of your project so I can try reproducing the issue?

@perivar
Copy link
Author

perivar commented Feb 22, 2023

Here is a github repository that shows both the error and the workaround:
https://github.com/perivar/chord-symbol-node-typescript

There are two tags, one with a "normal version 3" and one with a "version 4" with workaround:
https://github.com/perivar/chord-symbol-node-typescript/tags

If you checkout the version 3 tag, and update chord-symbol to version 4 in package.json, you will get the error mentioned in the issue both when running tests and executing the cli:
https://github.com/perivar/chord-symbol-node-typescript/tree/chord-symbol-v3-working

Run with:
yarn build && node ./bin/index.js list -a

and Run test with
yarn test

Cheers

@no-chris
Copy link
Owner

Amazing, thanks a lot, I will have a look asap

@no-chris
Copy link
Owner

This should probably fix it, I basically implemented your solution, on my side it seems to work, would you have any way to test?

@no-chris
Copy link
Owner

And actually declaring the module with the .js extension also seems to work. It's a detail, but it makes the documentation consistent with the pure nodeJs, non Typescript usage of it

@no-chris no-chris linked a pull request Feb 23, 2023 that will close this issue
@perivar
Copy link
Author

perivar commented Feb 27, 2023

I am happy to verify if this works, but I don't know how I can?
How can I test your new release in my typescript project if there is no release-build I can use?
Do you know if there is a way to create an alternative release build from github and use this in package.json?
Like the username/repo#branch-name format ?

I also tried to clone your repository locally but get lots of errors when i try "yarn build".
E.g.
FAIL packages/chord-symbol/tests/testsHelpers/combineModifiers.spec.js
Test suite failed to run
Cannot find module 'get-permutations' from 'packages/chord-symbol/tests/testsHelpers/combineModifiers.js'

I don't know if I need to build a version locally or if there is a way for me to test your branch in my node project without building it locally ? (like the github question above)

@no-chris
Copy link
Owner

Good question... I could release a beta version but with lerna I think it means that I need to merge to master first, which I'd rather avoid before having it tested...

I think the easiest way would be to clone the repository directly in the node_modules and then checkout the branch

cd node_modules
rm -rf chord-symbol
git clone [email protected]:no-chris/chord-symbol.git chord-symbol
cd chord-symbol
git fetch origin
git checkout add-bundled-types

About the other issue did you run lerna bootstrap from the root first? maybe I should add that to the documentation...

@no-chris
Copy link
Owner

Once the testing is done you can just remove the repository and run yarn install again

rm -rf node_modules/chord-symbol
yarn install

(untested)

@perivar
Copy link
Author

perivar commented Mar 24, 2023

Unfortunately I just cannot get it to work without creating a local copy of the file.

First I clone the repository in node_modules using the commands you listed.

If I only use
from 'chord-symbol';
it has the original error "SyntaxError: Cannot use import statement outside a module"

If I use the modified
from 'chord-symbol/lib/chord-symbol';
or
from 'chord-symbol/lib/chord-symbol.js';
it fails with
Could not find a declaration file for module 'chord-symbol/lib/chord-symbol'.
or
Could not find a declaration file for module 'chord-symbol/lib/chord-symbol.js'

I even tried to run your commands and copy up the chord-symbol package directory to the main node_modules directory but this did not change anything.
I.e.
cd node_modules
rm -rf chord-symbol
git clone [email protected]:no-chris/chord-symbol.git chord-symbol
cd chord-symbol
git fetch origin
git checkout add-bundled-types
+ mv chord-symbol/packages/chord-symbol chord-symbol-temp
+ rm -rf chord-symbol
+ mv chord-symbol-temp chord-symbol

So the only thing I made work was to reset to the original 4.0.0 version of your library and add the chord-symbol.d.ts manually using a copy of your file pasted into the same directory as package.json
https://github.com/no-chris/chord-symbol/blob/add-bundled-types/packages/chord-symbol/lib/chord-symbol.d.ts

and remembered to use the .js import:
from 'chord-symbol/lib/chord-symbol.js';

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.

2 participants