Hi I am trying to import framer-motion into a page in Next Js.
import { motion } from "framer-motion"
This breaks the page. I get the following error in terminal:
/Users/.../Sites/.../node_modules/framer-motion/dist/es/index.js:1
export { MotionConfig, MotionConfigContext } from './context/MotionConfigContext.js';
^^^^^^
SyntaxError: Unexpected token 'export'
at wrapSafe (internal/modules/cjs/loader.js:931:16)
at Module._compile (internal/modules/cjs/loader.js:979:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1035:10)
at Module.load (internal/modules/cjs/loader.js:879:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:903:19)
at require (internal/modules/cjs/helpers.js:74:18)
at eval (webpack-internal:///framer-motion:1:18)
at Object.framer-motion (/Users/.../Sites/.../.next/server/pages/work.js:446:1)
at __webpack_require__ (/Users/.../Sites/.../.next/server/pages/work.js:23:31)
I can't see any documentation on this problem anywhere.
Thanks,
I hit this same error. I noticed that Framer Motion (3.10.5) and Next (10.0.9) were both updated in the last 16 hours.
I ran npm update and it fixed this error for me but note that this command updates everything in your package.
If you are worried about breaking changes try updating just the two packages framer and next - npm update framer-motion next or yarn upgrade framer-motion next
I had the same issue, You just need to update your packages.
npm update
Related
I installed this example https://github.com/zeit/next.js/tree/master/examples/with-react-native-web and I added react-native-paper to it , when ever I use it ,I get this error
Error: Cannot find module 'react-native'
Require stack:
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/styles/fonts.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/styles/DefaultTheme.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/core/theming.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/index.js
- /Users/amesbahi/Code/with-react-native-web-app/.next/server/static/development/pages/index.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/next-server/server/require.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/next-server/server/load-components.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/next-server/server/api-utils.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/next-server/server/next-server.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/server/next.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/server/lib/start-server.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/cli/next-dev.js
- /Users/amesbahi/Code/with-react-native-web-app/node_modules/next/dist/bin/next
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:954:17)
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> (/Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/styles/fonts.js:1:279)
at Module._compile (internal/modules/cjs/loader.js:1121:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1160:10)
at Module.load (internal/modules/cjs/loader.js:976:32)
at Function.Module._load (internal/modules/cjs/loader.js:884:14)
at Module.require (internal/modules/cjs/loader.js:1016:19)
at require (internal/modules/cjs/helpers.js:69:18)
at Object.<anonymous> (/Users/amesbahi/Code/with-react-native-web-app/node_modules/react-native-paper/lib/commonjs/styles/DefaultTheme.js:1:282)
at Module._compile (internal/modules/cjs/loader.js:1121:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1160:10)
at Module.load (internal/modules/cjs/loader.js:976:32)
at Function.Module._load (internal/modules/cjs/loader.js:884:14)
here is a copy of my repo enter link description here
I've been struggling with this for a couple of days. Hope some one can help me
I had same approach and same issue as yours.
Here is how I made React Native Paper work in Next.js.
Build Next.js and React Native for Web(RNW) with Expo.io
Check this tutorial and make sure it's running on your local
Follow the Getting Started part and Using on the Web in React Native Paper Doc, however, regarding to next.config.js, this is all you need to do.
const { withExpo } = require("#expo/next-adapter");
const withImages = require("next-images");
const withFonts = require("next-fonts");
module.exports = withExpo(
withFonts(
withImages({
projectRoot: __dirname
})
)
);
Since Expo already provides these build-in plugin to load images and fonts, you don't need to manually add any loader for your webpack, just using it and it should work.
I'm doing this tutorial, which combines the Ionic CLI with Meteor. Everything was fine until it asked me to install meteor-client-bundler. After adding this to package.json:
"meteor-client:bundle": "meteor-client bundle -s api"
And running the commands:
npm install --save-dev tmp
npm run meteor-client:bundle
A new file called meteor-client.js was added to my node_modules folder (as expected). However, when I try importing it via:
import 'meteor-client';
My app crashes and I get this error:
Uncaught TypeError: Cannot read property 'versions' of undefined
at autoupdate_client.js (meteor-client.js:40130)
at fileEvaluate (meteor-client.js:1535)
at Module.require (meteor-client.js:1438)
at _require (meteor-client.js:1457)
at meteor-client.js:40302
at Object.<anonymous> (meteor-client.js:40308)
at Object.module.exports (vendor.js:146981)
at __webpack_require__ (bootstrap 38e1b6bf8728472217f2:54)
at Object.478 (main.ts:1)
at __webpack_require__ (bootstrap 38e1b6bf8728472217f2:54)
The problem appears to be in this line of code:
const autoupdateVersions = __meteor_runtime_config__.autoupdate.versions[clientArch] || {
version: "unknown",
versionRefreshable: "unknown",
versionNonRefreshable: "unknown",
assets: []
};
Where apperently versions is undefined. But the code is extremely long and convoluted, I'm not entirely sure how to go about this.
I try to use Encore in Symfony.
First example
I run command:
./node_modules/.bin/encore dev
and this return me error:
path.js:7
throw new TypeError('Path must be a string. Received ' + inspect(path));
^
TypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.join (path.js:1211:7)
at find (/www/testencore/node_modules/babel-loader/lib/resolve-rc.js:11:21)
at module.exports (/www/testencore/node_modules/#symfony/webpack-encore/lib/config/parse-runtime.js:64:47)
at Object.<anonymous> (/www/testencore/node_modules/#symfony/webpack-encore/bin/encore.js:18:23)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
Your issue has to do with v7.1 of babel-loader. (cfr. https://github.com/symfony/webpack-encore/issues/40)
You can fix the issue by adding the following line to your package.json
"babel-loader": "7.0"
After this make sure to run yarn upgrade, webpack-encore should work again.
Note that this is a temporary fix. You should keep an eye on the github issue to see if there's a permanent fix available.
EDIT: This has been fixed since Encore 0.9.1, updating should solve the issue.
I'm working in a project where some of dependencies are a self made UI library components.
Those components has its proper .css file. The source structure is something like this:
|- src
|-|
|- components
|-|
| Component
|-|
|- index.js
|- Component.js
|- Component.css
The same structure is published in a build folder, with each .js file transpiled for a production compatible JavaScript format.
The project I consume this module vw using React-Starter-Kit and when I try to start the service using yarn start or npm start, I get the following error:
SyntaxError: Unexpected token .
at createScript (vm.js:53:10)
at Object.runInThisContext (vm.js:95:10)
at Module._compile (module.js:543:28)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.<anonymous> ([... path to my component inside node_modules]:13:15)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
/pathtomyproject/runServer.js:67
throw new Error(`Server terminated unexpectedly with code: ${code} signal: ${signal}`);
I guess the problem is about babel trying to read .css files, but I would like to know if someone have a good approach to avoid this kind of problem, using the actual boilerplate I'm using right now (React Starter Kit).
UPDATE
I forgot to mention this. If I import that module using relative path sintax:
import Component, { Styles } from '../../../node_modules/#scope/my-project/Component';
It works as expected, obviously is nice to have syntatic sugar import
Thanks.
According to your answer, I think, that import has to be:
import Styles from './Component.css',
it's necessary to add .css extension to show that it's not .js and it has to be processed by css-loaders (in case if webpack is used) or other tools.
I was working in a project in Meteor 1.3 and today I upgraded to 1.4 and when i try to run the project after running meteor reset I get the following error:
While loading plugin `compileScss` from package `fourseven:scss`:
/Users/mazinalmaskari/.meteor/packages/fourseven_scss/.2.1.1.xb5zda++os.osx.x86_64+web.browser+web.cordova/plugin.compileScss.os.osx.x86_64/npm/compileScss/node_modules/node-sass/lib/index.js:22:11:
`libsass` bindings not found. Try reinstalling `node-sass`?
at getBinding
(/Users/mazinalmaskari/.meteor/packages/fourseven_scss/.2.1.1.xb5zda++os.osx.x86_64+web.browser+web.cordova/plugin.compileScss.os.osx.x86_64/npm/compileScss/node_modules/node-sass/lib/index.js:22:11)
at Object.<anonymous>
(/Users/mazinalmaskari/.meteor/packages/fourseven_scss/.2.1.1.xb5zda++os.osx.x86_64+web.browser+web.cordova/plugin.compileScss.os.osx.x86_64/npm/compileScss/node_modules/node-sass/lib/index.js:188:23)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load
(/Users/mazinalmaskari/.meteor/packages/meteorhacks_npm/.1.5.0.m71zaz++os+web.browser+web.cordova/plugin.initializing-npm-support.os/npm/initializing-npm-support/node_modules/node-echo/node_modules/coffee-script/lib/coffee-script/register.js:45:36)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at Object.<anonymous>
(/Users/mazinalmaskari/.meteor/packages/meteor-tool/.1.4.0-1.bf0k83++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/tools/isobuild/bundler.js:1633:22)
at Object.require
(/Users/mazinalmaskari/.meteor/packages/meteor-tool/.1.4.0-1.bf0k83++os.osx.x86_64+web.browser+web.cordova/mt-os.osx.x86_64/tools/isobuild/bundler.js:1607:31)
at <runJavaScript-18>:15:16
at <runJavaScript-18>:151:4
at <runJavaScript-18>:158:3
=> Your application has errors. Waiting for file change.
And when i remove the package fourseven:scss i get the following error:
While processing files with stylus (for target web.browser):
packages/ian:accounts-ui-bootstrap-3/accounts_ui.styl: Stylus compiler error: accounts_ui.styl:85:2
81| }
82| .btn-Twitter{
83| color: white;
84| background-color: #4099FF;
85| }
--------^
86|
87|
fs.exists is not a function
=> Your application has errors. Waiting for file change.
Any advice on what should i do here please? is there a way to downgrade to meteor 1.4?
I got the problem fixed by executing the following steps:
meteor remove fourseven:scss
meteor add fourseven:scss#=3.8.1'
for the second problem, I has to move stylus package and add it again because for some reason downloading ian:accounts-ui-bootstrap-3 doesn't come with the latest version of stylus
meteor remove stylus
meteor add stylus#=2.513.4
First try running a meteor reset (warning: this will wipe your local Mongo DB).
If that doesn't work, with the fourseven:scss package added to your project, try:
cd yourproject
npm uninstall node-sass
meteor npm install --save-dev node-sass
Try running your app as root
$ sudo meteor