Nwb: Importing library with webpack aliases

[staab]

This issue is a: Question / support request.

I'm using nwb 0.18 with the following config:

const path = require('path')

module.exports = {
  type: 'web-module',
  npm: {
    esModules: true,
    umd: false,
  },
  babel: {
    presets: ['react'],
  },
  webpack: {
    aliases: {
      'my-library': path.resolve('src'),
    },
  },
}

I added the aliases bit because I really prefer to import stuff using an absolute path rather than a relative path (e.g. import X from 'my-library/X rather than import X from '../../../X). This solved my problem when running tests and my demo app, but I'm having trouble using my library in another project as a library. Here's my import statement in my app:

import MyLibrary from 'my-library'

This ends up importing es/index.js (as it should), which looks something like this:

import NiftyComponent from 'my-library/components/NiftyComponent'

export default NiftyComponent

And I get the following error:

./node_modules/my-library/es/index.js 
Module not found: Can't resolve 'my-library/components/NiftyComponent' in '/Users/me/my-app/node_modules/my-library/es'

This makes sense because webpack is trying to resolve the path to either ./node_modules/my-library/components/NiftyComponent or ./node_modules/my-library/components/src/NiftyComponent, neither of which is correct (I'm not sure which one it's trying to do).

I tried to fix this issue by using babel-plugin-webpack-alias but it couldn't find my webpack config which it apparently needs. I might try to get around this by creating a webpack file with just the aliases so the plugin can do its work.

So my questions here are:

• How do I consistently resolve absolute paths in my library both during development and when imported from another project?
• Bonus: currently I'm using the npm prepare script to run npm run build when the package is installed, so I can avoid committing build files to source control, and install from a github repo. Is there are better way to do this?

[zsherman]

same issue here, any thoughts @insin?

[hamza-hajji]

I'd also like to know, this has probably been brought up before, @insin

[dan-kez]

I am also having the same issue.

Edit: I have created a one off webpack config that has my aliases in it. Unfortunately that also did not work.

Edit 2: It looks like this plugin does work for the lib directory but has no effect on the es directory.

my nwb config:

const path = require('path');

module.exports = {
  type: 'react-component',
  npm: {
    esModules: true,
    umd: {
      global: 'KlaviyoStyleReact',
      externals: {
        react: 'React',
        reactdom: 'ReactDOM',
      },
    },
  },
  babel: {
    plugins: [
      'jsx-control-statements',
      ['babel-plugin-webpack-alias', { config: './webpack.config.js' }],
    ],
  },
  webpack: {
    rules: {
      babel: {
        test: /\.jsx?/,
      },
    },
    extra: {
      resolve: {
        extensions: ['.js', '.jsx', '.json'],
      },
      node: {
        process: false,
      },
    },
    aliases: {
      Components: path.resolve(__dirname, 'src/Components'),
      Constants: path.resolve(__dirname, 'src/Constants'),
      Assets: path.resolve(__dirname, 'src/Assets'),
      Utils: path.resolve(__dirname, 'src/Utils'),
    },
  },
};

my webpack config (added this so eslint would be able to find my aliases)

const path = require('path');
const extendedNwbWebpackConfig = require('./nwb.config').webpack;

// Minimal Webpack config to supply to Eslint.
// This is not actually used by NWB but instead mirrors
// the resolve and loader rules.
module.exports = {
  resolve: {
    modules: [path.resolve(__dirname, 'lib'), 'node_modules'],
    extensions: extendedNwbWebpackConfig.extra.resolve.extensions,
    alias: extendedNwbWebpackConfig.aliases,
  },

  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
};

[hbar-digital]

I'm experiencing the same issue.

[dan-kez]

Looking into it more, the babel-plugin-webpack-alias explicitly exits if the callee is not a require statement.

https://github.com/trayio/babel-plugin-webpack-alias/blob/master/src/index.js#L139

I'm going to open up an issue over there to see if there is a way to expand the plugin to support es6.

[insin]

Generally, I'd consider any webpack config in nwb.config.js to be there for the demo build (more convenient importing if you have a bunch of modules in src/).

Since src/ is just getting transpiled directly to es/ and lib/ by Babel I'd avoid depending on any Webpack-specific features which won't be supplied by the consumer of your module (other than handling CSS provided and imported by dependencies, which is reasonable enough for the convenience it brings).

Getting Babel to rewrite your cleaner requires to relative requires which will work in the published version would be the way to go if you want that, but AFAIK there are a number of different plugins for that and I don't have experience with any of them.

[mapreal19]

Getting Babel to rewrite your cleaner requires to relative requires which will work in the published version would be the way to go if you want that, but AFAIK there are a number of different plugins for that and I don't have experience with any of them.

I was able to make it work with: https://github.com/tleunen/babel-plugin-module-resolver

[alexghi]

@mapreal19 could you provide a snippet of your config?

[mapreal19]

@alexghi sure.

This is how nwb.config.js looks:

module.exports = {
  type: 'react-component',
  npm: {
    esModules: true,
    cjs: false,
    umd: false,
  },
  babel: {
    plugins: [
      'flow-react-proptypes',
      ['module-resolver', {
        'root': ['.'],
        'alias': {
          'components': './src/components',
          'lib': './src/lib',
        },
      }],
    ],
  },
...
}

In this case you could access your components or lib files. E.g. import Popup from 'components'