Repository: codesandbox/codesandbox-client (language: javascript)

Issue:
HTML mimetype no longer supported ??
# 🐛 bug report

## Preflight Checklist

<!-- Please ensure you've completed the following steps by replacing [ ] with [x]-->

- [x] I have read the [Contributing Guidelines][contributing] for this project.
- [x] I agree to follow the [Code of Conduct][code_of_conduct] that this project
      adheres to.
- [x] I have searched the issue tracker for an issue that matches the one I want
      to file, without success.

## Description of the problem
When in a react project, requiring or importing an html file within the same project to use within a component now returns 
`data:application/octet-stream;base64,.......etc.`

## How has this issue affected you? What are you trying to accomplish?

Before, I was able to import html template files dynamically and use within a component just fine, but something must have changed where the build no longer knows how to handle .html file contents?

### To Reproduce

- Create a React Project
- Create an HTML file with some inner-page content like the following
```
<h1>Test test test</h1>
<p>This is a html file of testing</p>
<p>This should technically be able to import and use in a component in react</p>
```
- Within the App.js file
    - remove all inner default content
    - import your test html file like the following
    `import HtmlContent from "./test.html";`
    - add to the main class="App" div the following attribute example to be used within the div
`dangerouslySetInnerHTML={{__html: HtmlContent}}`

### [Link to Test Case Project](https://codesandbox.io/s/magical-ives-u7b8u?file=/src/App.js)
https://codesandbox.io/s/magical-ives-u7b8u?file=/src/App.js

### Your Environment

| Software         | Name/Version |
| ---------------- | ------------ |
| Сodesandbox      |       yes?       |
| Browser          |       Chrome       |
| Operating System |     MacOS 11.6       |

<!-- prettier-ignore-start -->
[code_of_conduct]: https://github.com/codesandbox/codesandbox-client/blob/master/CODE_OF_CONDUCT.md
[contributing]: https://github.com/codesandbox/codesandbox-client/blob/master/CONTRIBUTING.md
<!-- prettier-ignore-end -->



Discussion / hints:
This got changed here: https://github.com/codesandbox/codesandbox-client/commit/e41dc0014e32c45ee4c828e05422721a085d34c5#diff-e18b6362bb5fa09d0f2f3478a7d6f45828670cf2a971fcd61ce5fae8665fda95L168 we should probably exclude html from the base64 transpiler as that should still be a link, will change it in a couple minutes

Fix patch:
diff --git a/packages/app/src/sandbox/eval/presets/create-react-app/utils/reactPreset.ts b/packages/app/src/sandbox/eval/presets/create-react-app/utils/reactPreset.ts
index 7c6607ce4fb..438a8a21552 100644
--- a/packages/app/src/sandbox/eval/presets/create-react-app/utils/reactPreset.ts
+++ b/packages/app/src/sandbox/eval/presets/create-react-app/utils/reactPreset.ts
@@ -9,6 +9,7 @@ import lessTranspiler from '../../../transpilers/less';
 import postcssTranspiler from '../../../transpilers/postcss';
 import svgrTranspiler from '../../../transpilers/svgr';
 import reactSvgTranspiler from '../../../transpilers/react-svg';
+import rawTranspiler from '../../../transpilers/raw';
 
 import {
   hasRefresh,
@@ -162,6 +163,10 @@ export const reactPreset = babelConfig => {
             { transpiler: jsonTranspiler },
           ]);
 
+          preset.registerTranspiler(module => /\.html$/.test(module.path), [
+            { transpiler: rawTranspiler },
+          ]);
+
           preset.registerTranspiler(() => true, [
             { transpiler: base64Transpiler },
           ]);


Test patch: