Codesandbox-client: Webpack aliases / config

[davestewart]

I realise there's been a few posts on aliases, but I'm just responding to this tweet.

This is my sandbox:

• https://codesandbox.io/s/github/davestewart/vuex-pathify/tree/feature/demo-aliased/demo

Unfortunately, none of my webpack aliases seem to work in CodeSandbox, so the project won't compile.

Saying that, the webpack file itself doesn't seem to get executed. See webpack.config.js in:

• https://github.com/davestewart/vuex-pathify/tree/feature/demo/demo

Or if aliases can't be used, can I use absolute imports, or do they need to be relative?

Thanks :)

[lbogdan]

@davestewart Meanwhile you can use the official @ alias that points to /src, so for example you can import App.vue as import '@/App.vue' from anywhere. That alias was broken (pointed to /) until now, I made a PR to fix it, you can check an example here http://pr769.cs.lbogdan.tk/s/n375qr3710 .

[davestewart]

Aha, well that makes sense!

How much of a stretch would it be to have some kind of webpack config merge, if not for entire configs then at least certain blocks (aliases, plugins) ?

[lbogdan]

If you think about it, webpack.config.js is evaluated in a Node.js context, which would be quite hard to emulate inside the browser. To take the example of your project, here's what's needed for the aliases to get evaluated:

var path = require('path')
[...]
var src = path.resolve(__dirname, './src')
[...]
function resolve (path) {
  return src + '/' + (path || '')
}
[...]
module.exports = {
[...]
  resolve: {
    alias: {
      'vue$':       'vue/dist/vue.esm.js',
      '@':          resolve(''),
      'assets':     resolve('assets'),
      'store':      resolve('store'),
      'examples':   resolve('examples'),
      'views':      resolve('views'),
      'pages':      resolve('views/pages'),
      'components': resolve('views/components'),
    },
[...]

so we'd have to mock path.resolve(), __dirname and only execute code related to aliases.

Also webpack plugins are pretty much out of the question, as the CS bundler is not 100% API compatible with webpack.

[davestewart]

Thanks for the reply, and I expected an answer like this. I didn't preempt it in my question at all as you guys have a much more complete understanding of the build process than I.

Does CS do everything inside the browser!? I thought at least some of it would need to be done on the server. Pretty amazing if so.

What would you think of something like an "alias" section in the settings? A developer could just hard-code the paths per alias. I use aliases pretty much in every project; they just make so much sense for anything larger than an experiment.

On a side note, some kind of technical "How it works" section would be really useful for the docs (which need expanding anyway IMHO).

Thanks again!

[lbogdan]

Yes, everything in CS runs inside the browser.

The alias section is a good idea worth exploring, with the only drawback that you'll have to manage your aliases in two places. We'll have to think about where it should go and how defining aliases should look like.

If you want to read more about how CS works behind the covers, I would recommend the awesome articles written by @CompuIves on Medium https://medium.com/@compuives , especially these two:

• Creating a parallel, offline, extensible, browser based bundler for CodeSandbox
• How we make npm packages work in the browser; announcing the new packager

[zhaoyi0113]

Have the same issue. Is it still not resolved?

[CompuIves]

We support aliases on the parcel template (codesandbox.io/s/vanilla) inside CodeSandbox, you can define them in package.json under "alias". If you want more Webpack like behaviour I recommend using a container sandbox (like codesandbox.io/s/node or https://codesandbox.io/s/github/zeit/next.js/tree/master/examples/hello-world for example). These sandboxes run on a server and will behave like your local environment.

[zhaoyi0113]

I am using this page https://codesandbox.io/s/ to import a github project in Client Template tab. Is it running in a container mode? If not, how can I make it run inside a container?

[github-actions[bot]]

This issue is stale because it has been open many days with no activity. It will be closed soon unless the stale label is removed or a comment is made.

[github-actions[bot]]

This issue has been automatically closed because there wasn't any activity after the previous notice or the stale label wasn't removed.