I started with NextJS, before that I used React a lot.
I run the app on docker (node:18-alpine) if it makes any difference.
I have API thing that I wrote before and published as NPM module. Now I install it with yarn add sjiamnocna/renette-api, it's ok, I can use it with react.
I have file "next-app/utils/API/initapi.ts" containing
import CAPI from "renette-api"
const API = new CAPI()
API.authenticateWithName('abcdef')
API.authorizeWithKey('12345')
export default API
It gives me SyntaxError: Unexpected token 'export'
Nothing I found worked so far, any idea?
EDIT1:
Suppose it fails during the runtime (running yarn dev) because it's successfully built and served for development. The CMD tells the same thing as the browser
SyntaxError: Unexpected token 'export'
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1026:15)
at Module._compile (node:internal/modules/cjs/loader:1061:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1151:10)
at Module.load (node:internal/modules/cjs/loader:975:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:999:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.renette-api (/home/sjiamnocna/Documents/wrk/docker_test/nginxphppg/next-app/.next/server/pages/index.js:52:18)
at __webpack_require__ (/home/sjiamnocna/Documents/wrk/docker_test/nginxphppg/next-app/.next/server/webpack-runtime.js:33:42) {
page: '/'
}
I have the file in directory next to the pages directory, couldn't that cause anything?
Ok, the solution is "workaround".
I changed the target of my package to ES5, now it exports the old style as NextJS expects it. BUT, if you guys have some trick to make the ES6 imports work, tell me
// before
export default MyClass
// now
module.exports = default
Have a nice day
Related
I am working on upgrading a whole slew of dependencies in the branch https://github.com/skyra-project/skyra.pw/tree/fix/update-dependencies and I'm facing an issue that I've been banging my head over for a couple of hours now with no light at the end of the tunnel so I figured I'd ask it here.
Whenever I run yarn build in this branch I get the following error from NextJS:
info - Loaded env from F:\dev\skyraproject\skyrapw\src\.env.production.local
info - Loaded env from F:\dev\skyraproject\skyrapw\src\.env.production
warn - You have enabled experimental feature(s).
warn - Experimental features are not covered by semver, and may cause unexpected or broken application behavior. Use them at your own risk.
warn - SWC minify release candidate enabled. https://nextjs.org/docs/messages/swc-minify-enabled
info - Checking validity of types
> [PWA] Compile client (static)
> [PWA] Auto register service worker with: F:\dev\skyraproject\skyrapw\node_modules\next-pwa\register.js
> [PWA] Service worker: F:\dev\skyraproject\skyrapw\src\public\sw.js
> [PWA] url: /sw.js
> [PWA] scope: /
> [PWA] Compile server
> [PWA] Compile server
info - Creating an optimized production build
info - Compiled successfully
> Build error occurred
F:\dev\skyraproject\skyrapw\node_modules\#mui\material\Grid\Grid.js:1
import _objectWithoutPropertiesLoose from "#babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1032:15)
at Module._compile (node:internal/modules/cjs/loader:1067:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.8303 (F:\dev\skyraproject\skyrapw\src\.next\server\pages\guilds\[...id].js:6919:18)
at __webpack_require__ (F:\dev\skyraproject\skyrapw\src\.next\server\webpack-runtime.js:25:42) {
type: 'SyntaxError'
}
info - Collecting page data .
Some things I have tried without success:
Searching the NextJS issues and documentation
Setting NextJS back to using Babel instead of SWC
Setting "type": "module" in my package.json
The only thing that is still on my mind for trying is changing all default exports to named exports from '#mui/material' but that would be a big chore to change and I really don't want to go through that without some insight from the people here.
I.. fixed it. I gave the last remark on my post 1 more shot and because I ended up finding the codemod #mui/codemod v5.0.0/top-level-imports documented in the Material-UI repository (yarn dlx #mui/codemod v5.0.0/top-level-imports src/). Figured if it was just running a codemod to change everything to top level named imports I could do that.
Well that did it. I honestly have no idea how or why.. but the problem is fixed. Now the site compiles just fine.
I am trying to write a simple UI client app which will read the smart contract to fetch some data. However I am stuck in getting the build artifact inside the /src folder. During deployment of the smart contract (migrate) on a local Truffle network, I noticed the build artifact is not getting copied over to src folder. However I have mentioned it in the truffle config file.
truffle config content
const path = require('path');
contracts_build_directory: path.join(__dirname + 'client-app/src/contracts'),
App.js - I have already defined an import statement
import PetShop from './contracts/PetShop.json';
The react app was created using the npm module create-react-app.
But during the deploy, the contract artifact is not copied over to /src - hence it gives could not find module error.
Any help
Thanks
PS C:\Users\HP\new-react> node src/dare.js
node:internal/modules/cjs/loader:998
throw err;
^
Error: Cannot find module './build/contracts/so.json'
Require stack:
- C:\Users\HP\new-react\src\dare.js
at Module._resolveFilename (node:internal/modules/cjs/loader:995:15)
at Module._load (node:internal/modules/cjs/loader:841:27)
at Module.require (node:internal/modules/cjs/loader:1061:19)
at require (node:internal/modules/cjs/helpers:103:18)
at Object.<anonymous> (C:\Users\HP\new-react\src\dare.js:3:20)
at Module._compile (node:internal/modules/cjs/loader:1159:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
at Module.load (node:internal/modules/cjs/loader:1037:32)
at Module._load (node:internal/modules/cjs/loader:878:12)
at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
at node:internal/main/run_main_module:23:47 {
code: 'MODULE_NOT_FOUND',
requireStack: [ 'C:\\Users\\HP\\new-react\\src\\dare.js' ]
}
The answer to this is very simple, make sure you point your react file to the right path.
enter image description here
Before I referenced the path correctly, it showed an error.
const MyContract = require('./build/contracts/so.json');
To correct the error do this:
const MyContract = require('../build/contracts/so.json');
I got this error while installing the react app. Perviously, it was working well but, now it started to show this error. How to fix it?
internal/modules/cjs/loader.js:614
throw e;
^
Error: No valid exports main found for 'D:\Programming\react\stores\node_modules\is-promise'
at resolveExportsTarget (internal/modules/cjs/loader.js:611:9)
at applyExports (internal/modules/cjs/loader.js:492:14)
at resolveExports (internal/modules/cjs/loader.js:541:12)
at Function.Module._findPath (internal/modules/cjs/loader.js:643:22)
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:941:27)
at Function.Module._load (internal/modules/cjs/loader.js:847:27)
at Module.require (internal/modules/cjs/loader.js:1016:19)
at require (internal/modules/cjs/helpers.js:69:18)
at Object.<anonymous> (D:\Programming\react\stores\node_modules\run-async\index.js:3:17)
at Module._compile (internal/modules/cjs/loader.js:1121:30) {
code: 'MODULE_NOT_FOUND'
}
Aborting installation.
node has failed.
Deleting generated file... node_modules
Deleting generated file... package.json
Done.
i think this issue is related to is-promise issue
https://github.com/then/is-promise/issues/14#issue-606798951
they are working for fixing the bug.
I'm starting a new project on React and I want to use this stack:
React Router 4 + Redux + Universal Rendering + Ant Design
I have found that nice starter kit https://github.com/combine/universal-react-redux that cover most of my needs except it use Semantic UI not Ant Design
I'm trying to integrate Ant Design in it like I did on another working project following instructions of this article https://medium.com/#GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f
When I try to use a Ant Design Button in the Home component, I have this error
(function (exports, require, module, __filename, __dirname) { import Button from './button';
^^^^^^
SyntaxError: Unexpected token import
at createScript (vm.js:80:10)
at Object.runInThisContext (vm.js:139:10)
at Object.obj.(anonymous function) [as runInThisContext] (/Users/Arnaud/Documents/Tepee/src/universal-react-redux/node_modules/node-dev/lib/hook.js:30:19)
at Module._compile (module.js:607:28)
at Module._extensions..js (module.js:654:10)
at nodeDevHook (/Users/Arnaud/Documents/Tepee/src/universal-react-redux/node_modules/node-dev/lib/hook.js:61:7)
at require.extensions.(anonymous function) (/Users/Arnaud/Documents/Tepee/src/universal-react-redux/node_modules/babel-register/lib/node.js:152:7)
at Object.nodeDevHook [as .js] (/Users/Arnaud/Documents/Tepee/src/universal-react-redux/node_modules/node-dev/lib/hook.js:61:7)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
[ERROR] 00:14:04 SyntaxError
What I understand of the error is that babel is not used in this case (because import is not understood) but
I don't understand why it works for other librairies and not for antd
I have no idea how to fix this
Help is welcome. Thanks
I am new to Nodejs and AngularJS. I have researched this error on your website and not been able to find an answer. I am working from the book, Pro AngularJS by Adam Freeman, Apress. After reading the post by Sheraz (nodejs connect cannot find static, Jun 21 '14) and the answer by dylants, I have done option 2, npm install serve-static. I updated my server.js code thus:
var connect = require('connect'),
serveStatic = require('serve-static');
var app = connect();
app.use(serveStatic("C:\wamp\www\Projects\ProAngularJS"));
app.listen(5000);
When I type "node C:\wamp\www\Projects\ProAngularJS\server.js" The error I get looks like this:
C:\wamp\www\Projects\ProAngularJS\server.js:1
(function (exports, require, module, __filename, __dirname) { var app = connect(
);
^
ReferenceError: connect is not defined
at Object.<anonymous> (C:\wamp\www\Projects\ProAngularJS\server.js:1:73)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3
I have no idea why I'm getting this error. Maybe I didn't install node correctly?
Any help would be appreciated.
Thx,
Khthulhu
Kindly check whether you have connect module in node_modules, if not install it using npm. Hope this helps.