Create-react-app: Some weird errors show up when using paths for resolve.alias .

[leadream]

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]

Since you have ejected, we encourage you to ask for help in channels specific to underlying projects (in this case, webpack). We only know our own configuration well, and we can’t really provide support for every possible change in the configuration. I’ll close this as it’s not very actionable for us, but maybe somebody who knows webpack well can help you. Cheers!

[Timer]

Please open this issue on Stack Overflow or similar help community.
Unfortunately, we are too busy to provide support for ejected setups. Sorry!

This seems like a malformed webpack loader configuration or invalid syntax in your LESS.
Please be mindful to read all the comments we have around the loader section.
If something's not clear, please let us know or send a PR improving the documentation. Thanks!

[leadream]

@gaearon @Timer ok, I'll ask some other places. thanks for your reply.

[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.