This error occurs when a project is build.
I think it's because I don't have a react-static build, but I don't know the error.
package.json
"dependencies": {
"#reach/router": "^1.2.1",
"aos": "^2.3.4",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.1.2",
"react-static": "^7.2.0",
"react-static-plugin-reach-router": "^7.2.0",
"react-static-plugin-sass": "^7.2.2",
"react-static-plugin-sitemap": "^7.2.0",
"react-static-plugin-source-filesystem": "^7.2.0",
....
},
build command:
yarn build
(but react-static build command is react-static build)
error
ReferenceError: Failed exporting HTML for URL / (/Users/youj/projects/project_name/src/pages/index.js): document is not defined
- aos.js:1 n
[project_name]/[aos]/dist/aos.js:1:14577
- aos.js:1 Object._ [as init]
[project_name]/[aos]/dist/aos.js:1:1530
- static-app.js:1850 MainFunction
/Users/youj/projects/project_name/artifacts/static-app.js:1850:26
- react-dom-server.node.production.min.js:36 d
[project_name]/[react-dom]/cjs/react-dom-server.node.production.min.js:36:498
- react-dom-server.node.production.min.js:39 Za
[project_namee]/[react-dom]/cjs/react-dom-server.node.production.min.js:39:16
- react-dom-server.node.production.min.js:44 a.b.render
[project_name]/[react-dom]/cjs/react-dom-server.node.production.min.js:44:476
- react-dom-server.node.production.min.js:44 a.b.read
[project_name]/[react-dom]/cjs/react-dom-server.node.production.min.js:44:18
- react-dom-server.node.production.min.js:54 renderToString
[project_name]/[react-dom]/cjs/react-dom-server.node.production.min.js:54:364
- exportRoute.js:137 renderToStringAndExtract
[project_name]/[react-static]/src/static/exportRoute.js:137:21
- exportRoute.js:194 _callee$
[project_name]/[react-static]/src/static/exportRoute.js:194:15
tree
├──src
├──index.js (render app.js)
├── pages
│ ├── 404.js
│ └── index.js (call view components)
It is aos error!
This has been settled.
if (process.browser) {
AOS.init({
duration: 600,
easing: 'ease-in-cubic',
delay: 1200,
anchorPlacement: 'bottom-bottom',
});
}
Related
I have migrate the Metronic template from using CRA (Create React App) to Vite, and everything is working well but the SASS files are throwing an error.
This are the dependencies I am using in the project:
"dependencies": {
"#formatjs/intl-pluralrules": "^5.1.8",
"#formatjs/intl-relativetimeformat": "^11.1.8",
"#fortawesome/fontawesome-free": "^6.2.1",
"#popperjs/core": "^2.11.6",
"animate.css": "^4.1.1",
"apexcharts": "^3.36.3",
"axios": "^1.2.4",
"bootstrap": "^5.2.3",
"bootstrap-icons": "^1.10.3",
"chart.js": "^4.2.0",
"clsx": "^1.2.1",
"formik": "^2.2.9",
"line-awesome": "^1.3.0",
"nouislider": "^15.6.1",
"prism-react-renderer": "^1.3.5",
"prism-themes": "^1.9.0",
"prismjs": "^1.29.0",
"qs": "^6.11.0",
"react": "^18.2.0",
"react-apexcharts": "^1.4.0",
"react-bootstrap": "^2.7.0",
"react-copy-to-clipboard": "^5.1.0",
"react-dom": "^18.2.0",
"react-inlinesvg": "^3.0.1",
"react-intl": "^6.2.5",
"react-query": "^3.39.3",
"react-router-dom": "^6.7.0",
"react-table": "^7.8.0",
"react-topbar-progress-indicator": "^4.1.1",
"sass": "^1.57.1",
"socicon": "^3.0.5",
"yup": "^0.32.11"
},
I have read that to use SCSS files in REACT I just need to install the sass package but I already have installed and the problem does not seems to be solved.
The exact error comes when importing this dependencies in a sass file:
// React vendors
#import '~socicon/css/socicon.css';
#import '~#fortawesome/fontawesome-free/css/all.min.css';
#import '~line-awesome/dist/line-awesome/css/line-awesome.css';
#import '~prism-themes/themes/prism-shades-of-purple.css';
#import '~bootstrap-icons/font/bootstrap-icons.css';
#import '~animate.css/animate.css';
Once I run the app Vite throws an error saying:
[vite] Internal server error: [postcss] Failed to find '~#fortawesome/fontawesome-free/css/all.min.css'
And when I go to node modules, the package is there, but SASS is unable to find it. Do you have you any solutions for this or have you ran in this issue too?
Btw, when commenting one line the next one throws the same error and so on.
Try to remove all ~ (tilde) from the import:
before:
#import '~socicon/css/socicon.css';
after:
#import 'socicon/css/socicon.css';
Because, vite use postCss instead of webpack
Overview
I use the gatsby environment.
Since graphql is used in gatsby, useStaticQuery is used.
It works fine in the development environment(gatsby develop), In the environment after building(gatsby build && gatsby serve), an error like the title has occurred.
Error Text
Error: The result of this StaticQuery could not be fetched.
This is likely a bug in Gatsby and if refreshing the page does not fix it, please open an issue in https://github.com/gatsbyjs/gatsby/issues
Error code
const data = useStaticQuery(
graphql`
query {
allArticle(sort: { order: DESC, fields: updatedAt___seconds }) {
edges {
node {
category
id
thumbnail
title
createdAt {
seconds
}
}
}
}
allRanking {
edges {
node {
id
category
title
thumbnail
}
}
}
}
`
)
※ Since it worked correctly in secret mode, I wonder if something is wrong with the cache.
What I tried
Delete gatsby
$ yarn remove gatsby
$ rm -rf node_modules
$ yarn install
$ gatsby build && gatsby serve
exec gatsby clean command
$ gatsby clean
change component name and file
https://github.com/gatsbyjs/gatsby/issues/24902#issuecomment-847926225
delete .cache file
my environment
OS : MacOS
package.json
"dependencies": {
"firebase": "^8.6.7",
"gatsby": "^3.6.2",
"gatsby-plugin-advanced-sitemap": "^2.0.0",
"gatsby-plugin-clarity": "^1.0.0",
"gatsby-plugin-dark-mode": "^1.1.2",
"gatsby-plugin-google-adsense": "^1.1.3",
"gatsby-plugin-google-gtag": "^3.7.1",
"gatsby-plugin-manifest": "^3.6.0",
"gatsby-plugin-offline": "^4.6.0",
"gatsby-plugin-react-helmet": "^4.6.0",
"gatsby-plugin-twitter": "^3.12.0",
"gatsby-source-filesystem": "^3.7.1",
"react": "^17.0.1",
"react-calendar-heatmap": "^1.8.1",
"react-copy-to-clipboard": "^5.0.4",
"react-dom": "^17.0.1",
"react-helmet": "^6.1.0",
"react-lazyload": "^3.2.0",
"react-markdown": "5.0.3",
"react-scroll": "^1.8.2",
"react-slick": "^0.28.1",
"react-syntax-highlighter": "^15.4.3",
"react-tooltip": "^4.2.21",
"remark-gfm": "^1.0.0",
"slick-carousel": "^1.8.1",
"typescript": "^4.3.2"
},
It's difficult to guess what's going on, as you pointed it seems related to cache issues, however, you've tried all the cache-related stuff. I'd suggest:
Remove gatsby-plugin-offline and add gatsby-plugin-remove-serviceworker since you won't be using service-workers anymore
Check the importation path. It should be:
import { useStaticQuery } from 'gatsby';
Check the SEO component naming and importation (i.e: Seo.js or SEO.js). The same applies for Layout
I'm trying to import the createjs lib into my react project.
So I installed it via npm install createjs --save
And there is a folder called createjs in node_modules.
But when I try to import it with require("createjs") it says:
"Module not found: Can't resolve 'createjs.js' in '...client/src'"
my package.json looks like this:
"dependencies": {
"createjs": "^1.0.1",
"createjs-easeljs": "^0.8.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-nav2djs": "0.0.3",
"react-scripts": "3.0.1",
"ros2d": "^0.9.0",
"roslib": "^1.0.1",
"vb-react-nav2djs": "0.0.4"
}
What am I doing wrong?
I'm writing an application based on Symfony4 and ReactJS and I'm using the webpack encore to build a bundle. Also the node_modules directory is outside the project and is symlinked - probably this is the main culprit but I need to keep node_modules outside the project directory.
The issue that I have is related with using some npm packages (eg. #foes/react-i18n-routing) that consist of React components / HOCs so they need to be transpiled, but babel not doing this and in the result I'm getting the error similar to this:
error in ./node_modules/#foes/react-i18n-routing/dist/esm/component/withI18nRouting.js
Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type.
|
| export default Component => props => (
> <I18nRoutingContext.Consumer>{context => <Component i18nRouting={context} {...props} />}</I18nRoutingContext.Consumer>
| );
As far as I know when I'm using Babel 7 I need to change my .babelrc file to babel.config.js to provide the wide project configuration but this is not enough, I'm still facing with the issue.
Can anyone point me the right direction?
I tried a various of configs and I stopped on setting the babelrcRoots. Maybe this is the key, but I was not able to set this properly.
Here's the directory structure:
ROOT/
├── node_modules/
└── project/
├── assets/
├── package.json
├── babel.config.js
└── webpack.config.js
Here's the babel.config.js
module.exports = function(api) {
api.cache(true);
const presets = ['#babel/preset-env', '#babel/preset-react'];
const plugins = [
'#babel/plugin-proposal-class-properties',
'transform-es2015-modules-commonjs',
'babel-plugin-dynamic-import-node'
];
// const babelrcRoots = ['.', '../node_modules/*']; ????
return {
presets,
plugins
};
};
And here's the webpack.config.js
const Encore = require('#symfony/webpack-encore');
const path = require('path');
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './assets/js/app.jsx')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.cleanupOutputBeforeBuild()
.enableBuildNotifications()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction())
.enableLessLoader()
.enableReactPreset();
let config = Encore.getWebpackConfig();
config.resolve.alias['App'] = path.resolve(__dirname, 'assets/js');
// config.resolve.modules = [path.resolve('./node_modules'), path.resolve('../node_modules')]; here's the another try with no luck
module.exports = config;
And here's the package.json
{
"devDependencies": {
"#babel/preset-react": "^7.0.0",
"#symfony/webpack-encore": "^0.27.0",
"babel-plugin-dynamic-import-node": "^2.2.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"core-js": "^3.0.0",
"less-loader": "^4.1.0",
"prop-types": "^15.7.2",
"webpack-notifier": "^1.6.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.4.4",
"#foes/react-i18n-routing": "^0.8.0",
"enzyme": "^3.9.0",
"enzyme-adapter-react-16": "^1.12.1",
"history": "^4.9.0",
"lodash.flatmap": "^4.5.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-router-dom": "^5.0.0",
"react-router-named-routes": "0.0.23"
}
}
You can try configuring to rootMode:"upward" setting mentioned here like so:
babel --root-mode upward src -d lib
or in webpack
module: {
rules: [{
loader: "babel-loader",
options: {
rootMode: "upward",
}
}]
}
I have a working Node web server in Angular 1 with material design. Now some huge performance issues have hit me and I therefore want to move to Angular 2, which is supposed to have better performance. The Node server is currently set up to use Express with Jade as rendering engine and everything works as expected. My problem is that when configuring the web server for Angular 2, nothing is rendered saying 404 GET /index.html. This is true, but I want to render views/index.jade as before, not a new /index.html file.
Here are the steps I have currently used to upgrade to Angular 2:
Adding all files and requirements from the 5 min quickstart guide.
Run npm install (or similar) to install all the required dependencies.
Fiddled around in lots of files to try to render /views/index.jade instead of /index.html, but I just cannot find the proper place to configure this correctly.
I will list my file structure and the files I believe are important for this. Please let me know if any files need to be added.
Folder structure (non-important files and folders removed):
www
├── app <-- Added for Angular 2
│ ├── app.component.js
│ ├── app.component.js.map
│ ├── app.component.ts
│ ├── main.js
│ ├── main.js.map
│ ├── main.ts
│ └── reflect-metadata
├── app.js <-- Angular 1 main file (now app/main.ts)
├── bin
│ └── www <-- Angular 1: start file run with 'node bin/www'
├── package.json
├── public
│ ├── javascripts
│ │ ├── angular-animate.js
│ │ ├── angular_controllers <-- Angular 1 client side controllers
│ │ │ ├── casesController.js
│ │ │ ├── dataController.js
│ │ │ └── // <snip other controllers>
│ │ ├── angular.js <-- Angular 1 client side
│ │ ├── angular_js.js <-- Angular 2 client side
│ │ ├── angular_js.js.map <-- Angular 2 client side
│ └── stylesheets
│ ├── <snip, not important>
├── routes
│ ├── index.js
│ └── <snip other routes>
├── systemjs.config.js
├── tsconfig.json
├── typings
│ ├── <snip, auto-created>
├── typings.json
└── views
├── index.jade
└── <snip, other jade files>
package.json
{
"name": "MyWebApp",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"dependencies": {
"#angular/common": "2.0.0-rc.2",
"#angular/compiler": "2.0.0-rc.2",
"#angular/core": "2.0.0-rc.2",
"#angular/http": "2.0.0-rc.2",
"#angular/platform-browser": "2.0.0-rc.2",
"#angular/platform-browser-dynamic": "2.0.0-rc.2",
"#angular/router": "2.0.0-rc.2",
"#angular/router-deprecated": "2.0.0-rc.2",
"#angular/upgrade": "2.0.0-rc.2",
"angular": "^1.5.6",
"angular-animate": "^1.5.6",
"angular-aria": "^1.4.8",
"angular-bootstrap": "^0.12.2",
"angular-material": "http://github.com/angular/bower-material/tarball/v1.0.9",
"angular-sanitize": "^1.5.6",
"angular2-in-memory-web-api": "0.0.12",
"body-parser": "~1.12.0",
"bootstrap": "^4.0.0-alpha.2",
"bunyan": "^1.3.5",
"cookie-parser": "~1.3.4",
"core-js": "^2.4.0",
"debug": "~2.1.1",
"es6-shim": "^0.35.1",
"express": "^4.12.4",
"forever-monitor": "^1.6.0",
"graceful-fs": "^3.0.8",
"jade": "~1.9.2",
"jquery": "^2.1.4",
"jquery-ui": "^1.10.5",
"jsdom": "^5.4.1",
"lodash": "^3.9.3",
"moment": "^2.10.6",
"morgan": "~1.5.1",
"node-inspector": "^0.10.2",
"node-sass": "^3.7.0",
"node-sass-middleware": "^0.9.8",
"nodemailer": "^2.3.0",
"pg": "^4.3.0",
"pg-promise": "^1.2.3",
"phantomcss": "^0.10.4",
"prettydiff": "^1.13.6",
"promise": "^7.0.1",
"pug": "^0.1.0",
"reflect-metadata": "^0.1.3",
"request": "^2.62.0",
"resemblejs": "^1.3.1",
"restify": "^3.0.2",
"rxjs": "^5.0.0-beta.6",
"serve-favicon": "~2.2.0",
"systemjs": "0.19.27",
"tether": "^1.1.1",
"zone.js": "^0.6.12"
},
"devDependencies": {
"concurrently": "^2.0.0",
"gulp-jade": "^1.1.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4"
}
}
app/main.ts (mainly copied from app.js used for Angular 1):
import { bootstrap } from '#angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var sassMiddleware = require('node-sass-middleware');
var zone = require('zone');
var reflectmetadata = require('reflect-metadata');
var routes = require('../routes/index');
// <snip, vars for other routes>
var app = express();
// view engine setup
app.set('views', path.join(__dirname, '..', 'views'));
app.set('view engine', 'jade');
// Add serving of static files from folder 'public'.
app.use(express.static(path.join(__dirname, '..', 'public')));
// Working for Angular 1 with Express/Jade
app.use('/', routes);
// <snip, other routes)
// <snip error handlers and other stuff>
module.exports = app;
app/app.components.ts:
import { Component } from '#angular/core';
#Component({
selector: 'my-app', <-- Is this important?
template: '../views/index.jade' <-- I have tried multiple paths here.
})
export class AppComponent { }
routes/index.js:
var express = require('express');
var router = express.Router();
router.get('/', function(req, res) {
res.render('index'); // Also tried '../viwes/index', but it made no difference.
});
module.exports = router;
tsconfig.json, systemjs.config.json, typings.json and similar files are as depicted on the 5 min quickstart guide.
Running this setup using npm start (see package.json) now gives the message Cannot GET / in the browser. What can be wrong with my setup? Console output is as follows:
me#mycomp:~/www$ npm start
> MyWebApp#0.0.0 start /home/me/www
> tsc && concurrently "npm run tsc:w" "npm run lite"
[0]
[0] > MyWebApp#0.0.0 tsc:w /home/me/www
[0] > tsc -w
[0]
[1]
[1] > MyWebApp#0.0.0 lite /home/me/www
[1] > lite-server
[1]
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync config **
[1] { injectChanges: false,
[1] files: [ './**/*.{html,htm,css,js}' ],
[1] watchOptions: { ignored: 'node_modules' },
[1] server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1] -------------------------------------
[1] Local: http://localhost:3003
[1] External: http://192.168.1.1:3003
[1] -------------------------------------
[1] UI: http://localhost:3004
[1] UI External: http://192.168.1.1:3004
[1] -------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.06.20 11:45:49 404 GET /index.html
[1] 16.06.20 11:45:49 404 GET /favicon.ico
[1] [BS] File changed: app/app.component.js
[1] [BS] File changed: app/main.js
[0] 11:45:49 AM - Compilation complete. Watching for file changes.
I know it. You should open / as opposed to /index.html.
I suspect there's a good chance that is a problem with lite-server. Have you configured that to use app/main.js when it boots up?
Also, it looks like there's no app.listen(PORT) in your app/main.ts file. Without that your express server won't respond to calls. Maybe you just left it out of what you posted here, I can't tell.
If neither of those are the culprit, try checking on the relative path that BrowserSync is serving files from. Maybe it's looking for files in a different place from where it's supposed to.