faceyspacey / faceyspacey/babel-plugin-universal-import

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

Open
#91 3 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
114
Forks
38
PR merge metrics
No merged PRs in 30d

Description

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",
]
}
}
},```

Contributor guide

No contributing guide indexed for this repository

Research direction

Reproduce the webpack build using the provided LocaleProvider.ts example and configuration. Start in index.js around idOption (line 134) and the Import visitor (line 241), where the stack trace shows the failure; done means variable template-path imports build successfully without the null StringLiteral error while static imports continue to work.

Written by the indexing model from the issue text.

Assessment

Tech stack
babel, javascript, typescript, webpack
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.