JS files in symlink directory under src -- are not importable

[vladp]

Is this a bug report?

Yes this is a bug.
JS files under a symlinked directory within ./src are not compiled.
If the directory is not sym-linked -- and instead, a regular directory, -- no problems.

Ability to do this often needed when developer wants to share a library across multiple react/react-native projects.

Also I believe this issue is directly related (or a duplicate) of
#3547

It is not clear how 3547 was solved, and there are no user documentation/guide changes that address the problem.

Another similar issue form about 9 months ago:
#2553

Did you try recovering your dependencies?

Not applicable

Which terms did you search for in User Guide?

symlinks, Windows symlinks , module parse failed unexpected token

Environment

1. node -v: v9.8.0
2. npm -v: 5.6.0
3. yarn --version (if you use Yarn): 1.5.1
4. npm ls react-scripts (if you haven’t ejected):
   ua1b@0.1.0 `-- UNMET DEPENDENCY react-scripts@1.1.4
   npm ERR! missing: react-scripts@1.1.4, required by ua1b@0.1.0
   (I have not ejected, and app was created by create-react-app )

Then, specify:

1. Operating system: windows 10
2. Browser and version (if relevant): IE 11

Steps to Reproduce

1. create an app with create-react-app
2. go to src directory and create a symbolic link (on windows, I use Cygwin ln -s command to do that, as administrator)
3. Create any react component file it the symlinked directory
   For example, my test file (I use react-native-web) is:

/* global fetch */
import React,{Component} from 'react'
import {View,Text, Platform} from 'react-native'

export class VTestComponent extends React.Component {
  constructor (props) {
    super (props);
    
  }
  
  render () {
    return (
      <View >
      <Text> VTestComponent </Text>
      </View>
    );
  }
}/*end of VTestComponent class */
  

4. import the component in your App.js
   import {VTestComponent} from './js.app/VTestComponent';

5. run: npm start
   You will get an error

module parse failed: Unexpected token (13:6)
You may need an appropriate loader to handle this file type.
| render () {
| return (
|
| VTestComponent
|

it should have compiled. There is no mention in the user documentation that it would not work
(the symlinked directory is under the ./src directory).

Also not clear what configurations to package.json or something else needs to be made -- for this to work.

my package.json (produced by create-react app, plus my own additive changes) is below:
(it also includes, of course react-scripts)

{
  "name": "ua1b",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "create-react-class": "15.6.3",
    "react": "^16.3.1",
    "react-dom": "^16.3.1",
    "react-native-deprecated-custom-components": "github:facebookarchive/react-native-custom-components",
    "react-native-material-kit": "github:xinthink/react-native-material-kit#master",
    "react-native-section-list-get-item-layout": "2.2.1",
    "react-native-vector-icons": "^4.5.0",
    "react-native-web": "^0.5.4",
    "react-scripts": "1.1.4",
    "tree-model": "^1.0.6"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "babel-plugin-react-native-web": "^0.5.4"
  }
}

thank you.

[vladp]

I was not able to find a solution to the above problem.
However, below is my change to Create-react-app JS file.
To reiterate, I have symlink subdirectory under ./src. The symlink name is: js.app.

The webpack configuration of create-react-app is in
node_modules/react-script/config/webpack.config.dev.js

// Process JS with Babel.
         {
           test: /\.(js|jsx|mjs)$/,
           include: paths.appSrc,
           loader: require.resolve('babel-loader'),

the use of include: paths.appSrc is what's preventing me using the symlinked directory underneath my ./src

I changed the above to

const fs = require('fs'); //include somewhere on top of the webpack.config.dev.js

...

{
           test: /\.(js|jsx|mjs)$/,
           include: [paths.appSrc,
                     fs.realpathSync(paths.appSrc+'/js.app')],

And this works (obviously temporarily, till next module upgrade...)..
but I am a single person shop, and just needed to move past this... Sorry I do not have any better & cleaner suggestion, but hope this can help others

Clearly, this is a bug, so I am keeping the issue open with the hope that it will get addressed (or at least users of the create-react-app will be able to override behavior for this).

[bradfordlemley]

This is a dup of #3547, maybe add your comments there?