Can-util/import || steal.import - 404 when build

StealJS
1

I’m importing some config from a js file like this:

import importModule from 'can-util/js/import/import';
//...

importModule(this.config.path).then(module => {
 console.log(module.default)
})

config.path looks like this ~/config/dashboard/page-one

This works but if I switch from page-one to page-two and back to page-one. It seems that page-one is cached and I don’t see a request, but the then resolves with page-two data.

I’ve solve it with adding a cache-buster like this:

importModule(this.config.path + '.js?c=' + new Date().getTime() ).then(module => {
 console.log(module.default)
})

Is this normal? Or a bug in importModule?

Edit: window.steal.import() behaves the same.

2

So this doesn’t work when it’s build with Steal.

My package.json looks like this:

{
  "name": "project-name",
  "version": "1.0.0",
  "main": "main.js",
  "files": [
    "."
  ],
  "steal": {
    "main": "main.js",
    "plugins": [
      "steal-css",
      "steal-less",
      "steal-stache"
    ],
    "lessOptions": {
      "relativeUrls": false
    },
    "bundle": [
      "~/config/dashboard/page-one",
      "~/config/dashboard/page-two"
    ]
  }
}

This is my folder structure the build produces:

📁 dist
    📁 project-name
        📁 config
            📁 dashboard
                📄 page-one.js
                📄 page-two.js
            //some shared files
        //some shared files
    📄 main.js
    //some shared files

I get a 404 because my path looks like this: ~/config/dashboard/page-one but that file doesn’t exist in the build.
The build generated /project-name/config/dashboard/page-one.

And if I change my path to project-name/config/dashboard/page-one, Steal strips off the project-name and thus loading a non exisiting file.

3

Which version of steal are you using? Can you create a small example that we can look at?

4

@justinbmeyer latest steal@2.1.2 and steal-tools@2.0.5

Here is a simplified demo. You’ll see that index.dev.html works but index.prod.html not.

5

There’s a bug in the app’s code. page-one is defined as:

import BaseConfig from "~/config/dashboard/base";

export default Object.assign(BaseConfig, { name: "Page One" });

and page-two as:

import BaseConfig from "~/config/dashboard/base";

export default Object.assign(BaseConfig, { name: "Page Two" });

each one mutates the BaseConfig object. After the second one loads the object won’t be changed again. So the problem is that both modules export the same object.

I think you probably want to create a new object, you can use:

import BaseConfig from "~/config/dashboard/base";

export default Object.assign({}, BaseConfig, { name: "Page Two" });

In each of them. Notice that the first argument to Object.assign is a new object {}.

1 Like
6

Thanks @matthewp!!!

Didn’t realised I was mutating the Base object and didn’t know you could pass more then 2 objects to Object.assign. :+1: