babel-plugin-universal-import: Babel 7: TypeError: Cannot read property 'replace' of undefined

Trying to move to babel 7…

“webpack”: “^4.16.5”,
“@babel/core”: “^7.0.0-rc.1”,
“babel-plugin-dynamic-import-node”: “^2.0.0”,
“babel-plugin-universal-import”: “faceyspacey/babel-plugin-universal-import#webpack-4”,
“babel-preset-react-app”: “^4.0.0-next.66cc7a90”, …

The build process interrupts with an error shown below (see trace).

trace

/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/babel-plugin-universal-import/index.js:24
  return baseDir.replace(/^[./]+|(\.js$)/g, '')
                 ^

TypeError: Cannot read property 'replace' of undefined
    at trimChunkNameBaseDir (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/babel-plugin-universal-import/index.js:24:18)
    at getMagicCommentChunkName (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/babel-plugin-universal-import/index.js:64:23)
    at checkForNestedChunkName (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/babel-plugin-universal-import/index.js:164:30)
    at PluginPass.Import (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/babel-plugin-universal-import/index.js:190:33)
    at newFn (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/@babel/core/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/@babel/core/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/home/anton/Documents/workspace-sts/nodejs-spring-cloud-app-boilerplate/node_modules/@babel/core/node_modules/@babel/traverse/lib/context.js:90:19)
error Command failed with exit code 1.

The components are kinda:

component: universal(props => import(/* webpackChunkName: 'components-Home' */ /* webpackMode: "lazy" */ '../components/Home'),
    {
        resolve: props => require.resolveWeak('../components/Home'),
        chunkName: 'components-Home'
    }),
    loadData: async (store, params) => {
        if(store) {
            store.dispatch(actions.setMessage('Hi, I\'m from server!')) 
        }
        return Promise.resolve()
    },

When I switch the using of UC in code off and start project with only empty wrappers around the absent components, project is been built successfully.

Do I wrong smth or is it a bug?

PS The components like above are working "somehow" with babel 6. "somehow" - yep, but do work.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 53

Most upvoted comments

So this issue only happens when combined with dynamic-import-node. Here is a repo of the issue: https://gist.github.com/franjohn21/f9ed2e389f5070826343d38afed08a28

npx https://gist.github.com/franjohn21/f9ed2e389f5070826343d38afed08a28 to see the error:

Trace: TypeError: Cannot read property 'replace' of undefined
    at trimChunkNameBaseDir (/foo/node_modules/babel-plugin-universal-import/index.js:36:18)
    at getMagicCommentChunkName (/foo/node_modules/babel-plugin-universal-import/index.js:98:23)
    at checkForNestedChunkName (/foo/node_modules/babel-plugin-universal-import/index.js:204:30)
    at PluginPass.Import (/foo/node_modules/babel-plugin-universal-import/index.js:230:33)
    at newFn (/user/.npm/_npx/52062/lib/node_modules/babel-universal-import-dynamic-import-issue/node_modules/@babel/traverse/lib/visitors.js:193:21)
    at NodePath._call (/user/.npm/_npx/52062/lib/node_modules/babel-universal-import-dynamic-import-issue/node_modules/@babel/traverse/lib/path/context.js:53:20)
    at NodePath.call (/user/.npm/_npx/52062/lib/node_modules/babel-universal-import-dynamic-import-issue/node_modules/@babel/traverse/lib/path/context.js:40:17)
    at NodePath.visit (/user/.npm/_npx/52062/lib/node_modules/babel-universal-import-dynamic-import-issue/node_modules/@babel/traverse/lib/path/context.js:88:12)
    at TraversalContext.visitQueue (/user/.npm/_npx/52062/lib/node_modules/babel-universal-import-dynamic-import-issue/node_modules/@babel/traverse/lib/context.js:118:16)
    at TraversalContext.visitSingle (/user/.npm/_npx/52062/lib/node_modules/babel-universal-import-dynamic-import-issue/node_modules/@babel/traverse/lib/context.js:90:19)
    at Object.<anonymous> (/user/.npm/_npx/52062/lib/node_modules/babel-universal-import-dynamic-import-issue/bin.js:16:11)

franjohn21 on Nov 15, 2018

Zack, have you and James any plans on rewrite docs? Imho, it needs to be more structured. Your email doesn’t work, probably… I tried to write you with no luck.

re6exp on Sep 2, 2018

Zack,

You’ve done non-trivial things I didn’t see like using regeneration-plugin and some others. I’ve fixed some little errors (most of them showed up after I commented cloud-related code before sending you the project), it works like a charm now!

Thank you so much!!! You saved me many hours! Now I can continue my work freely.

BTW, I’ve used RFR before. It’s amazing tool! James has done a great job, and your support breathes a new life into the toolset! Now, with webpack-4 support and babel 7, I can return to using it.

And again, thank you!!!

re6exp on Aug 15, 2018