Search code examples
javascriptecmascript-nextstackblitz

Stackblitz.com: error importing a module within another module

Stackblitz.com is an excellent resource for creating small experimental projects. However, today I ran into a problem.

I created a stackblitz plain ecmascript project with the following folder structure

└── root
    ├── Resource
    │   ├── app.js
    │   ├── daylight.js
    │   └── localTexts.js
    ├── index.js
    └── index.html

Now, when I try to import from localTexts.js within ./Resources/app.js, the app crashes with the message:

Module undefined not declared as a System.registerDynamic dependency of https://js-state-machine.stackblitz.io/~/Resource/app.js

In another stackblitz project this setup seems to be working fine. I have tried several solutions to no avail. Maybe I hit one of my (many) blind spot or something.

I can't really create an example snippet within the limits of the snippet editor of SO, but here's an excerpt of the code

// ./Resource/localTexts.js
export default {
   dimmed: `dimmed`,
   remove: `remove`,
   add: `add`,
   ... 
};

// ./Resource/app.js
import txt from `./localTexts.js`;
//              ^ solved! Don't use template literals here! 
export default (() => { 
    const appText = txt; // error occurs here
    ... 
    return { ... }
})();

This is the app.js-file. Anyone up there who is able to enlighten me here?

Solution

  • The problem was simple: I accidentally used a template literal for the import path (so: import something from `./somefile.js` ). That can only be a String literal.

    Now, the error message did not mention any of that an evidently the linter @Stackblitz does not detect it. Ah well, problem solved. Thanks for your attention and sorry to have bothered you.