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;
}
Related
For my serverless react program, the browser just says:
SyntaxError: Unexpected token '.'
Below is my Cloudwatch Log on AWS. If I make change to my program, and get an error like this, not in my code, what should be my approach to solving?
2023-01-21T21:56:10.862-06:00
Copy
2023-01-22T03:56:10.862Z bcad1fe4-3046-4d00-a7c3-853024fd4cc1 ERROR /var/task/630.js:80
if (options?.CAPACITY) {
^
SyntaxError: Unexpected token '.'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object.__webpack_require__.f.require (/var/task/webpack:/serverless-react-boilerplate/webpack/runtime/require chunk loading:29:1)
at /var/task/webpack:/serverless-react-boilerplate/webpack/runtime/ensure chunk:6:1
at Array.reduce (<anonymous>)
2023-01-22T03:56:10.862Z bcad1fe4-3046-4d00-a7c3-853024fd4cc1 ERROR /var/task/630.js:80 if (options?.CAPACITY) { ^ SyntaxError: Unexpected token '.' at wrapSafe (internal/modules/cjs/loader.js:915:16) at Module._compile (internal/modules/cjs/loader.js:963:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10) at Module.load (internal/modules/cjs/loader.js:863:32) at Function.Module._load (internal/modules/cjs/loader.js:708:14) at Module.require (internal/modules/cjs/loader.js:887:19) at require (internal/modules/cjs/helpers.js:74:18) at Object.__webpack_require__.f.require (/var/task/webpack:/serverless-react-boilerplate/webpack/runtime/require chunk loading:29:1) at /var/task/webpack:/serverless-react-boilerplate/webpack/runtime/ensure chunk:6:1 at Array.reduce (<anonymous>)
This syntax options?.CAPACITY is called Optional chaining. It seems like your local setup supports it but the setup you have on AWS doesn't.
You need to make sure you are using the right package versions that support optional chaining.
For NodeJs, you need to use a version >=14.0.0 (Ref)
For Webpack, you need to use a version >=5 (Ref)
For Babel, you need to use a version >=7.8.0 (Ref)
If you are using create-react-app, you need to use a version >=3.3.0 (Ref)
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 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!
when importing a class from another module then the compiler gives this error,tell me how to correct it
(function (exports, require, module, __filename, __dirname) { import validator from './click.component';
^^^^^^^^^
SyntaxError: Unexpected identifier
at new Script (vm.js:74:7)
at createScript (vm.js:246:10)
at Object.runInThisContext (vm.js:298:10)
at Module._compile
(internal/modules/cjs/loader.js:657:28)
at Object.Module._extensions..js
(internal/modules/cjs/loader.js:700:10)
at Module.load
(internal/modules/cjs/loader.js:599:32)
at tryModuleLoad
(internal/modules/cjs/loader.js:538:12)
at Function.Module._load
(internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain
Blockquote how can i fix this
(internal/modules/cjs/loader.js:742:12)
at startup
(internal/bootstrap/node.js:266:19)
SyntaxError: Unexpected identifier
Means you are trying to run an import statement in a runtime that doesn't support it.
Fix
Make sure you have compiled your TypeScript to JavaScript with --module commonjs