Trouble getting it to work

[johnnynia]

Hi and thanks so much for this plugin.

Sorry to bother but I can't get it to work in production. I seem to miss something obvious and the problem may very much be rooted in my config.

I'm doing something like this:

const Foo = importedComponent(
  () =>
  import( /* webpackChunkName:'Foo' */ './Foo')
)

class App extends Component {
  render() {
    return (
      <Foo />
    )
  }
}

export default App

In development SSR and client side seem to work perfectly. But when I deploy the app I get an error that I could trace back to the RegEx matching in importMatch.

In your test case the RegEx

/\(['"]imported-component['"],\s?['"](.*),/

matches correctly

`() => importedWrapper('imported-component', 'mark1', __webpack_require__.e(/*! import() */ 0).then(__webpack_require__.bind(null, /*! ./components/Another */ "./app/components/Another.tsx")))`

But when I inspect my code, what's getting matched against the RegEx is

`function(){return e="imported-component",t="-1g25iq8",r=Promise.resolve().then(function(){return n(481)}),"undefined"!=typeof __deoptimization_sideEffect__&&__deoptimization_sideEffect__(e,t,r),r;var e,t,r}`

It seems to me that Webpack is not picking up the import? The relevant bit of the config looks like this:

    rules: [
      {
        test: /\.(j|t)sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              babelrc: false,
              comments: true,
              presets: [
                '@babel/react',
                [
                  '@babel/preset-typescript',
                  {
                    isTSX: true,
                    allExtensions: true,
                  },
                ],
                [
                  '@babel/env',
                  {
                    targets: {
                      edge: '17',
                      ie: '11',
                    },
                    useBuiltIns: 'usage',
                    modules: false,
                  },
                ],
              ],
              plugins: [
                'transform-class-properties',
                'react-hot-loader/babel',
                'react-imported-component/babel',
              ],
            },
          },
        ],

Do you have any clue what I might be missing? Any hint would be appreciated. :-)

[theKashey]

I recon this is terser - a new uglification plugin. Let me play with latest webpack version.

[theKashey]

Pretty sure v5.4.0 would solve your issue. Now imported uses only one variable, and any code changes would not break it.

[johnnynia]

Thank you so much for the update, unfortunately the RegEx-matching still fails. Now the function string looks like this:

'function(){return e="imported_-1g25iq8_component",t=Promise.resolve().then(function(){return n(481)}),"undefined"!=typeof __deoptimization_sideEffect__&&__deoptimization_sideEffect__(e,t),t;var e,t}'

But the new RegEx in importMatch() still expects an opening parenthesis as first character:

/\(['"]imported_(.*)_component['"]/

Also there is nothing like __webpack_require__ in the string. 😕

[theKashey]

Missed the open parenthesis, will fix it in a few minutes. Unfortunately, I could not generate the code you have - for me it's always more or less the same (but yeah, there is no __webpack_require__ - just a n(481))

[johnnynia]

I guess I've tracked it down to @babel/env. The issue only arrises if I include IE: 11 in targets. Maybe some transpiling or polyfilling is overriding or forestalling react-imported-component/babel. Could this be the culprit?

I've also tried to add

  exclude: [
    'es7.symbol.async-iterator',
    'proposal-async-generator-functions',
    'transform-async-to-generator'
  ],

to @babel/env options but unfortunately to no avail.

[theKashey]

Sorry - I forgot to release a fixed version. Try 5.4.1

[johnnynia]

Thank you very much! 👍