[rollup-plugin-dynamic-import-variables] Unexpected token (47:6)

[m-nathani]

Describe the bug

Was testing vite for react application.. i a styled component button and wantd to export as Library as mentioned in vite docs below
https://vitejs.dev/guide/build.html#library-mode

Reproduction

however running vite build it throwing the
error during build:

[rollup-plugin-dynamic-import-variables] Unexpected token (47:6)
file: /home/murtaza/training/my-vue-app/src/components/UmaiButtonDemo/index.js:47:6
error during build:
SyntaxError: Unexpected token (47:6)
    at Parser.pp$5.raise (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:19495:13)

and here is the file with the code which is mentioned in the above error

import React from "react";
import PropTypes from "prop-types";
import styled, { css } from "styled-components";

const Button = styled.button`
  width: 103px;
  height: 44px;
  background: #19a69a 0% 0% no-repeat padding-box;
  text-align: center;
  letter-spacing: 0px;
  color: #ffffff;
  box-shadow: 0px 2px 2px #00000029;
  border: 0px;
  border-radius: 8px;
  opacity: 0.8;
  &:hover {
    cursor: pointer;
  }
  ${({ primary }) =>
    primary &&
    css`
      background: #ffffff;
      color: #19a69a;
      border: 1px solid #19a69a;
    `}
  ${({ large }) =>
    large &&
    css`
      width: 340px;
      height: 60px;
      border-radius: 16px;
    `}
    ${({ small }) =>
    small &&
    css`
      width: 44px;
      height: 44px;
      border: 0px;
      color: ${({ primary }) => (small && primary ? "#4B5463" : "#ffffff")};
    `}
`;

const UmaiButtonDemo = ({ label, ...props }) => (
  <Button {...props}>{label}</Button>
);

UmaiButtonDemo.propTypes = {
  label: PropTypes.string,
};

export default UmaiButtonDemo;

System Info

System:
    OS: Linux 5.4 Ubuntu 18.04.6 LTS (Bionic Beaver)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 5.20 GB / 15.36 GB
    Container: Yes
    Shell: 4.4.20 - /bin/bash
  Binaries:
    Node: 14.18.0 - ~/.nvm/versions/node/v14.18.0/bin/node
    Yarn: 1.21.1 - /usr/bin/yarn
    npm: 7.24.2 - ~/.nvm/versions/node/v14.18.0/bin/npm
  Browsers:
    Chrome: 94.0.4606.71
    Firefox: 93.0
  npmPackages:
    @vitejs/plugin-react: ^1.0.0 => 1.0.2 
    vite: ^2.6.5 => 2.6.5 

Used Package Manager

npm

Logs

> @umai/[email protected] prebuild
> npm run clean:dist


> @umai/[email protected] clean:dist
> rm -rf dist


> @umai/[email protected] build
> vite build "--debug"

  vite:config bundled config file loaded in 73.02ms +0ms
