I'm working on a project that is built as an isomorphic React app using Redux, and webpack as well. I'm new to all of these technologies, and I would like to load 2 files into webpack for syntax highlighting in one of my react components.
In addition to these technologies the project is also built using React Helmet to manage the document head.
Having not used webpack all that much before I tried adding the reference to my two files in the head and body blocks as such:
<script src="path/to/file/fileName.js" type="text/javascript"></script>
however that throws the following error:
Uncaught SyntaxError: Unexpected token <
I've also tried adding it to my React Helmet config as a script...
script: [
{"src": "path/to/file/fileName.js", "type": "text/javascript"}
],
...but I'm getting the same error
How can I load this file into my webpack bundle so it is available across the app without it having to be required by a specific component?
I think you can use import or require in your code and webpack add that file to bundle. File will be AMD or Common.js module.
Related
I'm working in mono-repo environment so I created package which i can share between my frontend and backend services.
I have generated react app through CRA with typescript template, I can import typescript files with typescript syntax totally fine when files are located in my frontend app.
But when I try to import typescript file from custom library I created, I get the following error
Module parse failed: Unexpected token (16:10)
File was processed with these loaders:
* ../../node_modules/#pmmmwh/react-refresh-webpack-plugin/loader/index.js
* ../../node_modules/source-map-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
|
> const test: number = 0
When I remove typescript syntax from file the import works.
I tried using tsc to transpile typescript into javascript. Importing javascript files also works
I am new to Electron, and I have been having some trouble trying to do something simple in an Electron + React application. All I want to do is: Load a 3D model (.glb) located in my src/assets directory from a React component. I created the project using this guide. In a typical React project, I can just import the file directly in my JS module and reference the path in my code. However, with the default Webpack config, the file can't be found. There's obviously a gap in my understanding on how React + Webpack work when loading assets. What am I missing? Any help is greatly appreciated.
Thanks!
Turns out, the Webpack documentation spells out the answer clearly. Who knew? I found a lot of similar questions/answers for older versions of Webpack, so I'll post one here for Webpack 5. It requires a trivial two-line addition to the webpack.rules.js file:
{
test: /\.(png|jpg|gif|svg|glb)$/,
type: 'asset/resource'
}
The key is the asset/resource line. It's new to Webpack 5 and allows the bundling of assets without needing any additional loaders. With that, assets can be included as Javascript modules and Webpack will take care of the rest.
So, one can do:
import modelSrc from "../assets/some_awesome_model.glb";
And that's that. Webpack will spit out a URL such as /9feee593dc369764dd8c.glb, meaning Webpack has located and processed the asset.
I am trying to import 'angular-ui-bootstrap' in the vendor.ts file.
I keep getting can not resolve angular-ui-bootstrap.
Any suggestions on how to get around this problem.
I want to remove the reference from my index.html and move it to the Vendor.ts file which webpack uses to bundle vendor files.
Thanks
I am totally new to React JS or any given server-side technology. And now, I want to learn how to develop in React JS.
Introduction
I started with React JS tutorials on official website. Now, I am trying to import React toolbox or any other third-party component into my JSX code. But, I am facing the problem of uncaught exception error: require not defined.
When I searched about it, I came to know about various build mechanisms(browserify, webpack, gulp), to which I was totally new(again). After reading about these, and seeing some examples, I was able to let my browser compile require() statements written in my .jsx files.
Problem
What I am trying to do is:
Write a .html file.
Start it via my server.js file.
Add a <script> tag in it, which will inject my .jsx code into my .html file.
The examples that I have seen so far (1, 2, and some other...) load a .js file in the beginning and write their .html code in .jsx files (render() function).
Question
Is it possible to load a .html file from server.js and use .jsx from a <script> tag in that .html file? Something like this:
<html>
.
.
<body>
<div id="container"></div>
<script src="path_to_reactjs_file"></script>
</body>
</html>
I am sorry if this sounds like totally dumb question, but because of being totally new to this technology, I am not able to understand how I should go about it.
Any help would be appreciated.
Sounds like there might be an issue with file name extensions, Browserify only understands .js and .json extensions, unless you tell it otherwise.
$ browserify --extension jsx src/main.js > bundle.js
Babel with the right transforms will automatically do this for you as part of its module transpilation.
$ browserify src/main.js -t [ babelify --presets [ es2015 react ] ] > bundle.js
Note that this assumes your entry point has a .js file extension, if it was .jsx you'd have to set the extension type.
This config can be simplified by adding the config to your package.json
{
babel: {
presets: [ 'es2015', 'react' ]
}
},
{
browserify: {
transform: 'babelify'
}
}
Without bundling, you can not include jsx to html directly, but you can create components without jsx syntax (use plain js) and it will work.
first thing to note...
Browser can understand only HTML, CSS and plain javascript.
If you are providing JSX to browser, it fails to parse it. So you need to use a package bundler such as webpack. this converts all your JSX, typescript, Sass files into javascript(bundle.js) file. You can give this bundle.js file in the .html file
Is it possible to use react with ReactRouter, without using browserify or webpack.
I am following the documentation from http://rackt.github.io/react-router they require react and react-router (require('react-router');). If I use browerifly my generated bundle is about 1MB filesize, which sounds like a lot.
So is it possible to get reactrouter working with including compiled JS from a CDN like https://cdnjs.cloudflare.com/ajax/libs/react-router/0.13.3/ReactRouter.js, instead of bundle all requirements by myself ? If i try to make it work with a CDN, I get an error that Route is not defined. But it looks like it is exported in the cdn file.
I would like to compile my JSX/ES6 react components include the ReactRouter and react JS-files from a cdn and only bundle my components into a new js file.
Is this possible or is browserify and webpack the right way to setup the project ? (I looked at several github repos). I got some doubts because there is no installation guide on http://rackt.github.io/react-router/
like this pseudo html:
<head>
CND :include react, react-router
my code combinded.js
</head>
When you're using the prebuilt version from the CDN, the library is exported onto window.ReactRouter. So, Route is defined on window.ReactRouter.Route.
Since React Router also depends on React, using the CDN/browser build will also require that React is available on window.React.
That said, the CDN version you linked to is, itself, generated with webpack, so I don't expect that you'd gain any file size improvements. You might look into minification/dead code elimination on your browserify bundle to see if it decreases the file size.
One additional info I want to share is the possibility to use externals (https://webpack.github.io/docs/library-and-externals.html) in webpack config.
I use it as following:
externals: {
"react": "React",
"react/addons": "React",
"reflux" : "Reflux"
}
this results in a smaller bundle and you can use react from a CDN as asked in my question. This also decreases the buildtime with gulp.