Getting an error with react-scripts V2.1.3. We are just migrated to this from V1.x. This all worked well previous to the react-scripts upgrade.
The source file (metadataAccess, doing the export) is typescript and has the following code:
export const NAVIGATION = 'Navigation';
The file referencing the const is Javascript as follows:
import { WIDGET_TREE, NAVIGATION, metadataScan } from './universal/metadataAccess';
...
const scanNavigation = await metadataScan(dynamoClient, NAVIGATION);
The error is:
Creating an optimized production build...
Failed to compile.
./src/App.jsx
Attempted import error: 'NAVIGATION' is not exported from './universal/metadataAccess'.
If I were to fix this error (above), I get the same problem on another const. Sadly, the errors are reported one at a time. I also get it on an exported enum. All from Typescript files. I changed the extensions of the referencing files to be .tsx (from .jsx) and it makes no difference.
I have searched the source code of the Typescript compile, webpack, and babel for the string "Attempted import" and not found anything, so I don't even know which code is causing this error.
I also tried adding ".js" to the file name in the import statement, and the (generated) Javascript file has this line:
exports.NAVIGATION = 'Navigation';
It gets the same result. I tried changing the import statement to refer to a non-existent file, and I get a different error, so it seems to be finding the imported file.
Any ideas about how to get this to run?
The React. js "Attempted import error 'X' is not exported from" occurs when we try to import a named import that is not present in the specified file. To solve the error, make sure the module has a named export and you aren't mixing up named and default exports and imports.
You no longer need to import React from "react" . Starting from the release 17 of React, JSX is automatically transformed without using React. createElement . However, other exports like hooks must be imported.
To import a component from another file in React:Export the component from file A , e.g. export function Button() {} . Import the component in file B as import {Button} from './another-file' . Use the imported component in file B .
Importing and exporting in React JS will help us write modular code, i.e., splitting code into multiple files. Importing allows using contents from another file, whereas exporting makes the file contents eligible for importing.
Below is for react-native-web, and include the solution of "Attempted import error", maybe also helpful for you.
npm install --save-dev react-app-rewired
Create a config-overrides.js
in your project root
// used by react-app-rewired
const webpack = require('webpack');
const path = require('path');
module.exports = {
webpack: function (config, env) {
config.module.rules[1].use[0].options.baseConfig.extends = [
path.resolve('.eslintrc.js'),
];
// To let alias like 'react-native/Libraries/Components/StaticRenderer'
// take effect, must set it before alias 'react-native'
delete config.resolve.alias['react-native'];
config.resolve.alias['react-native/Libraries/Components/StaticRenderer'] =
'react-native-web/dist/vendor/react-native/StaticRenderer';
config.resolve.alias['react-native'] = path.resolve(
'web/aliases/react-native',
);
// Let's force our code to bundle using the same bundler react native does.
config.plugins.push(
new webpack.DefinePlugin({
__DEV__: env === 'development',
}),
);
// Need this rule to prevent `Attempted import error: 'SOME' is not exported from` when `react-app-rewired build`
// Need this rule to prevent `TypeError: Cannot assign to read only property 'exports' of object` when `react-app-rewired start`
config.module.rules.push({
test: /\.(js|tsx?)$/,
// You can exclude the exclude property if you don't want to keep adding individual node_modules
// just keep an eye on how it effects your build times, for this example it's negligible
// exclude: /node_modules[/\\](?!@react-navigation|react-native-gesture-handler|react-native-screens)/,
use: {
loader: 'babel-loader',
},
});
return config;
},
paths: function (paths, env) {
paths.appIndexJs = path.resolve('index.web.js');
paths.appSrc = path.resolve('.');
paths.moduleFileExtensions.push('ios.js');
return paths;
},
};
Also create a web/aliases/react-native/index.js
// ref to https://levelup.gitconnected.com/react-native-typescript-and-react-native-web-an-arduous-but-rewarding-journey-8f46090ca56b
import {Text as RNText, Image as RNImage} from 'react-native-web';
// Let's export everything from react-native-web
export * from 'react-native-web';
// And let's stub out everything that's missing!
export const ViewPropTypes = {
style: () => {},
};
RNText.propTypes = {
style: () => {},
};
RNImage.propTypes = {
style: () => {},
source: () => {},
};
export const Text = RNText;
export const Image = RNImage;
// export const ToolbarAndroid = {};
export const requireNativeComponent = () => {};
Now you can just run react-app-rewired start
instead of react-scripts start
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With