Some weird errors show up when using paths for resolve.alias .

Can you reproduce the problem with latest npm?

no, I use yarn and it’s the latest

Description

I want to add some common alias in both prod and dev webpack configuration files. To avoid repetitive coding I decided to write them in paths.js, like this:

...
// config after eject: we're in ./config/
module.exports = {
  ...
  servedPath: getServedPath(resolveApp('package.json')),
  //common alias
  resolvePaths: {
    pages: resolveApp('src/pages'),
    common: resolveApp('src/common'),
    utils: resolveApp('src/utils'),
    components: resolveApp('src/components'),
    modals: resolveApp('src/components/Modals')
  }
};

Then I use it in both configuration files, like this:

  resolve: {
    ...
    extensions: ['.js', '.json', '.jsx', ''],
    alias: Object.assign(paths.resolvePaths,{
      'react-native': 'react-native-web',
    })
  }

But it doesn’t work and some weird errors show up:

Failed to compile.

Error in ./src/common/less/base.less
Syntax error: Unexpected '}' at line 1 column 16 of the JSON5 data. Still to read: "}"
 @ ./src/common/less/base.less 4:14-192 13:2-17:4 14:20-198

However, If I change the part of path.js to:

...
// config after eject: we're in ./config/
module.exports = {
  ...
  servedPath: getServedPath(resolveApp('package.json')),
  //common alias
  pages: resolveApp('src/pages'),
  common: resolveApp('src/common'),
  utils: resolveApp('src/utils'),
  components: resolveApp('src/components'),
  modals: resolveApp('src/components/Modals')
};

And use it in configuration files like this:

  resolve: {
    ...
    extensions: ['.js', '.json', '.jsx', ''],
    alias: {
      'react-native': 'react-native-web',
      'common': paths.common,
      'pages': paths.pages,
      ...
    })
  }

It will work.

Expected behavior

It works correctly.

Environment

Run these commands in the project folder and fill in their results:

1. npm ls react-scripts (if you haven’t ejected): have ejected
2. node -v: v6.10.2
3. npm -v: 4.6.1

Then, specify:

1. Operating system: macOS 10.12.4
2. Browser and version: Chrome 58.0.3029.110 (64-bit)

Thanks.

[gaearon]

FWIW, if you’re just trying to enable absolute imports like import MyPage from 'pages/MyPage' you didn’t need to eject. You can just create an .env file in your project and add NODE_PATH=src to it.

[leadream]

I’ll try it. Again, thank you for your help.