Stencil: --next build error with lodash

[juliovedovatto]

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:

I'm trying to get ahead and use next generation compiler, before became default. But I got a interesting error:

I'm using lodash package as dependency and It is working well so far. But I'm getting a error when developing locally with Stencil using --next flag.

ReferenceError: module is not defined

Checking js files, I found the faulty line.

const global$1 = (typeof global !== "undefined" ? global :
  typeof self !== "undefined" ? self :
  typeof window !== "undefined" ? window : {});

/** Detect free variable `global` from Node.js. */
var freeGlobal = typeof global$1 == 'object' && global$1 && global$1.Object === Object && global$1;

module.exports = freeGlobal; // <---- THE FAULTY LINE

const _freeGlobal = /*#__PURE__*/Object.freeze({
  __proto__: null
});

Without --next flag, the application runs as expected. Checking JS files I found that lodash was parsed differently:

/** Detect free variable `global` from Node.js. */
var freeGlobal = typeof commonjsGlobal == 'object' && commonjsGlobal && commonjsGlobal.Object === Object && commonjsGlobal;

var _freeGlobal = freeGlobal;

Expected behavior:

Parse lodash as expected when using --next flag

Steps to reproduce:

• Use stencil/[email protected]
• Add lodash@latest package
• import and use any lodash helper function.
• Run stencil using --next flag stencil build --dev --watch --serve --next

Other information:

Once the "next" compiler will be default in 1.10.0 version, I believe there is some extra checks to perform before making default.

Currently the next compiler is passing all tests, but we'd like to get more real-world testing before making it the default

Well, here is a real world case. I hope you can figure out what is going on 😄

[adamdbradley]

I added lodash to one of our tests and it's passing: https://github.com/ionic-team/stencil/commit/49f724b37cee56c1474f018f3100892483acb67c

So it must be some other scenario that's causing your issue. Would you be able to provide a repo case, or update this example to replicate your error? Thanks

[juliovedovatto]

@adamdbradley repo case: https://github.com/juliovedovatto/stencil-lodash

Turns out the problem is using combination of lodash + rollup-plugin-node-polyfills using --next flag.

I had to add node pollyfils plugin, because we have to use few node functions, following documentation https://stenciljs.com/docs/module-bundling#node-polyfills.

The repo case contains all necessary resources to reproduce the problem.

• npm start wil start with the current builder
• npm run start-next will start using --next builder flag

[beenotung]

Similarly, I got Rollup complaining on Typescript syntax:

[ ERROR ]  Rollup: Parse Error: ../../notice/notice-client/src/domain/web-push-client.ts:5:14
           Unexpected token (Note that you need plugins to import files that are not
           JavaScript)

Where it's a typescript file in the project importing another typescript file's symbolic link.
The symbolic link is in the project (src) but the target of the link is outside the project (src).
This was fine with the --next flag is not used.

The workaround is to replace those symbolic linked files into hard copy, But that should be supported as tsc behavior? (This is also a know bug in ts-node)

[juliovedovatto]

@adamdbradley any feedback about the next compiler issue with rollup-plugins-node-polyfill?

v1.11.0 was released today and I'm not sure if we can update Stencil core package.

Our application will not work without rollup-plugins-node-polyfill plugin, unfortunately.

[dimaslz]

Hello folks!.

Today I have tested all versions, and the last version where can work with lodash is 1.9.3-1. Using the repo https://github.com/juliovedovatto/stencil-lodash as a base, and I was tested version by version. From the version 1.10.0 onwards I can not work with lodash, using --next or not. I have the same error exposed by @juliovedovatto.

[juliovedovatto]

@dimaslz in my case I solved with:

• switched from lodash to lodash-es - rollup works better with ES modules
• removed rollup-plugins-node-polyfill plugin and configured nodeResolve option in stencil.config.js file:

// stencil.config.js

export const config: Config = {
// [...],
nodeResolve: {
    preferBuiltins: true
},
// [...]
}

Stencil uses rollup-plugin-node-resolve, so it is more reliable than using rollup-plugins-node-polyfill, I believe this recommendation should be removed from docs.

From Stencil definition file

   /**
     * Passes custom configuration down to the "@rollup/plugin-node-resolve" that Stencil uses under the hood.
     * For further information: https://stenciljs.com/docs/module-bundling
     */
    nodeResolve?: NodeResolveConfig;

export interface NodeResolveConfig {
    module?: boolean;
    jsnext?: boolean;
    main?: boolean;
    browser?: boolean;
    extensions?: string[];
    preferBuiltins?: boolean;
    jail?: string;
    only?: Array<string | RegExp>;
    modulesOnly?: boolean;
    /**
     * @see https://github.com/browserify/resolve#resolveid-opts-cb
     */
    customResolveOptions?: {
        basedir?: string;
        package?: string;
        extensions?: string[];
        readFile?: Function;
        isFile?: Function;
        isDirectory?: Function;
        packageFilter?: Function;
        pathFilter?: Function;
        paths?: Function | string[];
        moduleDirectory?: string | string[];
        preserveSymlinks?: boolean;
    };
}

Let me know if this works for you 😄👍🏻

[dimaslz]

mmm, I will check and let you know any update. Thanks! 🙂

[dimaslz]

Hi @juliovedovatto, sorry for the delayed response. Works perfectly, I tested with lodash directly, no lodash-es, and I had not problems.

Thanks you for you help!.