Creating new alias

[guilhermeutzig]

Hello everyone,

I'm trying an experiment with React and I've changed the src folder to:

assets/ js/ styles/ index.html index.js

The main reason of this is that I wanted to separate styles from javascripts, but now, the only way I can find my files, is using relative path ../styles/component/index.scss...

I already tried to do this on pwa.config.js:

const resolve = require('resolve');

exports.webpack = function(config, env) {
  config.resolve = {
    extensions: ['.js', '.jsx', '.json', '.scss', '.css', '.svg', '.pdf', '.zip', 'mp4', 'jpg', 'png'],
    alias: {
      styles: resolve(__dirname, 'src/styles'),
      js: resolve(__dirname, 'src/js'),
      assets: resolve(__dirname, 'assets')
    }
  };
};

But returns the error:

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.resolve.alias should be one of these:
   object { <key>: string } | [object { alias?, name?, onlyModule? }]
   -> Redirect module requests
   Details:
    * configuration.resolve.alias['styles'] should be a string.
      -> New request
    * configuration.resolve.alias['js'] should be a string.
      -> New request
    * configuration.resolve.alias['assets'] should be a string.
      -> New request
    * configuration.resolve.alias should be an array:
      [object { alias?, name?, onlyModule? }]
    at webpack (/Users/guilhermeu/.config/yarn/global/node_modules/webpack/lib/webpack.js:24:9)
    at module.exports (/Users/guilhermeu/.config/yarn/global/node_modules/@pwa/core/index.js:64:12)
    at module.exports (/Users/guilhermeu/.config/yarn/global/node_modules/@pwa/cli/lib/watch.js:12:30)
    at Sade.parse (/Users/guilhermeu/.config/yarn/global/node_modules/sade/lib/index.js:153:56)
    at Object.<anonymous> (/Users/guilhermeu/.config/yarn/global/node_modules/@pwa/cli/bin.js:43:3)
    at Module._compile (module.js:643:30)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3

[lukeed]

Slightly unrelated, but you're being a little too haphazard with the mutable config 😬The one "gotcha" of exposing the entire object.

You're removing all of the aliases, many of which PWA needs to remain intact. For reference, here are all of PWA's aliases.

The @ alias points to your /src directory out of the box. If I were you, I'd use that (or at least add new aliases with the @ prefix) as to 100% avoid/bypass trying to resolve a npm dependency instead of your alias.

import myStyle from '@/styles/foobar.css'
import Hello from '@/js/hello';

// note that "@assets" is already setup for you
import Video from '@assets/video.mp4';

If you're dead-set on adding new aliases, I'd do it like this:

const { join } = require('path');

module.exports = function (config, env) {
  // PUSH into extensions, not overwrite
  config.resolve.extensions.push('.scss', '.css', '.pdf', '.zip', '.mp4', '.jpg', '.png');

  // add individual aliases
  //~> PS: still highly recommend you use "@___" aliases instead
  // Note: `env.src` === "/src" directory
  config.resolve.alias['styles'] = join(env.src, 'styles');
  config.resolve.alias['js'] = join(env.src, 'js');
}

Lemme know how that goes 👍

[guilhermeutzig]

Ohhh I got it, tested both ways and both worked!!

I will use @ prefix as you said, I was struggling a little bit to make it work, didn't quite get the concept of the thing.

Thank you very much for your help!

[lukeed]

Awesome! 🎉 You're welcome