Feature: support NodePath dynamic imports

[ntucker]

trafficstars

Environment

• wyw-in-js version: 0.2.2
• custom processor:
• Bundler (+ version): [email protected]
• Node.js version: 20.10.0
• OS: Ubuntu on WSL

Description

Error: /temp/storybook-stories.js: Dynamic import argument must be a string or a template literal

Full error

ERROR in ./storybook-stories.js
Module build failed (from ./node_modules/@wyw-in-js/webpack-loader/lib/index.js):
Error: /home/ntucker/src/temp/storybook-stories.js: Dynamic import argument must be a string or a template literal
    at PluginPass.CallExpression (/home/ntucker/src/temp/node_modules/@wyw-in-js/transform/lib/plugins/dynamic-import.js:28:17)
    at newFn (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/visitors.js:160:14)
    at NodePath._call (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:46:20)
    at NodePath.call (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:36:17)
    at NodePath.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:82:31)
    at TraversalContext.visitQueue (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitMultiple (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:61:17)
    at TraversalContext.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:107:19)
    at traverseNode (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at NodePath.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/path/context.js:88:52)
    at TraversalContext.visitQueue (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:86:16)
    at TraversalContext.visitSingle (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:65:19)
    at TraversalContext.visit (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/context.js:109:19)
    at traverseNode (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/traverse-node.js:22:17)
    at traverse (/home/ntucker/src/temp/node_modules/@babel/traverse/lib/index.js:52:34)
    at transformFile (/home/ntucker/src/temp/node_modules/@babel/core/lib/transformation/index.js:82:31)
    at transformFile.next (<anonymous>)
    at run (/home/ntucker/src/temp/node_modules/@babel/core/lib/transformation/index.js:24:12)
    at run.next (<anonymous>)
    at /home/ntucker/src/temp/node_modules/@babel/core/lib/transform-ast.js:23:33

When using storybook it creates a virtual file that includes a dynamic import. This breaks the build.

Problem is here

Context on nodepath

Reproducible Demo

https://github.com/ntucker/wyw-in-js-storybook

git clone https://github.com/ntucker/wyw-in-js-storybook
cd wyw-in-js-storybook
yarn storybook

[layershifter]

I tried clone the repo, install deps and did yarn storybook:

(node 20)

@ntucker can you please provide more details? It seems that something is missing in the repro.

[Pfeifenjoy]

I have the same issue but use vite with wyw. For me it fails if I use react-router-dom since this library has a dynamic import with a non string value.

I tried to ignore that package but somehow in storybook it always applies wyw on all node_modules. Interestingly if I simply build my project I do not see the error.