Decorators in my project do not work. I include this as first line import 'babel-core/polyfill' but still have an error
Module build failed: SyntaxError: .../index.js: Unexpected token
If you really need babel5 instead of babel6 here is documentation for the former
https://github.com/babel/babel.github.io/blob/5.0.0/docs/usage/experimental.md
you can have .babelrc in your project root with content:
{
"optional": ["es7.decorators"],
}
Related
When using Turborepo's wildcard imports (snippet from package.json)
dependencies: {
"branding": "*"
}
inside of a React app created with create-react-app, I get the error:
ERROR in ./src/App.js 5:0-37
Module not found: Error: Can't resolve 'branding' in 'C:\Users\****\Projects\Development\monorepo\apps\share\src'
I think I'm doing something very wrong, but I can't work it out through Turborepo's documentation.
I build my Next.js app with Bazel.
It works fine, but there is one problem:
When I import styles/globals.css into pages/_app.tsx, Next.js throws this error:
Global CSS cannot be imported from files other than your Custom <App>. Please move all global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Read more: https://err.sh/next.js/css-global
Location: pages/_app.tsx
Which obviously doesn't make sense.
Reproduction
yarn install
yarn start:bazel (http://localhost:3000, works just fine)
Now uncomment this line
yarn start:bazel (Error while buildling)
Edit 1
After a suggestion by Ulrich Thomas Gabor, it turns out that ctx.customAppFile is null, which might be the root of the problem.
Here is a log output of ctx when building with Bazel:
{
ctx: {
rootDirectory: '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/85/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin',
customAppFile: null,
// ...
}
}
Edit 2
After some more debugging, I found the problem:
This if statement fails because of this error
Error: EACCES: permission denied, access '/home/flo/.cache/bazel/_bazel_flo/e959037946bf226f3b911fa40ec62d93/sandbox/linux-sandbox/186/execroot/nextjs-bazel/bazel-out/k8-fastbuild/bin/pages/_app.tsx'
If I patch Next.js to ignore this error, everything works fine!
But how to prevent the EACCES error?
I'm trying to use Path Mapping for Cloud Functions but when I use a custom path like import * as b from '#custom-path/barrel' I get an error on tslint for implicit imports. If I disable this rule and try to deploy, I get the following error:
Error parsing triggers: Cannot find module '#custom-path'
"baseUrl": "../",
"paths": {
"#be-utils/*": ["functions/src/utils/*"],
}
Am I doing something wrong?
If not, how can I use path mapping with Cloud Functions?
Thanks.
I am trying to use the wonderful Quokka package by WallabyJS https://github.com/wallabyjs/atom-quokka.
I am trying to import an ES6 module but keep getting an error in the Quokka console:
Unexpected token import at createScript vm.js:56
I have tried updating my package.json file and set babel: true as advised in the configuration page here but i still get the error.
Link to my package.json file here
You need to specify react-app preset in your Quokka config, so instead of "babel: true", you need:
babel: {
presets: ['react-app']
}
I want to use an npm package, namely react-date-picker in my Meteor 1.4 project using React. The react-date-picker package comes with some css that must be included in order to render correctly. I need to tell meteor to load node_modules/react-date-picker/index.css and include it with the rest of its css, but I'm at a loss on how to do this. Others have suggested that you can simply import the css from within the .jsx component like this
import 'react-date-picker/index.css'
but doing so results in a crashing server that chokes on the first line of the css (as it appears to be parsed as a standard javascript file)
(function (exports, require, module, __filename, __dirname) { .react-date-field {
^
) SyntaxError: Unexpected token .
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:373:25)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Module.Mp.load (/Users/gsferrer/.meteor/packages/babel-compiler/.6.9.1.7f3rvr++os+web.browser+web.cordova/npm/node_modules/reify/node/runtime.js:16:23)
at Function.Module._load (module.js:300:12)
at Module.require (module.js:353:17)
at require (internal/module.js:12:17)
at npmRequire (/Users/gsferrer/Projects/xxx/.meteor/local/build/programs/server/npm-require.js:129:10)
at Module.Mp.useNode (packages/modules-runtime/modules-runtime.js:69:1)
=> Exited with code: 1
=> Your application is crashing. Waiting for file change.
So what is the preferred method to import css from node_modules using Meteor with React?
As you say, it appears to be parsed as JS. However, importing a CSS this way is correct and usually works, so there must be something weird going on... So I'm going to try a wild guess: Try renaming the file from index.css to something else, like react-date-picker.css. It could be that the "index" name is triggering the JS interpretation.
I have been stuck for days on this issue too (I am new to the node.js/Meteor/React/JavaScript world). I needed to import a CSS file in node_modules/react-datagrid/index.css
My working solution (applied to a tiny application that should make it easy to understand; I only display a datagrid using hard-coded data) is available on my GitHub repository (commit 902c92c). The application is called "reactDataGrid", it is a subfolder of the repository, you just need to run "meteor" within that folder.
The key steps in my case were:
npm install webpack --save-dev to install web pack for the project
to create a .babelrc file with the content described here (and copied below). I believe this helps webpack parse the JSX syntax of react.
.babelrc
{
"presets": [
[
"es2015",
{
"modules": false
}
],
"react"
]
}
add require('react-datagrid/index.css') statement inside my client/main.jsx file, that tells webpack to include that CSS file in the dependency tree of my app. This is actually an instruction described in the README of the zippyui/react-datagrid GitHub repository. (Unfortunately stackoverflow limits to two links in my post, so I cannot link it here anymore)
I cannot guarantee that this is the preferred method of doing it, but I can say that it works for me. I hope it helps.
Best,
Kevin