Stencil: Rollup: Missing Export component is not exported

[JuBaBaBa]

Stencil version:

@stencil/[email protected]

I'm submitting a:

[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
Exported class is declared as not exported, when the command stencil build is run, the error

[ ERROR ]  Rollup: Missing Export: src/components/my-component/HelloWorld.js:1:9
'GreeterClient' is not exported by src\components\my-component\helloworld_grpc_web_pb.js

is shown

Expected behavior:
the exported class 'GreeterClient' from helloworld_grpc_web_pb.js should be imported in HelloWorld.tsx

Steps to reproduce:

The file helloworld_grpc_web_pb.js exports via

'module.exports = proto.helloworld;'
...
`proto.helloworld.GreeterClient =...

HelloWorld.tsx tries to import it via 'import {GreeterClient} from './helloworld_grpc_web_pb'';

While building with stencil build I get the error message:

[ ERROR ]  Rollup: Missing Export: src/components/my-component/HelloWorld.js:1:9
'GreeterClient' is not exported by src\components\my-component\helloworld_grpc_web_pb.js

Related code:

the export component 'helloworld_grpc_web_pb.js':

proto.helloworld.GreeterClient =
    function(hostname, credentials, options) {
  if (!options) options = {};
  options['format'] = 'text';
...
module.exports = proto.helloworld;

the import component HelloWorld.tsx:

import {GreeterClient} from './helloworld_grpc_web_pb';

Other information:

[sauhard-bhushan]

I have the same issue when importing any third party library into my code. Did you find a fix?
For example, I am trying import { AppInsights } from 'applicationinsights-js' and get the same
Rollup: Missing Export error as you.

-----UPDATE-----
Maybe try changing your module.exports to export default.

Unfortunately this cannot be changed for external libraries in my case so is of no help to me 😢

[thegecko]

Same problem here, cannot import from commonJS modules.

[thegecko]

I managed to fix my issue using the following configuration in stencil.config.js:

import { Config } from '@stencil/core';
import builtins from 'rollup-plugin-node-builtins'; // only needed if using node types

export const config: Config = {
    namespace: 'webcomponents',
    commonjs: {
        namedExports: {
            'node_modules/<your package>/lib/index.js': ['<your export 1>', '<your export 2>']
        }
    },
    plugins: [
        builtins(), // only needed if using node types
    ],
    outputTargets: [
        { type: 'dist' },
        { type: 'docs' },
        {
            type: 'www',
            serviceWorker: null
        }
    ]
};

Notice how commonjs is not inside plugins. I read the code to find stencil already includes the likes of rollup-plugin-node-resolve and rollup-plugin-commonjs which stumped me for a while as I was trying to include them in this config.

[sauhard-bhushan]

Thanks for the suggestion, but it didn't work. 😞

[morissonmaciel]

Same problem here. Any changes from @ionic-team about this issue? I think it's a pretty basic scenario for common component/web-app cases.

In SelectFieldItem.ts

export class SelectFieldItem {
  key: String;
  value: String;
}

In target component:

import { SelectFieldItem } from "./select-field";

Result in error:

Module "/path-to-folder/select-field.js" has no default export.

Note:

Even changing to a standard Javascript file, same error occurs.

[Dohxis]

I am also having the same issue.

[Wvduijn]

Having the same issue as well... unable to import services i created. _Rollup: Missing Export:_ Error.
Tried named & default exports to no avail

[kraftwer1]

Confirming it also happens in Stencil One.

[adbusa67]

I also have the same problem i am not able to import node module.
Additionally I am not able to use web api eventsource which has built in support for modern browsers.

[sfmskywalker]

@thegecko your solution worked for me as well, and based on @Dzeneralen's comment this is the way to go.

In my case I was receiving a rollup error when importing UserManager from the oidc-client package. Adding the following commonjs config fixed that:

export const config: Config = {
  globalStyle: 'src/global/app.css',
  globalScript: 'src/global/app.ts',
  commonjs: {
    namedExports: {
      'oidc-client': ['UserManager']
    }
  },
  outputTargets: [
    {
      type: 'www',
      // comment the following line to disable service workers in production
      serviceWorker: null,
      baseUrl: 'https://myapp.local/'
    }
  ],
  plugins: [
    sass()
  ]
};

[liron-navon]

Still happens in stencil 1.3

[RomainYoobic]

Still happens in stencil 1.8.2

[pyummm]

1.8.7
I cloned component, then removed clone, this was cause of bug, so had to remove all to this clone, in my vierd case, i had to remove .stencil
.
Again hapenned, and again remove .stencil solved

Again hapenned, again found this soultion

[zeidoo]

I'm also having this issue, using grpc-web.

Here's are more detailed steps on how to workaround this issue. Thanks to @thegecko for them.

There's two options when generating grc-web files.

If you use --grpc-web_out=import_style=commonjs+dts, then just drop all the generated files into a manually created folder inside of node_modules in your stenciljs project.

Once you created the fake node module folder, you can import your services in your typescript code like so: import {SchemaServiceClient} from 'foo/schemaservice_grpc_web_pb';

Then in stencil.config.js make sure you manually export whatever the stencil rollup plugin is complaining about when you compile:

export const config: Config = {
...
  commonjs: {
    namedExports: {
      'foo/schemaservice_grpc_web_pb.js': ['SchemaServiceClient'],
      'foo/schemaservice_pb.js': ['CreateSchemaResponse', 'ListSchemaRequest', 'ListSchemaResponse'],
      'grpc-web/index.js': ['AbstractClientBase', 'GrpcWebClientBase']
    }
...
};

Note that there's no need to add other plugins to stencil.config.js to make it work. The "foo" part is the name of the folder you used to put the grp-web generated files inside of the node_modules folder.

Technically, the namedExport part CAN receive the relative path of a js file on the left hand side, if you don't want to create the fake node_module folder . But I never managed to make it work.

Also note that you might be able to automate the node_module folder creation by specifying a folder instead of a package name when using npm install. See this link https://stackoverflow.com/questions/5786433/how-to-install-a-node-js-module-without-using-npm .

The other way to do this is to use --grpc-web_out=import_style=typescript. In this case you need to do the same as above for any *.d.ts file and its corresponding js file generated. The non .d.ts typescript files that are generated need to be inside of your src folder in your stenciljs project as they need to be compiled with the rest of your project.

Not ideal but it works.

[manucorporat]

There is an uncoming version of rollup commonjs using a new api called syntheticNamedExports that should solve most of this issues, however, stencil uses rollup we don't control this details directly.

[lyuya]

still happened in 1.14.0

[Blunderchips]

What was the last stable version?

[mattvb91]

Currently experiencing this v2.0.3