Support Aliases for imports relative to root

I have addressed this in #352 but the issue was closed as my question that I posted was somewhat unrelated.

I have the defined the aliases in webpack.config.dev.js and it mostly works. I am receiving lint errors, and tests are failing.

Can someone provide a somewhat detailed explanation on how to resolve theses issues and implement aliases relative to the src/ path? I am completely lost and would prefer to not have to use absolute paths such as ../../../config lol.

I would be happy to submit a PR once its working, if @coryhouse feels this is an appropriate direction for the kit.

---

webpack.config.dev.js

// ...removed for brevity
const resolvePaths = (...args) => {
  return path.resolve(__dirname, 'src', ...args);
};

export default {
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json'],
    alias: {
      containers: resolvePaths('containers'),
      components: resolvePaths('components'),
      reducers: resolvePaths('reducers'),
      layouts: resolvePaths('layouts'),
      styles: resolvePaths('styles'),
      store: resolvePaths('store'),
      middleware: resolvePaths('middleware'),
      config: resolvePaths('config')
    },
  },
// ...removed for brevity

src/components/Home/index.spec.js

import React from "react";
import config from 'config';

console.log(config);
const Home = () => (<div className="HomeComponent">
  <h1>Home Component</h1>
</div>);

Home.propTypes = {};
Home.defaultProps = {};
Home.defaultProps = {};
export default Home;

src/components/Home/index.js

import React from 'react';
import {shallow} from 'enzyme';
import HomeComponent from './index';

describe('<HomeComponent />', () => {
  it('should display the Home Component', () => {
    const wrapper = shallow(<HomeComponent />);
    const actual = wrapper.find('.HomeComponent > h1').text();
    const expected = 'Home Component';
    expect(actual).toEqual(expected);
  });
});

the lint errors i get are:

and my tests fail because it doesn’t know where “config” is located at. So it seems tests are breaking too…

[mikedevita]

@coryhouse ill get a PR submitted shortly. thanks.

edit: Okay so with everything moved to the package.json, you need to do the following.

Note: if this line is here, i am still updating this… stay tuned…

---

Install the module resolvers

yarn add -D babel-plugin-module-resolver eslint-import-resolver-babel-module

Update webpack to resolve the aliases

edit both webpack.config.dev.js and webpack.config.prod.js with the following (around lines 10, replace the config)

const resolvePaths = (...args) => {
  return path.resolve(__dirname, 'src', ...args)
}

export default {
  resolve: {
    extensions: ['*', '.js', '.jsx', '.json'],
    alias: {
      containers: resolvePaths('containers'),
      components: resolvePaths('components'),
      reducers: resolvePaths('reducers'),
      layouts: resolvePaths('layouts'),
      styles: resolvePaths('styles'),
      store: resolvePaths('store'),
      middleware: resolvePaths('middleware'),
      config: resolvePaths('config')
    }
  },
// ...removed for brevity

Update package.json to include the plugins

you’ll probably need to add the plugins array to the development and test environments, for production it was already there. These should match your aliases defined in the webpack.config.*.js

"plugins": [
  [
    "module-resolver",
    {
      "root": [
        "./src"
      ],
      "alias": {
        "containers": "./src/containers",
        "components": "./src/components",
        "reducers": "./src/reducers",
        "layouts": "./src/layouts",
        "styles": "./src/styles",
        "store": "./src/store",
        "middleware": "./src/middleware",
        "config": "./src/config"
      }
    }
  ]
]

Update package.json to include the eslintConfig

This is required to fix the lint errors and test errors

"settings": {
  "import/resolver": {
    "babel-module": {}
  }
},
"plugins": [
  "react",
  "import"
],

[coryhouse]

Your approach makes sense, but I’d like to leave this out since alias isn’t a common use case and it may just create confusion. That said, I’d welcome a pr that updates the docs to link to this issue so people can see how to do so.

On Mar 28, 2017 4:21 PM, “Mike DeVita” [e-mail] wrote:

thanks @kwelch https://github.com/kwelch is this something you think would be along the path for the kit to include as a PR? If so I can clean things up and submit a PR for it.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/coryhouse/react-slingshot/issues/398#issuecomment-289908640, or mute the thread https://github.com/notifications/unsubscribe-auth/ABnFpYJinRxM7LC_O3QxjST6efV75neVks5rqXnRgaJpZM4Mr4Lg .