Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Resolve alias to source_path #986

Closed
nguyenj opened this issue Oct 31, 2017 · 5 comments

Comments

@nguyenj
Copy link

@nguyenj nguyenj commented Oct 31, 2017

I'm having a hard time finding a way to access the source_path. I'm able to find the public path just find with asset_host; but there doesn't seem to be a way to access the config values from webpacker.yml.

Here's what I'm trying to do:

// /app/javascripts/packs/main.js

import Signup from  '@components/signup.js'

I would like for webpack to resolve @components to /apps/javascripts/components (https://webpack.js.org/configuration/resolve/#resolve-alias).

I can hardcode the path via path.resolve(__dirname, '..', 'app', 'javascripts'); but I don't think that's an elegant path forward.

@nguyenj nguyenj changed the title Resolve alias to project root Resolve alias to source_path Oct 31, 2017
@gauravtiwari

This comment has been minimized.

Copy link
Member

@gauravtiwari gauravtiwari commented Nov 6, 2017

You can get source_path from config:

const config = require('@rails/webpacker/package/config')
@BoleLee

This comment has been minimized.

Copy link

@BoleLee BoleLee commented Jul 26, 2018

I setted config according to the docs:webpack:

# config/webpack/custom.js
module.exports = {
  resolve: {
    alias: {
      @: '/app/javascript/src',
      @views: '/app/javascript/src/views',
      @components: '/app/javascript/src/views/components'
    }
  }
}

# config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const customConfig = require('./custom')

environment.config.merge(customConfig)

however, when it compiles, it said cannot find the module.

@gauravtiwari

This comment has been minimized.

Copy link
Member

@gauravtiwari gauravtiwari commented Jul 26, 2018

@BoleLee What happens if you do this?

module.exports = {
  resolve: {
    alias: {
      @: 'app/javascript/src', // (remove slash)
      @views: 'app/javascript/src/views',
      @components: 'app/javascript/src/views/components'
    }
  }

rest of the code is same as above

@BoleLee

This comment has been minimized.

Copy link

@BoleLee BoleLee commented Jul 26, 2018

# config/webpack/custom.js
const path = require('path')

module.exports = {
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '..', '..', 'app/javascript/src'),
      '@views': path.resolve(__dirname, '..', '..', 'app/javascript/src/views'),
      '@components': path.resolve(__dirname, '..', '..', 'app/javascript/src/views/components')
    }
  }
}

# config/webpack/environment.js
const { environment } = require('@rails/webpacker')
const customConfig = require('./custom')

environment.config.merge(customConfig)

@gauravtiwari I tried your solution in #1063, and it solve the problem.

@gauravtiwari

This comment has been minimized.

Copy link
Member

@gauravtiwari gauravtiwari commented Jul 26, 2018

Great 👍 - should be either complete absolute path (more robust) or relative path (from node_modules dir)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.