'Module parse failed: Unexpected token' error when importing from a yarn workspace

[thkim1011]

Describe the bug

When using importing objects/types from another node package in a yarn workspace, the compiler throws an error. I've set up minimum example that causes this issue below, which I've also uploaded to a git repo. So far this seems to only happen when I try to import enums but I think there's something under the hood that's not set up properly, and there isn't very good documentation about how to debug this error.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

I searched for 'Module parse failed'.

Environment

Environment Info:

  current version of create-react-app: 5.0.1
  running from /home/tkim/.nvm/versions/node/v19.3.0/lib/node_modules/create-react-app

  System:
    OS: Linux 5.15 Ubuntu 20.04.5 LTS (Focal Fossa)
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
  Binaries:
    Node: 19.3.0 - ~/.nvm/versions/node/v19.3.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v19.3.0/bin/yarn
    npm: 9.2.0 - ~/.nvm/versions/node/v19.3.0/bin/npm
  Browsers:
    Chrome: 110.0.5481.96
    Firefox: Not Found
  npmPackages:
    react: Not Found
    react-dom: Not Found
    react-scripts: Not Found
  npmGlobalPackages:
    create-react-app: 5.0.1

Steps to reproduce

1. Create a yarn workspace as follows.

mkdir yarn-workspace-bug && cd yarn-workspace-bug
echo '{
  "private": true,
  "workspaces": ["workspace-a", "workspace-b"]
}' >> package.json

2. Create a package as follows.

mkdir workspace-a && cd workspace-a
echo '{
  "name": "workspace-a",
  "version": "1.0.0"
}' >> package.json

3. Let's add a very simple typescript file with one enum that we wish to export.

// Make a new file called `index.ts` with the following contents
export enum Hello {
  World = "world",
}

4. Create a react app in the original yarn-workspace-bug directory with the typescript template.

cd ..
yarn create react-app workspace-b --template typescript

5. Add workspace-a as a dependency of the newly created React app.

{
  "dependencies": {
    ...
    "workspace-a": "1.0.0"
  }
}

6. Replace the contents of the App.tsx file with the following.

import './App.css';
import { Hello } from 'workspace-a';

function App() {
  return (
    <div className="App">
      {Hello.World}
    </div>
  );
}

export default App;

7. Run the react app by running yarn start.

Expected behavior

React app runs successfully.

Actual behavior

The compiler throws an error.

Failed to compile.

Module parse failed: Unexpected token (3:7)
File was processed with these loaders:
 * ../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| __webpack_require__.$Refresh$.runtime = require('/home/tkim/ws/yarn-workspace-bug/node_modules/react-refresh/runtime.js');
|
> export enum Hello {
|   World = "world",
| }
ERROR in ../workspace-a/index.ts 3:7
Module parse failed: Unexpected token (3:7)
File was processed with these loaders:
 * ../node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
 * ../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| __webpack_require__.$Refresh$.runtime = require('/home/tkim/ws/yarn-workspace-bug/node_modules/react-refresh/runtime.js');
|
> export enum Hello {
|   World = "world",
| }

webpack compiled with 1 error

Reproducible demo

https://github.com/thkim1011/yarn-workspace-bug

To run execute the following commands.

nvm use
cd workspace-b
yarn start

[eschneor]

Any progress here? also get this with create-react-app project. The error:

Compiled with problems:

ERROR in ./node_modules/@USER-NAME/any-package/src/index.tsx 12:2
Module parse failed: Unexpected token (12:2)
File was processed with these loaders:
 * ./node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
| 
| export default (
>   <Provider data={data}>
|     <App />
|   </Provider>

[thkim1011]

@eschneor oh I ended up doing a lot of research into this, and I think create-react-app just isn't the right build tool (?) for this purpose. It doesn't provide an easy way to override the given webpack configurations which is what's necessary for supporting importing an outside typescript package.

For my use case, I ended up using next.js which provides an experimental externalDir flag (see here). But haven't looked into this any further. I hope this is somewhat helpful.

[gerardboy]

@thkim1011 try this one, just add the workspace in the dangerouslyAddModulePathsToTranspile

akveo/react-native-ui-kitten#996 (comment)