Storybook: Dynamic import argument must be a string or a template literal

[cloudshadow]

trafficstars

Environment

"storybook": "7.5.1", "@storybook/react-webpack5": "7.5.1", "@linaria/babel-preset": "5.0.3", "@linaria/core": "5.0.2", "@linaria/react": "5.0.3", "@linaria/rollup": "5.0.3", "@linaria/webpack-loader": "5.0.3",

• Linaria version: 5.0.2
• Node.js version: 20.2.0
• OS: ventura 13.5

Description

Run "npm run storybook" and will return the error ERROR in ./storybook-stories.js Module build failed (from ./node_modules/@linaria/webpack-loader/lib/index.js): Error: /storybook-stories.js: Dynamic import argument must be a string or a template literal

but it work fine when I use "@linaria/babel-preset": "4.5.4", "@linaria/core": "4.5.4", "@linaria/react": "4.5.4", "@linaria/rollup": "4.5.4", "@linaria/webpack-loader": "4.5.4",

[layershifter]

Please provide a reproduction case on Stackblitz or a Github repository.

[cloudshadow]

Hi @layershifter please check the repo https://github.com/cloudshadow/linaria-with-storybook-issue

[aforian]

@layershifter Are there any updates? I encountered the same problem using the simular config like @cloudshadow does v4.5.4 works fine reproduction here: https://github.com/aforian/linaria-storybook-issue-poc

---

but v6 will throw the error:

ERROR in ./storybook-stories.js
Module build failed (from ./node_modules/@wyw-in-js/webpack-loader/lib/index.js):
Error: /Users/alexian/repo/work/linaria-storybook-issue-poc/storybook-stories.js: Dynamic import argument must be a string or a template literal
    at PluginPass.CallExpression (/Users/alexian/repo/work/linaria-storybook-issue-poc/node_modules/@wyw-in-js/transform/lib/plugins/dynamic-import.js:28:17)

reproduction here: https://github.com/aforian/linaria-storybook-issue-poc/tree/test/linaria-6

[JuliaBelokrinitskaya]

Adding exclude solved the problem for me:

    config.module.rules.push({
      test: /\.(tsx|ts|js|mjs|jsx)$/,
      use: [
        {
          loader: require.resolve('@wyw-in-js/webpack-loader'),
          options: {
            sourceMap: false,
          },
        },
      ],
      exclude: [
        /node_modules/,
        path.resolve(process.cwd(), 'storybook-stories.js'),
        path.resolve(process.cwd(), 'storybook-config-entry.js'),
      ],
    });