[dotenv][DEBUG] did not match key and value when parsing line 1: # .env.local
  vite:config using resolved config: {
  vite:config   plugins: [
  vite:config     'alias',
  vite:config     'vite:react-babel',
  vite:config     'vite:react-refresh',
  vite:config     'vite:react-jsx',
  vite:config     'vite:modulepreload-polyfill',
  vite:config     'vite:resolve',
  vite:config     'vite:html-inline-script-proxy',
  vite:config     'vite:css',
  vite:config     'vite:esbuild',
  vite:config     'vite:json',
  vite:config     'vite:wasm',
  vite:config     'vite:worker',
  vite:config     'vite:asset',
  vite:config     'vite:define',
  vite:config     'vite:css-post',
  vite:config     'vite:build-html',
  vite:config     'commonjs',
  vite:config     'vite:data-uri',
  vite:config     'rollup-plugin-dynamic-import-variables',
  vite:config     'vite:asset-import-meta-url',
  vite:config     'vite:build-import-analysis',
  vite:config     'vite:esbuild-transpile',
  vite:config     'vite:reporter',
  vite:config     'vite:load-fallback'
  vite:config   ],
  vite:config   build: {
  vite:config     target: [ 'es2019', 'edge88', 'firefox78', 'chrome87', 'safari13.1' ],
  vite:config     polyfillModulePreload: true,
  vite:config     outDir: 'dist',
  vite:config     assetsDir: 'assets',
  vite:config     assetsInlineLimit: 4096,
  vite:config     cssCodeSplit: false,
  vite:config     sourcemap: false,
  vite:config     rollupOptions: { external: [Array] },
  vite:config     minify: 'esbuild',
  vite:config     terserOptions: {},
  vite:config     write: true,
  vite:config     emptyOutDir: null,
  vite:config     manifest: false,
  vite:config     lib: {
  vite:config       entry: '/home/murtaza/training/my-vue-app/src/index.js',
  vite:config       name: 'Common',
  vite:config       fileName: [Function: fileName]
  vite:config     },
  vite:config     ssr: false,
  vite:config     ssrManifest: false,
  vite:config     reportCompressedSize: true,
  vite:config     chunkSizeWarningLimit: 500,
  vite:config     watch: null,
  vite:config     commonjsOptions: { include: [Array], extensions: [Array] },
  vite:config     dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] }
  vite:config   },
  vite:config   resolve: { dedupe: [ 'react', 'react-dom' ], alias: [ [Object], [Object] ] },
  vite:config   optimizeDeps: {
  vite:config     include: [ 'react/jsx-dev-runtime' ],
  vite:config     esbuildOptions: { keepNames: undefined, preserveSymlinks: undefined }
  vite:config   },
  vite:config   configFile: '/home/murtaza/training/my-vue-app/vite.config.js',
  vite:config   configFileDependencies: [ 'vite.config.js' ],
  vite:config   inlineConfig: {
  vite:config     root: undefined,
  vite:config     base: undefined,
  vite:config     mode: undefined,
  vite:config     configFile: undefined,
  vite:config     logLevel: undefined,
  vite:config     clearScreen: undefined,
  vite:config     build: {}
  vite:config   },
  vite:config   root: '/home/murtaza/training/my-vue-app',
  vite:config   base: '/',
  vite:config   publicDir: '/home/murtaza/training/my-vue-app/public',
  vite:config   cacheDir: '/home/murtaza/training/my-vue-app/node_modules/.vite',
  vite:config   command: 'build',
  vite:config   mode: 'production',
  vite:config   isProduction: false,
  vite:config   server: { fs: { strict: undefined, allow: [Array] } },
  vite:config   env: {
  vite:config     VITE_APP_TITLE: 'My App (local)',
  vite:config     BASE_URL: '/',
  vite:config     MODE: 'production',
  vite:config     DEV: true,
  vite:config     PROD: false
  vite:config   },
  vite:config   assetsInclude: [Function: assetsInclude],
  vite:config   logger: {
  vite:config     hasWarned: false,
  vite:config     info: [Function: info],
  vite:config     warn: [Function: warn],
  vite:config     warnOnce: [Function: warnOnce],
  vite:config     error: [Function: error],
  vite:config     clearScreen: [Function: clearScreen],
  vite:config     hasErrorLogged: [Function: hasErrorLogged]
  vite:config   },
  vite:config   createResolver: [Function: createResolver]
  vite:config } +5ms
vite v2.6.5 building for production...
✓ 3 modules transformed.
[rollup-plugin-dynamic-import-variables] Unexpected token (47:6)
file: /home/murtaza/training/my-vue-app/src/components/UmaiButtonDemo/index.js:47:6
error during build:
SyntaxError: Unexpected token (47:6)
    at Parser.pp$5.raise (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:19495:13)
    at Parser.pp.unexpected (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:16820:8)
    at Parser.pp$4.parseExprAtom (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:18870:10)
    at Parser.pp$4.parseExprSubscripts (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:18662:19)
    at Parser.pp$4.parseMaybeUnary (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:18628:17)
    at Parser.pp$4.parseExprOps (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:18561:19)
    at Parser.pp$4.parseMaybeConditional (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:18544:19)
    at Parser.pp$4.parseMaybeAssign (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:18512:19)
    at Parser.pp$4.parseFunctionBody (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:19297:22)
    at Parser.pp$4.parseArrowExpression (/home/murtaza/training/my-vue-app/node_modules/rollup/dist/shared/rollup.js:19282:8)

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[github-actions]

Hello @m-nathani. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with need reproduction will be closed if they have no activity within 3 days.

[m-nathani]

Hii guys... i found the solution to the problem.. its not very clear in the docs.. but we cannot use .js file for jsx / react components

so any file that has jsx need to be renamed to .jsx and it worked. 😃 . Moreover, there are ways to use jsx in .js files.. but i would recommend to follow the vite build processes and use correct file formats.

Happy coding!