I am using react-owl-carousel plugins in my projects. when run my project displayed ReferenceError: window is not defined error showing, what I am missing could you please solve this issue.
F:\react\test\testsite> npm run ssr
> testsite#0.1.0 ssr
> node server/index.js
F:\react\test\testsite\node_modules\react-owl-carousel\umd\OwlCarousel.js:1795
})(window.Zepto || window.jQuery, window, document);
^
ReferenceError: window is not defined
at F:\react\test\testsite\node_modules\react-owl-carousel\umd\OwlCarousel.js:1795:8
at F:\react\test\testsite\node_modules\react-owl-carousel\umd\OwlCarousel.js:2:85
at Object.<anonymous> (F:\react\znap\znapcash\node_modules\react-owl-carousel\umd\OwlCarousel.js:5:2)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Module._compile (F:\react\znap\znapcash\node_modules\pirates\lib\index.js:99:24)
at Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Object.newLoader [as .js] (F:\react\test\testsite\node_modules\pirates\lib\index.js:104:7)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
PS F:\react\test\testsite>
Related
I am trying compile my app, and it has backend error. It said:
import express from "express";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at wrapSafe (internal/modules/cjs/loader.js:1001:16)
at Module._compile (internal/modules/cjs/loader.js:1049:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:92:18)
at Object.<anonymous> (/Users/bella/Desktop/EarlyBird/server.js:19:18)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
[nodemon] app crashed - waiting for file changes before starting...
please click here to see my backend structure
Code available here =>
https://codesandbox.io/s/sweet-mcclintock-dhczx?file=/pages/index.js
Initial error when trying to use #iconify-icons/cryptocurrency with next.js and typescript (it happens only when in typescript).
SyntaxError: Unexpected token export
at Module._compile (internal/modules/cjs/loader.js:723:23)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at eval (webpack-internal:///#iconify-icons/cryptocurrency/usdt:1:18)
at Object.#iconify-icons/cryptocurrency/usdt (/sandbox/.next/server/pages/index.js:409:1)
at __webpack_require__ (/sandbox/.next/server/pages/index.js:23:31)
at eval (webpack-internal:///./pages/index.js:9:92)
at Module../pages/index.js (/sandbox/.next/server/pages/index.js:398:1)
at __webpack_require__ (/sandbox/.next/server/pages/index.js:23:31)
at /sandbox/.next/server/pages/index.js:91:18
at Object.<anonymous> (/sandbox/.next/server/pages/index.js:94:10)
at Module._compile (internal/modules/cjs/loader.js:778:30)
/sandbox/node_modules/#iconify-icons/cryptocurrency/usdt.js:6
export default data;
The problem does not happen with all libraries. It seems to me that during the transpilation babel has a problem with the library syntax.
Then I've tried to transpile the lib next-transpile-modules to fix the problem using the code below.
const withTM = require("next-transpile-modules")([
"#iconify-icons/cryptocurrency"
]);
module.exports = withTM();
But a new problem has happened.
Error: next-transpile-modules - an unexpected error happened when trying to resolve "#iconify-icons/cryptocurrency"
Error: Can't resolve '#iconify-icons/cryptocurrency' in '/sandbox'
at getPackageRootDirectory (/sandbox/node_modules/next-transpile-modules/src/next-transpile-modules.js:87:11)
at Array.map (<anonymous>)
at generateModulesPaths (/sandbox/node_modules/next-transpile-modules/src/next-transpile-modules.js:99:33)
To conclude, transpiling the module is the way I'm trying to achieve the main goal. It might not be necessary.
The way the #iconify-icons/cryptocurrency library is exported means you need to transpile each icon package you use individually.
const withTM = require("next-transpile-modules")([
"#iconify-icons/cryptocurrency/usdt"
]);
module.exports = withTM();
I'm using the openlayers library with React Next.Adding the openlayers library with npm. But when I import the "import Map from 'ol / Map'" library, I get the following error.
import PluggableMap from './PluggableMap.js';
^^^^^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:80:7)
at createScript (vm.js:274:10)
at Object.runInThisContext (vm.js:326:10)
at Module._compile (internal/modules/cjs/loader.js:664:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10)
at Module.load (internal/modules/cjs/loader.js:600:32)
at tryModuleLoad (internal/modules/cjs/loader.js:539:12)
at Function.Module._load (internal/modules/cjs/loader.js:531:3)
at Module.require (internal/modules/cjs/loader.js:637:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.ol/Map.js at Object.ol/Map.js (<path>\.next\server\static\development\pages\index.js:1730:18)
at __webpack_require__ (<path>\.next\server\static\development\pages\index.js:23:31)
at Module../components/mappanel/map.js (<path>\.next\server\static\development\pages\index.js:557:67)
at __webpack_require__ (<path>\.next\server\static\development\pages\index.js:23:31)
at Module../pages/index.js (<path>\.next\server\static\development\pages\index.js:1302:83)
at __webpack_require__ <path>\.next\server\static\development\pages\index.js:23:31)
I didn't do anything in the next.config.js and .babelrc files.How to resolve the error?
Note: Openlayers, working with classic react.
Sandbox link is here: https://codesandbox.io/s/react-openlayers-7r04v
Thanks,
Seems that ol doesn't work in server side because it require window and such stuff so you need to do this instead
componentDidMount() {
const map = require("ol/Map").default;
}
I am new to Javascript programming and have been learning React. The situtation is I am trying to upload an image to AWS S3 bucket. As the title says, when I try to import S3FileUpload from 'react-s3' SyntaxError: Unexpected identifier occurs
I have tried googling the problem but the only result I found with the same error was in another language which is unanswered: http://qaru.site/questions/17278232/syntaxerror-unexpected-token-import-while-transpiling-reactjs-app-using-babel
import S3FileUpload from 'react-s3';
This is the log from terminal that appears:
(function (exports, require, module, __filename, __dirname) { import Signature from "./Signature";
^^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:83:7)
at createScript (vm.js:267:10)
at Object.runInThisContext (vm.js:319:10)
at Module._compile (internal/modules/cjs/loader.js:684:28)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
at Module.require (internal/modules/cjs/loader.js:657:17)
at require (internal/modules/cjs/helpers.js:22:18)
at Object.<anonymous> (C:\Users\Me\Documents\GitHub\myrepo\node_modules\react-s3\index.js:1:80)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
at Function.Module._load (internal/modules/cjs/loader.js:552:3)
Any tips would be greatly appreciated!
My mistake, I just went to the Github repo of the module and it appears that the name of the module has been changed to aws-S3 6 days ago. Working now!
I'm new to protractor, trying to run simple test via eclipse, but for some reason I'm getting this below error.
ReferenceError: describe is not defined
at Object.<anonymous> (C:\Users\ram\pworkspace\test\test.js:4:1)
at Module._compile (module.js:435:26)
at Object.Module._extensions..js (module.js:442:10)
at Module.load (module.js:356:32)
at Function.Module._load (module.js:313:12)
at Module.require (module.js:366:17)
at require (module.js:385:17)
There is no cli.js under protractor/lib/cli.js but it exists in /node_modules/protractor/built/cli.js, I have given this path under protractor client file.
Can anybody let me know to resolve this issue?