Property value expected type of string but got null; Dynamic path in dynamic import

[archfz]

I am having issues using dynamic imports with variables in the path name. Trying to load dynamically the language. If I disable the babel-plugin-universal-import plugin or I remove the variable from the import path then it works.

webpack version: 4.41.2 babel-loader version: 8.0.6 babel-plugin-universal-import version: 4.0.0

code that is causing the issue:

return import(/* webpackChunkName: "lang-admin-[request]" */ `../Locales/${locale}.ts`);

code that DOES NOT cause the issue:

return import(/* webpackChunkName: "lang-admin-[request]" */ `../Locales/en.ts`);

webpack build error:

ERROR in ./src/frontend-admin/DataProviders/LocaleProvider.ts
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /d/Development/holdmytable-frontend/src/frontend-admin/DataP
roviders/LocaleProvider.ts: Property value expected type of string but
got null
    at Object.validate (/d/Development/holdmytable-frontend/node_module
s/@babel/types/lib/definitions/utils.js:164:13)
    at validateField (/d/Development/holdmytable-frontend/node_modules/
@babel/types/lib/validators/validate.js:22:9)
    at validate (/d/Development/holdmytable-frontend/node_modules/@babe
l/types/lib/validators/validate.js:16:3)
    at builder (/d/Development/holdmytable-frontend/node_modules/@babel
/types/lib/builders/builder.js:38:27)
    at Object.StringLiteral (/d/Development/holdmytable-frontend/node_m
odules/@babel/types/lib/builders/generated/index.js:346:31)
    at idOption (/d/Development/holdmytable-frontend/node_modules/babel
-plugin-universal-import/index.js:134:49)
    at PluginPass.Import (/d/Development/holdmytable-frontend/node_modu
les/babel-plugin-universal-import/index.js:241:13)
    at newFn (/d/Development/holdmytable-frontend/node_modules/@babel/t
raverse/lib/visitors.js:179:21)
    at NodePath._call (/d/Development/holdmytable-frontend/node_modules
/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/d/Development/holdmytable-frontend/node_modules/
@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/d/Development/holdmytable-frontend/node_modules
/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/d/Development/holdmytable-frontend
/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/d/Development/holdmytable-fronten
d/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/context.js:140:19)
    at Function.traverse.node (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/d/Development/holdmytable-frontend/node_modules
/@babel/traverse/lib/path/context.js:97:18)
    at TraversalContext.visitQueue (/d/Development/holdmytable-frontend
/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/d/Development/holdmytable-fronten
d/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/context.js:140:19)
    at Function.traverse.node (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/d/Development/holdmytable-frontend/node_modules
/@babel/traverse/lib/path/context.js:97:18)
    at TraversalContext.visitQueue (/d/Development/holdmytable-frontend
/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitMultiple (/d/Development/holdmytable-front
end/node_modules/@babel/traverse/lib/context.js:79:17)
    at TraversalContext.visit (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/context.js:138:19)
    at Function.traverse.node (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/d/Development/holdmytable-frontend/node_modules
/@babel/traverse/lib/path/context.js:97:18)
    at TraversalContext.visitQueue (/d/Development/holdmytable-frontend
/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/d/Development/holdmytable-fronten
d/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/context.js:140:19)
    at Function.traverse.node (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/d/Development/holdmytable-frontend/node_modules
/@babel/traverse/lib/path/context.js:97:18)
    at TraversalContext.visitQueue (/d/Development/holdmytable-frontend
/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/d/Development/holdmytable-fronten
d/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/context.js:140:19)
    at Function.traverse.node (/d/Development/holdmytable-frontend/node
_modules/@babel/traverse/lib/index.js:84:17)
    at NodePath.visit (/d/Development/holdmytable-frontend/node_modules
/@babel/traverse/lib/path/context.js:97:18)

webpack babel rule config:

        test: /\.(tsx?)|(js)$/,
        include: path.resolve(__dirname, 'src'),
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true,
            presets: [
              "@babel/preset-react",
              "@babel/preset-env",
            ],
            plugins: [
              "@babel/plugin-syntax-dynamic-import",
              "universal-import",
            ]
          }
        }
      },```

[askurat]

@archfz Did you ever get a solution to this? I have the same problem.

[archfz]

@askurat No I haven't. It would be nice to see some movement here.

[cdoublev]

Since I spent some time on this plugin, maybe I can try to help you if you provide a reproduction repo.