I am trying to export/import two functions:
export function LoadMoreButtonLogic(
...
) {
...
return ...
}
export function GetTheFilteredPosts(
...
) {
return (...);
}
And importing them this way in another file:
import { GetTheFilteredPosts } from '#src/components/commons/load-more-button/LoadMoreButton';
import { LoadMoreButtonLogic } from '#src/components/commons/load-more-button/LoadMoreButton';
However I am getting such warnings:
warning "export 'GetTheFilteredPosts' was not found in '#src/components/commons/load-more-button/LoadMoreButton'
warning "export 'LoadMoreButtonLogic' was not found in '#src/components/commons/load-more-button/LoadMoreButton'
But... if I rename the file LoadMoreButton.js to the name of a function exported or I rename the name of the exported function to match the filename, the warning for this function disappears.
#src is setup in jsconfig:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"#src/*": ["src/*"],
}
}
}
as well as in gatsby-config:
'#src': path.join(__dirname, './src'),
And #src is working fine in other components. It is used in tens of places.
If I try the path without # I get the same:
warning "export 'GetTheFilteredPosts' was not found in '../../../../components/commons/load-more-button/LoadMoreButton'
warning "export 'LoadMoreButtonLogic' was not found in '../../../../components/commons/load-more-button/LoadMoreButton'
What am I doing wrong?
Why can't I export them freely?
Related
I am trying to use the # (at) symbol to differentiate the projects own imports from the ones in node_modules.
./src/ contents
So I'd like my imports to be imported as
#components/FlatListMenuItem
#interfaces/appInterface
#screens/HomeScreen
#theme/appTheme
But I'm getting this error in Metro:
error: Error: Unable to resolve module #theme/appTheme from C:\Coding\Capacitacion\React_Native\RNComponents\src\screens\HomeScreen.tsx: #theme/appTheme could not be found within the project or in these directories:
node_modules
7 | import { MenuItem } from "#interfaces/appInterfaces";
8 |
> 9 | import { styles } from "#theme/appTheme";
| ^
10 |
at ModuleResolver.resolveDependency (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:178:15)
at DependencyGraph.resolveDependency (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\node-haste\DependencyGraph.js:264:43)
at Object.resolve (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\lib\transformHelpers.js:170:21)
at resolveDependencies (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\DeltaBundler\graphOperations.js:466:33)
at processModule (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\DeltaBundler\graphOperations.js:232:31)
at async traverseDependenciesForSingleFile (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\DeltaBundler\graphOperations.js:221:3)
at async traverseDependencies (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\DeltaBundler\graphOperations.js:147:7)
at async DeltaCalculator._getChangedDependencies (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:263:42)
at async DeltaCalculator.getDelta (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:90:16)
at async DeltaBundler.getDelta (C:\Coding\Capacitacion\React_Native\RNComponents\node_modules\metro\src\DeltaBundler.js:74:12)
I believe I have it properly configured in tsconfig.json because when I hover over the import directory with the alias in effect, the popup that shows the evaluated path is correct. So the problem must be with the babel.config.js.
What's odd is that it's throwing an error on the themes import on line 9 but all seems good with the import on line 7.
I've looked throught a lot of tutorials on this, and I can't understand what's missing. I'm quite aware that I might be overlooking something extremely evident...
I'm using babel-plugin-module-resolver to handle the aliases for the build.
This is my tsconfig.json:
// prettier-ignore
{
"extends": "#tsconfig/react-native/tsconfig.json", /* Recommended React Native TSConfig base */
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
"baseUrl": ".", /* Base directory to resolve non-absolute module names. */
"paths" : {
"#*": ["src/*"]
},
/* Completeness */
"skipLibCheck": true /* Skip type checking all .d.ts files. */
}
}
And this is my babel.config.js:
module.exports = {
presets: ["module:metro-react-native-babel-preset"],
plugins: [
[
"module-resolver",
{
alias: {
"#": "./src/",
},
},
],
],
};
And this is the component where I'm using the import statements:
import { FlatListMenuItem } from "#components/FlatListMenuItem";
import { MenuItem } from "#interfaces/appInterfaces";
import { styles } from "#theme/appTheme";
I encountered the module resolving issue in my testcafe(1.17.1) test.
I have a test
//test.e2e.ts in <root>/tests folder
import {MyComponent} from '../src/MyComponent';
...
...
fixture('Custom domain tests');
test('test 1', async () => {
...
...
});
the <root>/src/MyComponent.tsx looks like this
//MyComponent.tsx in <root>/src folder
import React, { FunctionComponent } from 'react';
import styles from '../scss/MyComponent.module.scss';
export const MyComponent: FunctionComponent = () => {
...
...
}
When I run testcafe ./tests/test.e2e.ts, I always got the error
Error: TypeScript compilation failed. Cannot find module '../scss/MyComponent.module.scss' or its corresponding type declarations.
My testcafe tsconfig specified the path config, the <root>/scss-module-for-tests.ts just exports a empty string
// .testcaferc.json in <root>/
{
"compilerOptions": {
"typescript": {
"options": {
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"../scss/MyComponent.module.scss": ["scss-module-for-tests.ts"],
"*.scss": ["scss-module-for-tests.ts"]
}
}
}
}
}
However, seems typescript path config doesn't resolve relative path nor accept a regex, but My project has a lot of those ../scss/*module.scss imports. Is there anyway to resolve the scss file directly for testcafe?
Thanks in advance!
Update on 12/02/2021
I tried add compiler for testcafe according to this doc , I put a .testcaferc.json at the root folder
//.testcaferc.json at <root>
{
"compilerOptions": {
"typescript": {
"options": {
"esModuleInterop": "true"
}
}
}
}
But seems the esModuleInterop=true config didn't reach to testcafe.
Update 12/13/2021:
Not easy to configure it correctly, I removed the *.scss file reference in the test code. Problem solved.
It looks like your TestCafe tests' code references your testing application code. However, TestCafe tests do not require testing application code. In fact, the code of the TestCafe tests and the application can be divided into two separate projects. Please try to separate your web application code and your TestCafe tests' code.
I'm running into the following rollup build failure where I would like to be able to used exports from a scss file in my typescript files.
The build failure reads as follows:
[!] Error: 'default' is not exported by src/styles/variables.scss,
imported by src/components/Layout/Layout.themes.tsx
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/components/Layout/Layout.themes.tsx (1:7) 1: import vbl from
'../../styles/variables.scss';
My rollup config looks as follows:
import scss from 'rollup-plugin-scss';
import typescript from 'rollup-plugin-typescript2';
import image from '#rollup/plugin-image';
import { terser } from 'rollup-plugin-terser';
import pkg from './package.json';
export default {
input: ['src/index.tsx'],
output: [
{
file: pkg.main,
format: 'cjs',
sourcemap: true,
name: 'Main'
},
{
file: pkg.module,
format: 'esm',
sourcemap: true,
name: 'tree-shaking'
}
],
external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.devDependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
plugins: [image(), scss({ output: 'dist/styles.css' }), typescript({ useTsconfigDeclarationDir: true }), terser()]
};
The variables.scss contains:
// colors
$color-blue: #1c4077;
$color-orange: #e87d1e;
:export {
colorBlue: $color-blue;
colorOrange: $color-orange;
}
The variables.scss.d.ts typings file contains:
export interface IGlobalScss {
colorBlue: string;
colorOrange: string;
}
export const variables: IGlobalScss;
export default variables;
And the Layout.themes.tsx file reads as follows:
import vbl from '../../styles/variables.scss';
export const myTheme = {
headerColor: vbl.colorBlue,
footerColor: vbl.colorOrange
}
I've tried an import of the non-default export import { variables } from '../../styles/variables.scss'; but it fails as well with:
[!] Error: 'variables' is not exported by src/styles/variables.scss,
imported by src/components/Layout/Layout.themes.tsx
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
src/components/Layout/Layout.themes.tsx (1:9) 1: import {
variables } from '../../styles/variables.scss';
I am able to serve the project via Storybook, however when I build via Rollup I encounter the error listed above. Please assist me in resolving this build failure?
Here is a CodeSandbox for this example. Extract the zip, yarn and run either yarn start or yarn build to test in VSCode. You'll notice that yarn start succeeds whereas yarn build will fail as mentioned above.
I think the problem is that the output property is not false.
Here is what the plugin does when that property is set to false:
if (options.output === false) {
const css = compileToCSS(code)
return {
code: 'export default ' + JSON.stringify(css),
map: { mappings: '' }
}
}
and this happens in the transform hook, which is invoked before the parsing takes place. This is important because export default ... is treated as a module, meaning you can import it in your js files.
So I think you'll have to manually bundle that variables file with:
scss({ output: false }).
Now, another problem arises: when you import from the .scss file, you'll get the :export object stringified.
For example:
"export default ":export {\n colorBlue: #1c4077;\n colorOrange: #e87d1e; }\n""
the plugin in use does not seem to handle this case.
So I think the solution involves manipulating that string so that you'd end up with something like this:
`{ colorX: 'value', colorY: 'value' }`
I have the following jsconfig.json in the root of my react app:
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"rmv": ["components/rmv/*"]
}
}
}
and there is a helper.jsx file located in ./src/components/rmv folder.
But my attempts to export it directly like that:
import Helper from 'rmv/helper'
fail with an error:
Failed to compile
Module not found: Can't resolve 'rmv/helper'
Only import Helper from 'components/rmv/helper' works.
Why?
PS: I also tried:
"paths": {
"rmv/*": ["components/rmv/*"]
}
Does not work either.
Here is the minimum reproducible example: github.com/chapkovski/trouble_with_jsconfig
Specifically these lines:
https://github.com/chapkovski/trouble_with_jsconfig/blob/e37c8c216eac0da7c70023f7fba47eea54973176/src/App.js#L4-L5
Paths are currently unavailable in apps made with create-react-app:
https://github.com/facebook/create-react-app/issues/5645
You may want to consider using rescripts to let you modify your configuration in CRA 2+ apps.
The paths need to be relative to the baseUrl. Your baseUrl has a value of ./src which is good. However, your paths listed in the array for rmv/* are NOT relative paths, as they don't start with a relative location (./ or ../).
I would encourage you to try prefixing ./ onto your paths.
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"rmv/*": ["./components/rmv/*"]
}
}
}
I found this documentation on the subject: Using webpack aliases
[Eject CRA] You could use webpack alias as alternative solution for the use case.
In webpack.config.js
module.exports = {
//...
resolve: {
alias: {
rmv: path.resolve(__dirname, 'src/components/rmv/')
}
}
};
Now, you could import Helper component as bellow:
import Helper from 'rmv/helper';
While updating some deps (react-bootstrap) I ran into a react error
You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
Compiling the same code with other setups (storybook, create react app, codesandbox, ...) doesn't show the issue.
Looks like the component we import (react-bootstrap/Dropdown), imports another component (react-overlays/Dropdown) which causes the problem.
I tracked the error down to this line which does NOT get outputted:
/* harmony import */ var react_overlays_Dropdown__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(react_overlays_Dropdown__WEBPACK_IMPORTED_MODULE_4__);
Instead, the non-working code uses the ..._MODULE_4__['default'] syntax, which fails and raises the error.
After hours of searches I found out the problem...
Changing this
module.exports = {
resolve: {
modules: [path.join(__dirname, 'node_modules')]
}
};
to this
module.exports = {
resolve: {
modules: ['node_modules']
}
};
solves the problem.