config.define incorrectly escapes -

[adrianhelvik]

Describe the bug

  define: {
    " from 'styled-components'": " from 'styled-components/macro'",
  }

SyntaxError: Invalid regular expression: /(?<![\p{L}\p{N}_$]|(?<!\.\.)\.)(process\.env\.NODE_ENV|global\.process\.env\.NODE_ENV|globalThis\.process\.env\.NODE_ENV|__vite_process_env_NODE_ENV| from 'styled\-components'|process\.env\.|global\.process\.env\.|globalThis\.process\.env\.)(?![\p{L}\p{N}_$]|\s*?=[^=])/: Invalid escape

Removing - in dist/node/chunks/dep-0fc8e132.js fixes the problem:

                    return str.replace(/[-[\]/{}()*+?.\\^$|]/g, '\\$&');

I'm on vite@3.0.9

Reproduction

https://stackblitz.com/edit/vitejs-vite-vvdzuy?file=vite.config.js

System Info

System:
    OS: macOS 11.6.4
    CPU: (8) arm64 Apple M1
    Memory: 114.94 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.17.0 - /usr/local/bin/node
    Yarn: 1.22.15 - ~/.yarn/bin/yarn
    npm: 8.12.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 104.0.5112.101
    Firefox: 104.0.1
    Safari: 14.1.2
  npmPackages:
    @vitejs/plugin-react: ^2.0.1 => 2.0.1
    vite: ^3.0.9 => 3.0.9

Used Package Manager

yarn

Logs

Click to expand!

error when starting dev server:
SyntaxError: Invalid regular expression: /(?<![\p{L}\p{N}_$]|(?<!\.\.)\.)(process\.env\.NODE_ENV|global\.process\.env\.NODE_ENV|globalThis\.process\.env\.NODE_ENV|__vite_process_env_NODE_ENV| from 'styled\-components'|process\.env\.|global\.process\.env\.|globalThis\.process\.env\.)(?![\p{L}\p{N}_$]|\s*?=[^=])/: Invalid escape
    at new RegExp (<anonymous>)
    at generatePattern (file:///Users/<project-url>/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:60374:15)
    at definePlugin (file:///Users/<project-url>/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:60389:28)
    at resolvePlugins (file:///Users/<project-url>/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:62253:9)
    at resolveConfig (file:///Users/<project-url>/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:62817:30)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async createServer (file:///Users/<project-url>/node_modules/vite/dist/node/chunks/dep-0fc8e132.js:59183:20)
    at async CAC.<anonymous> (file:///Users/<project-url>/node_modules/vite/dist/node/cli.js:699:24)
error Command failed with exit code 1.

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 vuejs/core 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.

[jonaskuske]

The define functionality currently doesn't work as a generic search-and-replace solution, it's only meant to "define global constant replacements". That's also why your proposed fix only works in build mode: the dev server doesn't perform any text replacements at all but instead defines global variables: https://github.com/vitejs/vite/blob/main/packages/vite/src/client/env.ts. (which, like all JS identifiers, mustn't contain dashes)

For a generic search-and-replace functionality, try something like vite-plugin-replace or write your own transform method in a plugin.

[jonaskuske]

Anyhow, here's a fix: #9980

But as I said, it'll only work in build mode as there are no text replacements in dev mode

[adrianhelvik]

I see. That was a bit unclear to me. Great that you're fixing the incorrect RegExp though. 👍

[tony19]

Your original config looks like it's just trying to create an alias. You can do that with resolve.alias:

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      'styled-components': 'styled-components/macro',
    }
  }
})

[adrianhelvik]

Yeah, I tried that, but babel did not recognize the import as a macro when I did that. I ended up using the macro explicitly on an as needed basis. The code works fine without the macro. Class names are just less readable.

Hardly the biggest issue with migrating a large 6 year old ejected CRA application to Vite without messing up pull requests. 😄 I managed to do it though!