Babel error when working with npm workspace - plugin babel) SyntaxError: xxx.ts: Missing semicolon. (x:x)

Question

Inside a file of an npm workspace-a, when I import a React Component located in a npm workspace-b I am getting the error: plugin babel) SyntaxError: xxx.ts: Missing semicolon. (x:x)

import MyComponentLocatedInWorspaceB from ‘../../anotherPackageWorkspace/direct/import’;

On dev time (eg: Running storybook) the relative/absolute import work fine, but when I create the npm run build then I get the error.

If I "disable" the "npm workspaces" the build works fine.

Answer 1

The problem is you can't use relative/absolute import from one workspace into another.

So this is wrong:

import MyComponentLocatedInWorspaceB from ‘../../anotherPackageWorkspace/direct/import’;

The correct way of importing is

import MyComponentLocatedInWorspaceB from ‘@myDomain/workspaceB’;

Also, be sure to add/install workspaceB as a dependency of workspaceA in your package.json

{
    "dependencies": {
    ...
        "@myDomain/workspaceB": "^0.0.1"
    }
}

The dependency version number needs to coincide with the one in workspaceB owns package.json

PS: The Babel syntax error is completely misleading and doesn't help at all.