kriasoft / react-starter-kit

The web's most popular Jamstack front-end template (boilerplate) for building web applications with React
https://reactstarter.com
MIT License
22.7k stars 4.16k forks source link

resolve alias not working #945

Closed IDrinkMoreWater closed 7 years ago

IDrinkMoreWater commented 7 years ago

webpack config:

  resolve: {
    alias:{'MOBILE':path.resolve(__dirname, '../node_modules/antd-mobile')},
    root: path.resolve(__dirname, '../src'),
    modulesDirectories: ['node_modules',path.resolve(__dirname, '../node_modules') ],
    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json'],
  },

Register Import:

import React, { PropTypes } from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import Layout from '../../components/Layout';
import Button from 'MOBILE/lib/button';

Console error log:

Error: Cannot find module 'MOBILE/lib/button'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (E:\IDEAFrontWorksapce\egodrug-front-end\trunk\egodrug-weixin-shop\build\webpack:\external "MOBILE\lib\button":1:1)
    at __webpack_require__ (E:\IDEAFrontWorksapce\egodrug-front-end\trunk\egodrug-weixin-shop\build\webpack:\webpack\bootstrap f996bc363413a5e61e55:19:1)
    at Object.<anonymous> (E:\IDEAFrontWorksapce\egodrug-front-end\trunk\egodrug-weixin-shop\build\webpack:\routes\register\Register.js:13:1)
j-rooks commented 7 years ago

I had this issue, I made it work by adding ~ to the path for the alias, because otherwise it seems like webpack is looking for a node module, thus giving the error.

Example:

webpack config:

  resolve: {
    alias:{'~MOBILE':path.resolve(__dirname, '../node_modules/antd-mobile')},
    ...
  },

Register Import:

import Button from '~MOBILE/lib/button';

IDrinkMoreWater commented 7 years ago

@adjnor thank you very much. worked!