Import from index files doesn't work

[cjorasch]

Stencil version:

@stencil/core@0.0.6-13

I'm submitting a ...
[x] bug report

Current behavior:
Unable to resolve references to index.js files.

Expected behavior:
It should be possible to import from index files.

Steps to reproduce:

If the project has a directory of shared utilities in /src/util/.

1. Create an index.ts file in src/util.
2. Import { MyUtil } from '../util';
3. nom start

This results in the following error:

[25:34.3]  bundle modules started ...
[25:34.3]  bundle modules finished in 14 ms

[ ERROR ]  Could not resolve '../util' from dist/collection/core/components/my-component.js

If you use Import { MyUtil } from '../util/index'; then you do not get the error.

A similar error occurs if any downstream references use index files. For example, if my-util.ts includes a reference to another class via a directory index.

TypeScript compilation works fine. It is the Stencil process that gets the error.

[jthoms1]

Could you provide me with your tsconfig.json file contents? I want to make sure that you have allowJs set to true. Looks like our starter does not have this set and by default it is false.

[cjorasch]

I am using the config that is in stencil-app-starter.

I updated it to include allowJs and still get an error.

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "allowJs": true,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "moduleResolution": "node",
    "module": "es2015",
    "target": "es2015",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h"
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules"
  ]
}

My code includes an import from ../shared (the directory that contains the index). When I use nom start I get the following:

[54:16.1]  @stencil/core v0.0.6-21
[54:16.2]  build, dev mode, started ...
[54:16.2]  compile started ...
[54:17.9]  compile finished in 1.78 s
[54:17.9]  bundle styles started ...
[54:17.9]  bundle modules started ...
[54:18.1]  bundle styles finished in 151 ms
[54:18.4]  bundle modules finished in 437 ms

[ ERROR ]  Could not resolve '../shared' from dist/collection/components/my-component.js

[54:18.4]  build failed, watching for changes... in 2.25 s


[ ERROR ]  Could not resolve '../shared' from dist/collection/components/my-component.js

If I change my code to import from ../shared/index then I do not get the error.

[jthoms1]

Ya this looks like a bug to me. I think it might be a setup issue with Rollup. I will research further.

[jthoms1]

Rollup does not resolve index files from paths. It appears that we need to add a rollup plugin to allow for this. https://github.com/frostney/rollup-plugin-local-resolve

Or use the app-scripts code.
https://github.com/ionic-team/ionic-app-scripts/blob/v2.1.4/src/rollup/ionic-rollup-resolver-plugin.ts#L93-L122