import behaviors looks incorrect

[cexcell]

When some component imports file with <script> tag that contains behavior in some object, loader fails to load this script properly. For example: <link rel="import" href="chart-property-behavior.html"> where chart-property-behavior is:

<script>
  var ChartBehaviors = ChartBehaviors || {};
  /** @polymerBehavior */
  ChartBehaviors.ChartPropertyBehavior = {
  ...
</script>

When i try to load a page i get an error Uncaught ReferenceError: ChartBehaviors is not defined, because it inserts script after this component and within module. Component from chart-elements.

Is there any possible workaround?

[aruntk]

@cexcell This is because babel adds 'use strict' to processed scripts unless it is explicitly blacklisted in babel config. Till I find out a way to handle this issue at the package level, you can use the following workaround

// your webpack.config.js
...
  resolve: {
    alias: {
      'ChartBehaviors': path.resolve(__dirname, './path/to/workaround.js')
    }
  },
  plugins: [
    new webpack.ProvidePlugin({
      "ChartBehaviors": "ChartBehaviors",
    })
  ],
...

Now create workaround.js inside path/to

// workaround.js
module.exports = {};

[cexcell]

@aruntk Thank you, this helps to get rid of error, but instead i got three new warnings behavior is null, check for missing or 404 import. And component has only one object in behaviors array instead of four

[aruntk]

@cexcell Okay. I've blacklisted use strict at the plugin level. You can change the config file back to original. Please check now. wc-loader version 1.0.11

npm i -D wc-loader@1.0.11

[aruntk]

@cexcell Here is a behavior demo https://github.com/aruntk/polymer-webpack-demo/blob/master/src/components/example-behavior.html

[cexcell]

@aruntk i've installed wc-loader version 1.0.11, revert config file but warning is still here.

test-item.html:

<link rel="import" href="test-behavior.html">
<dom-module id="test-item">
  <script>
    const testBehavior = testBehavior || {};
    Polymer({
      is: 'test-item',
      behaviors: [testBehavior.simpleBehavior]
    })
  </script>
</dom-module>

test-behavior.html

<script>
  var testBehavior = testBehavior || {}
  testBehavior.simpleBehavior = {
    attach() {
      console.log(1)
    }
  }
</script>

I get [test-item::_flattenBehaviorsList]: behavior is null, check for missing or 404 import

[aruntk]

@cexcell testBehavior should be a global variable for you to use it like this.

<!-- test-behavior.html -->
<script>
let testBehavior = testBehavior || {};
  testBehavior.simpleBehavior = {
    attach() {
      console.log(1)
    }
  };
window.testBehavior = testBehavior;
</script>

[cexcell]

@aruntk got it. Thank you again.