React Scripts 2.0.3 babel-loader fails to build imported local ES6 module

[thedanchez]

Is this a bug report?

Not sure.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

react-scripts, babel-loader

Environment

System:
   OS: macOS High Sierra 10.13.6
   CPU: x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
 Binaries:
   Node: 8.12.0 - ~/.nvm/versions/node/v8.12.0/bin/node
   Yarn: 1.10.1 - /usr/local/bin/yarn
   npm: 6.4.1 - ~/.nvm/versions/node/v8.12.0/bin/npm
 Browsers:
   Chrome: 69.0.3497.100
   Firefox: 62.0
   Safari: 12.0
 npmPackages:
   react:  16.5.2
   react-dom:  16.5.2
   react-scripts:  2.0.3
 npmGlobalPackages:
   create-react-app: Not Found

Steps to Reproduce

1. Create a yarn workspace project (multiple, independent ES6 packages -- 1 module should be CRA2)
2. Create a file in CRA2 module that imports a value from the local ES6 module dependency (a value that has been defined with FlowJS syntax).
3. Run react-scripts start and it should produce an error

Expected Behavior

The babel-loader instance within my CRA2 module should be able to transpile + remove Flow types from the imported ES6 module.

Actual Behavior

babel-loader fails with a SyntaxError according to the browser console output.

WebStorm gave a slightly different output:

Reproducible Demo

N/A

[Timer]

Your packages must be build and you need to import those copies. We're hoping to make this more ergonomic going forward (this didn't work in v1, either).

Please see linked issue for proposal.

duplicate of #5161

[thedanchez]

@Timer thanks for the update on this. Just to be clear for my understanding, if I want to be able to import/export an external (local or otherwise) ES6 package into my CRA2 package, I would have to either:

1. Use Babel and transpile entire ES6 module into ES5. Then import transpiled output into CRA2 module. (Doing this unfortunately does not give me import value autocompletion in my IDE with respect to the transpiled module).
2. Run react-scripts eject and modify the setup to transpile the imported ES6 module.

[bugzpodder]

I am currently using approach #1 for my own setup and its working out ok but there can be hiccups (#1333 (comment)).

you may be able to rewire the configs without ejecting using react-app-rewired or some other package (eg https://www.npmjs.com/package/react-app-rewire-yarn-workspaces)

[cleverettgirl]

@bugzpodder Would you be able to provide a little more information on your setup? I've transpiled my "common" library (correctly, i believe), but when i try to import the output I'm still getting "Failed to compile, cannot resolve module 'common'. I'm not sure what I'm missing. Thanks in advance!!

[bugzpodder]

Maybe it would help if you provided something so I can take a look?
Generally, setup yarn workspaces and see if your package is symlinked correctly in node_modules/. Import should then be able to resolve the correct module even before transpiration.

[cleverettgirl]

@bugzpodder Thank so much for the reply. This is the current setup I have:
admin (cra2 app -- i do see common in the node_modules here)
inside Admin-> App.js I have import Test from 'common/dist/main.js' (ideally i'd just like to be able to do import Test from 'common')

common's webpack config:

  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  }
};

I currently just have src/index.js with a very simple component i'm trying to export and then import into admin.

import React from 'react';

export default class Test extends React.Component {
	render() {
		return (
			<h1> hellooooo </h1>
		);
	}
}

The Error I'm getting now is "Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports."

[bugzpodder]

Hello @cleverettgirl did you set up yarn workspaces?
https://yarnpkg.com/lang/en/docs/workspaces/

You'd setup yarn workspaces with two workspaces, one for cra admin app, the other for your simple component. Then you can do an import from your cra app.

[cleverettgirl]

@bugzpodder Yup! in my root package.json I have

{
  "private": true,
  "workspaces": [
  	"admin",
  	"common"
  ]
}

[bugzpodder]

@cleverettgirl see https://github.com/bugzpodder/yarn-workspace-cra
You'll need 1) replace webpack with babel-cli 2) sepcify the correct main entry in package.json in common.
Hopefully this helps!

[cleverettgirl]

@bugzpodder wow, thank you so much!!!