Hi on my server is this working:
import api_url from '../../../../.react.config';
and on another it is not. Instead I have to use:
import {api_url} from '../../../../.react.config';
both are using node 4.2.2
can anybody explain why?
The first syntax will use the module's default export.
export default { };
// or in commonjs
module.exports = { };
If you haven't declared a default export, then importing the entire module won't work.
The second syntax is a destructuring pattern which will only work if the module exports a named property.
export const api_url = ' ';
// commonjs
exports.api_url = ' ';
v4.2.2 doesn't support ES6 module syntax, so you are probably using a tool to transpile your code.
Check that the statements in both files are being transpiled to equivalent ES5 code.
Make sure that the module's exports are the same on both servers.
Related
I'm trying to convert from using requires and use only import to stay consistent throughout my code. While doing this I had to add "type": "module" and this caused a few issues but I resolved all them but one. I was orginally using exports.expressApi = functions.https.onRequest(app) however it is no longer accepting exports when I try to run Firebase deploy. So I tried to change the line to the code below but I am still unable to deploy.
const expressApi = functions.https.onRequest(app)
export default expressApi
Anyone have any suggestions on what may be causing this and how to resolve it?
could you try module.exports = { expressApi } or export {expressApi} instead of export default expressApi. Because I'm not sure how Cloud Functions react to a default export.
I just started using Snowpack for a React/Typescript project and initialized it with: https://www.npmjs.com/package/#snowpack/app-template-react-typescript. It looks very promising but I get an error [#snowpack/plugin-typescript] Cannot find module '../../dummy.webp or its corresponding type declarations when trying to import a .webp image. Somebody an idea how to get it working without using #ts-ignore?
Just found the solution. You need to add the following lines in types/static.d.ts:
declare module '*.webp' {
const ref: string;
export default ref;
}
I'm getting this error in an index.js file. I'm trying to make a simple react, javascript project using an api as well.
/*
import React from 'react'; // this enables jsx
^^^^^^
SyntaxError: Cannot use import statement outside a module
*/
My code looks like this:
/*import React from 'react'; // this enables jsx
import ReactDOM from '...react-dom'; // this allows us to attach the APP
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom'; // this allows front end routing
import Home from './Home';
import Login from './Login';
import Activities from './Activities';
import MyRoutines from './MyRoutines';
import Register from './Register';
import Routines from './Routines';
const PORT = 3000;
const express = require('express');
const { client } = require('./db/client');
const server = express();
function App() {
*/
Method 1
A lot of interfaces still do not understand ES6 Javascript syntax/features, hence there is a need for Es6 to be compiled to ES5 whenever it is used in any file or project. The possible reasons for the SyntaxError: Cannot use import statement outside a module error is you are trying to run the file independently, you are yet to install and set up an Es6 compiler such as Babel or the path of the file in your runscript is wrong/not the compiled file. If you will want to continue without a compiler the best possible solution is to use ES5 syntax which in your case would be var react = require('react'); this can later be updated as appropriate or better still setup your compiler and ensure your file/project is compiled before running and also ensure your run script is running the compiled file usually named dist, build or whatever you named it and the path to the compiled file in your runscript is correct.
Method 2
Add "type": "module" to your package.json
{
// ...
"type": "module",
// ...
}
Note: When using modules, if you get ReferenceError: require is not defined, you'll need to use the import syntax instead of require.
Method 3
Update node.
I want to use the version number that is configured on package.json into my components on NuxtJS application.
Can this be done?
At the top of your nuxt.config.js file put an import
import pkg from './package.json'
then, inside the same file, insert this part
export default {
...
// https://nuxtjs.org/guide/runtime-config
publicRuntimeConfig: {
clientVersion: pkg.version,
}
}
Now you can use the variable, inside your components with $config.clientVersion
For more details, see the docs at https://nuxtjs.org/guide/runtime-config
I'm trying to use the react-csv-reader package in a React project that was created with create-react-app --typescript. Since react-csv-reader doesn't come with a types declaration file, I created one myself. I created a file types/react-csv-reader/index.d.ts. VS Code's Intellisense can find it just fine (I can command-click on the function name in module where I'm using react-csv-reader, and it takes me to my declarations file. It also complains when I don't have all the required props, etc.).
But when I run npm start, I get this:
Failed to compile.
./src/screens/ReadCsv.tsx
Module not found: Can't resolve '../types/react-csv-reader' in '/my/proj/root/src/screens'
Here's my index.d.ts:
import React from 'react'
interface CSVReaderProps {
cssClass?: string
cssInputClass?: string
label?: string
onFileLoaded: (data: any, filename: string) => void
onError: () => void
inputId?: string
inputStyle?: any
parserOptions?: any
}
declare const CSVReader: React.SFC<CSVReaderProps>
export default CSVReader
Because typescript don't know where are your definition files, so you have to tell him in your tsonfig.json.
{
"compilerOptions": {
"typeRoots" : [
"node_modules/#types",
"./your/types/folder"
]
}
}
Note that I added node_modules, otherwise its types are not included.
https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types
The right combination of things to make this work was:
Put everything in index.d.ts inside a declare module 'react-csv-reader' {} block
import it as import CSVReader from 'react-csv-reader' instead of what I was doing, which was import CSVReader from '../types/react-csv-reader'.
I did not have to change anything in tsconfig.json. I still don't understand why it worked before as far as VS Code Intellisense was concerned, but this way works with that and is compiled happily by React.