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

Activity

1. Timer commented on Oct 5, 2018

   

   Timer

   on Oct 5, 2018

   Contributor

   More actions

   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
2. Timer

   closed this as completedon Oct 5, 2018
3. thedanchez commented on Oct 8, 2018

   

   thedanchez

   on Oct 8, 2018

   Author

   More actions

   @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.
4. bugzpodder commented on Oct 8, 2018

   

   bugzpodder

   on Oct 8, 2018

   More actions

   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)
5. cleverettgirl commented on Oct 8, 2018

   

   cleverettgirl

   on Oct 8, 2018

   More actions

   @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!!
6. bugzpodder commented on Oct 8, 2018

   

   bugzpodder

   on Oct 8, 2018

   More actions

   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.
7. cleverettgirl commented on Oct 11, 2018

   

   cleverettgirl

   on Oct 11, 2018

   Last edited by cleverettgirl

   More actions

   @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."
8. bugzpodder commented on Oct 11, 2018

   

   bugzpodder

   on Oct 11, 2018

   More actions

   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.
9. cleverettgirl commented on Oct 12, 2018

   

   cleverettgirl

   on Oct 12, 2018

   More actions

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

   {
     "private": true,
     "workspaces": [
     	"admin",
     	"common"
     ]
   }
   
10. bugzpodder commented on Oct 12, 2018

    

    bugzpodder

    on Oct 12, 2018

    More actions

    @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!
11. cleverettgirl commented on Oct 12, 2018

    

    cleverettgirl

    on Oct 12, 2018

    More actions

    @bugzpodder wow, thank you so much!!!
12. lock

    locked and limited conversation to collaborators on Jan 10, 2019