I have an HTML template as a separate file that I would like to import into my react application. The intention will be replacing specific keywords and then sending it as the body in an email.
How can I import this html file into my react application?
I have tried import htmlString from '../../../constants/EmailHTML.html'; as well as var html = require('../../../constants/EmailHTML.html'); (which was suggested in this similar question)
I get the following error for both attempts:
Module parse failed: Unexpected token (1:0) You may need an
appropriate loader to handle this file type, currently no loaders are
configured to process this file.
Effectively this question boils down to: How do I import a text file as a string in React? This is an often-answered question and all the results seem to be to use an async loader -- something that shouldn't really need to happen given the file is in my src directory ready to go before build.
Answer for create-react-app:
Install the raw-loader package npm i --save raw-loader
Add a test HTML file you want read to src. I added test.html.
Add the lines below where you want to get the contents of the HTML file into a JavaScript string. html will contain the string contents of the file.
Code:
// eslint-disable-next-line import/no-webpack-loader-syntax
var htmlModule = require('raw-loader!./test.html');
var html = htmlModule.default;
Related
I'm using a library vtk.js. VTK has a special design of classes (https://kitware.github.io/vtk-js/docs/develop_class.html). When I write a class I need to import macro.js module which exposes several base methods such as getters/setters/newInstance etc (https://github.com/Kitware/vtk-js/blob/master/Sources/macro.js).
Looks like CRA uses some special loader for macro.js files. I get an error when trying to import such a file (SyntaxError: Cannot use import statement outside a module). If I copy an original file macro.js from #kitware/vtk.js to my local source folder I still get an error. Even if I remove all the contents of macro.js file I get an error (The macro imported from "../macro" must be wrapped in "createMacro" which you can get from "babel-plugin-macros". Please refer to the documentation to see how to do this properly: https://github.com/kentcdodds/babel-plugin-macros/blob/master/other/docs/author.md#writing-a-macro). However, when I rename macro.js to macro2.js the error is gone.
Is there some way how can I disable this macro loader?
Here is my folder structure
when i tried to run my react app it give me this error
Failed to compile.
./src/css/owl.html 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
I tried google it and it says i need to create manual loader to load my html file. It is regarding to webpack but I don't know how and where I configure loader to load the owl.html file.
Short answer:
No, you can not simply convert your HTML/CSS/JS in to React JS through a plugin.
There is no need of webpack her, as it is already provided and packed by create-react-app, you can simple create a component of your page template provided.
Long Answer:
React project architecture says, One has to create a React JS component for every UI page/segment/section/widget. So for creating a page in react from the html file provided you simple has to crate a component file called Owl.js in the components folder.
In the Owl.js write the following:
import React from 'react';
export default () => {
return (
<React.Fragment>enter code here
// paste the code from your owl.html file. (everything that is written under <body>)
</React.Fragment>
)
}
Use this newly created component in the App.js you have by importing it into.
Also use the css by importing it simply in the Owl.js file, like this:
import '~you-path~/owl.css';
And finally to make all the JS written in owl.js you have to carefully integrate the functions, listeners and data you are using in the newly created component out of the return statement.
I hope this clears the confusion here.
I am trying to import a local pdf file in my vue project (bootstrapped using vue-cli#latest, using default config) but vue tries to parse it and gives this error:
./src/assets/myFile.pdf 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
I just want to make the file available for download from a button click so I don't need to parse it but I need it to go through webpack so that the filename will get hashes, hence I want to avoid putting it in public folder and use env.BASE_URL.
Here the my .vue file for the component.
<template>
<div class="root">
<a
v-bind:href="MyPdf"
download='Something.pdf'
>
Download as pdf
</a>
</div>
</template>
<script>
import MyPdf from '../assets/my.pdf';
export default {
name: "PdfDownload",
data: function () {
return { MyPdf }
}
}
</script>
<style scoped>
...
</style>
I found similar questions on SO, but none of the answers solve the problem. I only solution I found was on vue docs to use public folder but I don't want that because I want hashes in filename. I am new to vue, I come from React, and in React you can simply import a pdf, word etc. file in js and use it in href of a and users can view/download it.
You don't have to import it. Just create a <a> tag with correct URL to your pdf file.
You can check if the path is correct downloading directly in the browser before.
Edit:
In case you are facing the same problem and you are using webpack, you have to make sure you are using a loader for the pdf extension. In this case, the user was using vue-cli, and the way to change webpack config is on vue.config.js. I created a gist to show how add it.
Hello there I'm importing a dynamic file with require, but my file is outside of /src so I check a post that say if I comment two lines in ./node_modules/react-scripts/config/webpack-config.js
I can access to files outside of /src, the problem is that if I do this works fine:
Show PDF
but if i want to be dynamic receiving the path through props i get this error:
Error: Cannot find module '../../../../../files/asd.pdf'
Where my code is this and this.state.fullPath is the same of before.
Show PDF
I try concatenating a empty string but still not working
This is a problem that relates to the module bundler that you are using. In order for it to work, the require function has to get a path which the bundler will use to import the module at build time rather than runtime. You will need to use require using the full path and not a variable.
You can try something like:
const one = require('./path/to/one.pdf');
const two = require('./path/to/two.pdf');
const href = variable === 1 ? one : two;
Show PDF
When experimenting with the brython project, running "scripts/make_dist" always gets an error:
File "../scripts/make_dist.py", line 14, in <module>
import make_doc # lint:ok
File "/home/.../brython-3.1.1/scripts/make_doc.py", line 42, in <module>
html, scripts = markdown.mark(src)
AttributeError: 'module' object has no attribute 'mark'
The problem is caused by the file github.com/brython-dev/brython/scripts/make_doc.py.
While looking deeper, the "Lib/browser/markdown.py" or "Lib/markdown2.py" under its "www/src/" do contain a function "mark()" in each of them. Though those files are tailored for running inside a browser, cannot be used on a host/unix environment.
Which "markdown" version contains such a "mark()" function? Where are those brython markdown/markdown2 files derived from? How do you run "make_dist.py"?
It's hard to be sure, but you might have a module "markdown" in your Python distribution. In this case, import markdown would import this module, not the one provided by Brython.
Just add print(markdown) after the line import markdown to check which module is imported.
I will change make_doc.py to make sure the correct module is imported.