Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Inability to build apps for production using a simple rollup transform plugin (specifically rollup-plugin-string)

See original GitHub issue

Describe the bug

There seems to be a bug where using a very simple rollup transform plugin works during development, but causes building during production to fail.

I have tried this with both rollup-plugin-string and my own custom version of it with the same exact results.

Reproduction

Repository: https://github.com/nerdo/vite-issues/tree/vite-html-plugin-interferes-with-build-when-rollup-plugin-string-is-present

Steps to reproduce:

# npm i
# npm run dev # everything should work fine at this point; the template (just a copy of index.html) should get logged to the console
^C

# npm run build # does not execute successfully - see logs below

System Info

Output of npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers:

npx envinfo --system --npmPackages vite,@vitejs/plugin-vue --binaries --browsers
npx: installed 1 in 0.627s

  System:
    OS: Linux 5.11 Arch Linux
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 1.14 GB / 31.20 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Firefox: 88.0
  npmPackages:
    vite: ^2.1.5 => 2.2.1

Used package manager: npm

Logs

# npm run build
> issue-vite-build-with-rollup-plugin-string@0.0.0 build /home/nerdo/code/issue-vite-build-with-rollup-plugin-string
> vite build

vite v2.2.1 building for production...
✓ 3 modules transformed.
[vite:build-html] Unable to parse {"file":"/home/nerdo/code/issue-vite-build-with-rollup-plugin-string/template.html","line":1,"column":46}
1  |  export default "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"favicon.svg\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/main.js\"></script>\n  </body>\n</html>\n";
   |                                               ^
file: /home/nerdo/code/issue-vite-build-with-rollup-plugin-string/template.html
error during build:
Error: Unable to parse {"file":"/home/nerdo/code/issue-vite-build-with-rollup-plugin-string/template.html","line":1,"column":46}
1  |  export default "<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"icon\" type=\"image/svg+xml\" href=\"favicon.svg\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Vite App</title>\n  </head>\n  <body>\n    <div id=\"app\"></div>\n    <script type=\"module\" src=\"/main.js\"></script>\n  </body>\n</html>\n";
   |                                               ^
    at traverseHtml (/home/nerdo/code/issue-vite-build-with-rollup-plugin-string/node_modules/vite/dist/node/chunks/dep-5c642f9e.js:24013:15)
    at async Object.transform (/home/nerdo/code/issue-vite-build-with-rollup-plugin-string/node_modules/vite/dist/node/chunks/dep-5c642f9e.js:24065:17)
    at async ModuleLoader.addModuleSource (/home/nerdo/code/issue-vite-build-with-rollup-plugin-string/node_modules/rollup/dist/shared/rollup.js:18403:30)
    at async ModuleLoader.fetchModule (/home/nerdo/code/issue-vite-build-with-rollup-plugin-string/node_modules/rollup/dist/shared/rollup.js:18459:9)
    at async Promise.all (index 1)
    at async ModuleLoader.fetchStaticDependencies (/home/nerdo/code/issue-vite-build-with-rollup-plugin-string/node_modules/rollup/dist/shared/rollup.js:18485:34)
    at async Promise.all (index 0)
    at async ModuleLoader.fetchModule (/home/nerdo/code/issue-vite-build-with-rollup-plugin-string/node_modules/rollup/dist/shared/rollup.js:18461:9)
    at async Promise.all (index 1)
    at async ModuleLoader.fetchStaticDependencies (/home/nerdo/code/issue-vite-build-with-rollup-plugin-string/node_modules/rollup/dist/shared/rollup.js:18485:34)

This seems like it could be related to #2644

Issue Analytics

State:
Created 2 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

patak-devcommented, Apr 23, 2021

@nerdo if you have not joined yet, we have a very active community in Discord where you can also discuss with others: https://chat.vitejs.dev

0reactions

nerdocommented, Apr 23, 2021

False alarm. I’ll have to spend more time to figure out what is happening with ?raw, but I agree, it should work.

Top Results From Across the Web

rollup/05-plugin-development.md at master - GitHub

A Rollup plugin is an object with one or more of the properties, build hooks, and output generation hooks described below, and which...

rollup.js

Import a specific item from a source module, with its original name. ... This is useful for code-splitting applications and using modules on-the-fly....

How to Bundle JavaScript With Rollup — Step-by-Step Tutorial

Rollup is a next-generation JavaScript module bundler. Author your app or library using ES2015 modules, then efficiently bundle them up into a single...

How do I configure Rollup for a React Component Library?

I'm trying to configure Rollup for a React component library (using v3), and am having a real fight. I don't know exactly what...

rollup | Yarn - Package Manager

rollup changelog. 3.8.1. 2022-12-23. Bug Fixes. Reduce memory footprint when explicitly passing cache: false (#4762); Fix a crash when preserving modules ...