Doesn't work with create-react-app

[dmitrizzle]

Hello,

Would love to use this. My .../.../.../.../app dependency links look awful. However, I can't seem to get it working with create-react-app without ejecting. I've tried both adding .babelerc and editing package.json to no avail.

Has anyone had success with that? I'd like to postpone "ejecting" until very last moment but also would like to work in a nice environment.

[michaelzoidl]

Can you give me the package.json part and the .babelrc configuration for the plugin.
Btw.. i don't know if it's just a typo in the issue, but you misspelled .babelerc, the right word is .babelrc (just to get sure this is not the problem)

[dmitrizzle]

Sorry about the spelling, it was typed correctly on my server.
I pretty much followed the instructions on the homepage: created a new .babelrc and added the following: { "plugins": [ ["babel-plugin-root-import"]] }

... and also attempted to add the same code to package.json as follows:
{"name": "my-package","version": "1.0.0", "babel": { "plugins": [ ["babel-plugin-root-import"]] }}
(Above pattern found on Babel docs)

[davecarlson]

@dmitrizzle I found a [potential] fix.

For a CRA package, your .babelrc needs to be the following:

{
  "plugins": [
    ["babel-plugin-root-import"]
  ],
  "presets": "react-app"
}

You're basically "unsetting" presets, thats applied by CRA's configs.

Note, this worked on an "ejected" project, but should also work on "non-ejected" one.

[MaxwellGover]

@davecarlson Tried this on a "non-ejected" react app but still getting module not found error.

{
  "plugins": [
    ["babel-plugin-root-import", {
      "rootPathSuffix": "src"
    }]
  ],
  "presets": "react-app"
}

[jasan-s]

any solution to this issue when using this lib with create react app

[akshaynaik404]

I am having same issue here! Tried all above mentioned combinations, doesn't work. CRA v1.3.3

[deiucanta]

I made it work using https://github.com/timarney/react-app-rewired

This is my config-overrides.js file

const { injectBabelPlugin } = require('react-app-rewired');

const rootImport = ['root-import', {
  rootPathSuffix: 'src'
}]

module.exports = function override(config, env) {
  config = injectBabelPlugin(rootImport, config);

  return config;
}

[deiucanta]

I wrote a Medium post about it here: https://ideas.hexbridge.com/root-imports-with-create-react-app-877641e7d117

[andreaslillebo]

Since injectBabelPlugin has been deprecated, here is what worked for me:

Add react-app-rewired and customize-cra to the project:

yarn add react-app-rewired customize-cra -D

Create a config-overrides.js file in the root-folder of the project with the following contents:

const { addBabelPlugin, override } = require('customize-cra');

module.exports = override(
  addBabelPlugin(
    'babel-plugin-root-import'
  )
);

[brigand]

Going to close this as the core question is "how do I add babel plugins to create-react-app". Feel free to document this in the wiki, and we can link to it from the readme.

[tangtang12]

const {override，addBabelPlugin} = require（'customize-cra'）;

module.exports = override（
   addBabelPlugin（
       [“babel-plugin-root-import”，{
             “rootPathSuffix”：“src”，
              “rootPathPrefix”：“@”，
       }]
   ）
）;

[luismramirezr]

Both @andreaslillebo and @tangtang12 responses work fine.

If you set an alternate prefix or suffix in babel.config.js, you must specify it as in @tangtang12 response.