We Keep Coding

Babel module resolver not working with react-native

My babel module resolver is not working with React-Native (neither does intellij in VScode)
Here, Is my babel config
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./'],
alias: {
'#assets': './src/assets',
'#modules': './src/modules',
'#config': './src/config',
'#utils': './src/utils',
},
},
],
],
};
And jsconfig.json
{
"compilerOptions": {
"baseUrl": "./src",
"paths": {
"#assets": ["./assets"],
"#modules": ["./modules"],
"#config": ["./config"],
"#utils": ["./utils"]
}
}
}
I changed import for one of my files and this is the error I get when I executed the build command from Xcode
Error: Error loading assets JSON from Metro. Ensure you've followed
all expo-updates installation steps correctly. Unable to resolve
module ../../modules/store/components/Filters from
src/utils/Router.js:
None of these files exist:
Where I imported the file like this
import Filters from '#modules/store/components/Filters';

I had the same problem, I just removed the '#' from my aliases and it seems working fine now.
Here is my babel.config.js
module.exports = function (api) { ■ File is a CommonJS module; it may be converted to an ES6 module.
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: [
[
require.resolve("babel-plugin-module-resolver"),
{
root: ["./src/"],
alias: {
// define aliases to shorten the import paths
components: "./src/components",
containers: "./src/containers",
contexts: "./src/contexts",
interfaces: "./src/interfaces",
organizer: "./src/screens/organizer",
screens: "./src/screens",
},
extensions: [".js", ".jsx", ".tsx", ".ios.js", ".android.js"],
},
],
],
};
};

Try resetting the cache, if above suggested answers don't work
react-native start --reset-cache
This worked for me. For more info see here

Change your module-resolver's root to ['./src/']:
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [
[
'module-resolver',
{
root: ['./src/'], // <-- here ✅
alias: {
'#assets': './src/assets',
'#modules': './src/modules',
'#config': './src/config',
'#utils': './src/utils',
},
},
],
],
};

Absolute imports not working in jest tests (*.test.ts files) [duplicate]

I am setting a configuration to run my tests in a create-react-app + typescript app (from which I have ejected). I am using jest + enzyme. In my tsconfig.json I have set baseUrl='./src' so I can use absolute paths when I import modules. For example this is a typical import statement in one of my files:
import LayoutFlexBoxItem from 'framework/components/ui/LayoutFlexBoxItem';
You can see that the path is absolute (from /src folder) and not relative.
This works fine when I run in debug mode ( yarn start )
But when I run my test ( yarn test ), I get this error:
Cannot find module 'framework/components/Navigation' from 'index.tsx'
So it looks like jest is not able to resolve this absolute path although I have set it up in my tsconfig.json. This is my tsconfig.json:
{
"compilerOptions": {
"outDir": "dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true,
"baseUrl": "./src"
},
"exclude": [
"node_modules",
"build",
"dist",
"config",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
Now I can see that there is a generated tsconfig.test.json at the root of my project. This is the ts configuration used for test. And here is its content:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"module": "commonjs"
}
}
As you can see the "module" is commonjs here whereas in the default configuration it is esnext. Could this be one reason?
Has any one been able to unit test his typescript project with Jest and absolute path? or is this a known bug? Since I have ejected from default configuration, are there some settings to put in my webpack configuration?
Thanks for your input and suggestion.

I was struggling with the same problem and actually it turns out that a simple change seems to do the trick.
I just updated the moduleDirectories field in jest.config.js.
Before
moduleDirectories: ['node_modules']
After
moduleDirectories: ['node_modules', 'src']

As many here pointed out moduleNameMapper in jest.config.js needs to define paths specified in tsconfig.json. For example, if you have paths in tsconfig.json defined as follows
// tsconfig.json
{
...
"baseUrl": "src",
"paths": {
"#alias/*": [ 'path/to/alias/*' ]
}
...
}
then your jest.config.js needs to provide those paths in moduleNameMapper in the following format:
// jest.config.js
module.exports = {
'roots': [
'<rootDir>/src'
],
'transform': {
'^.+\\.tsx?$': 'ts-jest'
},
'moduleNameMapper': {
'#alias/(.*)': '<rootDir>/src/path/to/alias/$1'
}
};
Having that we can improve our jest.config.js to convert paths defined in tsconfig.json automatically. Here is a Gist code snippet for that:
// jest.config.js
function makeModuleNameMapper(srcPath, tsconfigPath) {
// Get paths from tsconfig
const {paths} = require(tsconfigPath).compilerOptions;
const aliases = {};
// Iterate over paths and convert them into moduleNameMapper format
Object.keys(paths).forEach((item) => {
const key = item.replace('/*', '/(.*)');
const path = paths[item][0].replace('/*', '/$1');
aliases[key] = srcPath + '/' + path;
});
return aliases;
}
const TS_CONFIG_PATH = './tsconfig.json';
const SRC_PATH = '<rootDir>/src';
module.exports = {
'roots': [
SRC_PATH
],
'transform': {
'^.+\\.tsx?$': 'ts-jest'
},
'moduleNameMapper': makeModuleNameMapper(SRC_PATH, TS_CONFIG_PATH)
};

Here is how I got moduleNameMapper working.
With the below config in my tsconfig:
"paths": {
"#App/*": [
"src/*"
],
"#Shared/*": [
"src/Shared/*"
]
},
Here's the moduleNameMapper:
"moduleNameMapper": {
"#App/(.*)": "<rootDir>/src/$1",
"#Shared/(.*)": "<rootDir>/src/Shared/$1"
}

Add this following section in your package.json. after you made the changes don't forget to restart your test watchers.
"jest": {
"moduleDirectories": [
"node_modules",
"src"
],
"moduleFileExtensions": [
"js",
"json",
"ts"
],
"roots": [
"src"
],
"testRegex": ".spec.ts$",
"transform": {
"^.+\\.(t|j)s$": "ts-jest"
},
"coverageDirectory": "../coverage",
"testEnvironment": "node",
"moduleNameMapper": {
"src/(.*)": "<rootDir>/src/$1"
}
}

For me, I just needed to add
"modulePaths": ["<rootDir>/src"],
to my jest.config.js file.
Following answer to modify moduleDirectories resulted in this error:
Jest encountered an unexpected token
Jest failed to parse a file. This happens e.g. when your code or its dependencies use non-standard JavaScript syntax, or when Jest is not configured to support such syntax.
Out of the box Jest supports Babel, which will be used to transform your files into valid JS based on your Babel configuration.
By default "node_modules" folder is ignored by transformers.
Here's what you can do:
• If you are trying to use ECMAScript Modules, see https://jestjs.io/docs/ecmascript-modules for how to enable it.
• To have some of your "node_modules" files transformed, you can specify a custom "transformIgnorePatterns" in your config.
• If you need a custom transformation specify a "transform" option in your config.
• If you simply want to mock your non-JS modules (e.g. binary assets) you can stub them out with the "moduleNameMapper" config option.
You'll find more details and examples of these config options in the docs:
https://jestjs.io/docs/configuration
For information about custom transformations, see:
https://jestjs.io/docs/code-transformation
Using:
modulePaths: ["node_modules", "<rootDir>/src"],
From reading the docs it appears that this a list of additional directories and so node_modules is unnecessary.

For those using an absolute path but not using named mappings, this worked for me:
# jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
}
}
# jest.config.js
const config = {
moduleDirectories: ['node_modules', '<rootDir>'],
};

Solution using the best practice
This error occurs because of using absolute paths in the import statements of our TypeScript/Nest.js/Angular projects while using Jest. Fixing it with moduleDirectories and moduleNameMapper options may solve your problem temporarily but it creates issues with other packages such as this TypeORM issue. Also, the creator of the Nest.js framework suggests that using absolute paths is a bad practice. TypeScript's official documentation recommends using relative paths for our own modules. There's also an ESLint rule that explains why absolute paths should be avoided.
Absolute path vs Relative path
import statement with absolute path looks like:
import { AuthService } from 'src/auth/auth.service'
import statement with relative path looks like:
import { AuthService } from '../auth/auth.service'
VS Code Setting
VS Code by default uses absolute path as shown above, when we auto-import using code completion or Command/Ctrl + .. We need to change this default setting to use relative paths.
Go to VS Code settings and search for a setting: Import Module Specifier. Change it from shortest to relative.
Now from here on, VS Code will automatically import using the relative paths.
Fixing imports in the project
Now in the project files, look for the absolute paths in the imports that look like the example above and delete them. You will see errors for the packages that you deleted. Simply use the auto-import suggestions and import them back. This time they will be imported using the relative paths. This step may be tedious depending on the size of your project but it's worth it in the long run.
Hope that works out! Cheers!

ts-jest can resolve this problem perfectly!
https://kulshekhar.github.io/ts-jest/docs/getting-started/paths-mapping#jest-config-with-helper
just modify jest.config.js like this:
const { pathsToModuleNameMapper } = require('ts-jest/utils');
const { compilerOptions } = require('./tsconfig.json');
module.exports = {
// preset is optional, you don't need it in case you use babel preset typescript
preset: 'ts-jest',
// note this prefix option
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, /* { prefix: '<rootDir>/' } */)
}

Here is what worked for me:
npm i -D jest typescript
npm i -D ts-jest #types/jest
npx ts-jest config:init
Then in jest.config.js, here's my setup
module.exports = {
preset: "ts-jest",
testEnvironment: "node",
modulePaths: ["node_modules", "<rootDir>/src"],
};
in my case, I do not have any paths in tsconfig.json but I have baseUrl set to src

If you have intalled ts-jest you can use an util function called pathsToModuleNameMapper to convert the path inside tsconfig.json to your jest.config file:
My jest.config.js file:
const { join } = require('path');
const { pathsToModuleNameMapper } = require('ts-jest')
const { compilerOptions } = require('./tsconfig.json')
/** #type {import('ts-jest/dist/types').InitialOptionsTsJest} */
module.exports = {
rootDir: __dirname,
setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
setupFiles: ['<rootDir>/src/config/env.ts'],
collectCoverageFrom: ["<rootDir>/src/modules/**/*UseCase.ts"],
coverageProvider: "v8",
coverageThreshold: {
global: {
lines: 40
}
},
bail: true,
clearMocks: true,
displayName: 'unit-tests',
testMatch: ["<rootDir>/src/modules/**/*.spec.ts"],
preset: 'ts-jest',
testEnvironment: 'node',
modulePaths: ["<rootDir>/src"],
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
prefix: join('<rootDir>', compilerOptions.baseUrl)
})
};

I've using React with Typescript, I removed react-scripts-ts test --env=jsdom from npm test and added jest --watch as my default test, after I added jest.config.js to my project following these instructions https://basarat.gitbooks.io/typescript/docs/testing/jest.html
and I used the the configuration mentioned by #Antonie Laffargue (add/edit property moduleDirectories: ['node_modules', 'src']), it works perfectly.

I had a similar problem. I hope this could help to spare time for some of you.
My problem:
using create-react-app with typescript
using absolute paths (src/MyComp) to import components inside other components (e.g. App.tsx)
it was working on compile/run/build
it was not working on test
I found that the error was due to a different value of the NODE_PATH. So I set it on tests run.
I recreated the issue and the fix in here: https://github.com/alessandrodeste/...
I'm not sure if this could bring side effects on tests. Let me know if you have feedback ;)

You probably want moduleNameMapper feature of jest config.
It will map your custom import namespaces to real module locations.
see official documentation here:
https://facebook.github.io/jest/docs/en/configuration.html#modulenamemapper-object-string-string

If this happens to you in monorepo here's what fixed the problem for me:
Inside jest.config.js
roots: ["<rootDir>packages"],
moduleNameMapper: {
'#monopre/(.+)$': '<rootDir>packages/$1/src',
},
Assuming you have in tsconfig.json
"paths": {
"#monopre/*": ["packages/*/src"],
}

Adding the following to my jest config in package.json resolved this problem for me.
"moduleDirectories": [
"node_modules",
"src"
]

I use "baseUrl": "./" without any aliases in tsconfig.json
moduleDirectories: ['node_modules', '<rootDir>'] in jest.config.ts worked for me.
Now I can import local modules e.g import { Hello } from "src/modules/hello" without any problems.
jest.config.ts
/*
* For a detailed explanation regarding each configuration property and type check, visit:
* https://jestjs.io/docs/configuration
*/
export default {
clearMocks: true,
collectCoverageFrom: ['**/*.(t|j)s'],
coverageDirectory: 'coverage',
coverageProvider: 'v8',
moduleDirectories: ['node_modules', '<rootDir>'],
moduleFileExtensions: ['js', 'json', 'ts'],
roots: ['src', 'test'],
setupFiles: ['dotenv/config'],
testRegex: ['.*\\.spec\\.ts$'],
transform: {
'^.+\\.(t|j)s$': 'ts-jest',
},
};
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"declaration": true,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"target": "es2017",
"sourceMap": true,
"outDir": "./dist",
"baseUrl": "./",
"esModuleInterop": true,
"incremental": true,
"skipLibCheck": true,
"strictNullChecks": false,
"noImplicitAny": false,
"strictBindCallApply": false,
"forceConsistentCasingInFileNames": false,
"noFallthroughCasesInSwitch": false,
"resolveJsonModule": true
},
"include": ["src/**/*", "src/**/*.json", "test/**/*"]
}

Using Svelte Kit, my solution was:
import { readFileSync } from 'fs';
import pkg from 'ts-jest/utils/index.js';
const { pathsToModuleNameMapper } = pkg;
const { compilerOptions } = JSON.parse(readFileSync('./tsconfig.json'))
export default {
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: ['<rootDir>/**/*.test.ts'],
testPathIgnorePatterns: ['/node_modules/'],
coverageDirectory: './coverage',
coveragePathIgnorePatterns: ['node_modules'],
globals: { 'ts-jest': { diagnostics: false } },
transform: {},
moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, { prefix: '<rootDir>/' }),
}

I had the same problem using StitchesJS, the module was not found, the solution was to put this in my jest.config.js
moduleNameMapper: {
"stitches.config": "<rootDir>/node_modules/#stitches/react/dist/index.cjs"}
You can adapt according to the module you want.

If you have a monorepo where each project has its own tsconfig.json that extends from the base (root) tsconfig.json, and each project has its own jest.config.js, and you launch tests from the project root, you should add your moduleNameMapper to the jest.config.js in the project root.
Eg.
backend/
- tsconfig.json
- jest.config.js
frontend/
- tsconfig.json
- jest.config.js
/
- tsconfig.json
- jest.config.js
And your problem is in the jest tests frontend/ and it has a tsconfig like:
{
"compilerOptions": {
"jsx": "react-native",
"paths": {
"src/*": ["client/src/*"]
},
"noEmit": true
},
"extends": "../tsconfig.json"
}
Then adding this to the root jest.config should fix the issue:
moduleNameMapper: {
'src/(.*)': '<rootDir>/client/src/$1',
},
So in total, something like:
module.exports = {
testEnvironment: 'node',
testRegex: '(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$',
testPathIgnorePatterns: ['cdk.out/'],
transform: {
'^.+\\.tsx?$': 'ts-jest',
},
modulePathIgnorePatterns: ['tests'],
globals: {
'ts-jest': {
isolatedModules: true,
},
},
moduleNameMapper: {
'src/(.*)': '<rootDir>/client/src/$1',
},
};
Sort of obvious, but adding this answer since I didn't see this case in the other answers, and monorepos are still a thing :)

Kind of an old thread but recently, on top of the other suggestions of adding the paths on "moduleNameMapper": on jest.config.js and "paths": on tsconfig.json, I also had to include my test folder so the compiler could recognize it.
So on tsconfig.json, add:
...
"include": ["src", "__tests__"],
...
Hope it helps on someone googling for it 😉

VueJs Module build failed: Error: Couldn't find preset "#vue/app" relative to directory

I'm using vue-tour in my app, the problem is that when i imported the library my app doesn't work anymore, this the error when i try the command npm run dev:
error in ./~/vue-tour/dist/vue-tour.umd.js
Module build failed: Error: Couldn't find preset "#vue/app" relative to directory "C:\\xampp\\htdocs\\avanttia\\node_modules\\vue-tour"
at C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:293:19
at Array.map (<anonymous>)
at OptionManager.resolvePresets (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:275:20)
at OptionManager.mergePresets (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:264:10)
at OptionManager.mergeOptions (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:249:14)
at OptionManager.init (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\options\option-manager.js:368:12)
at File.initOptions (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\index.js:212:65)
at new File (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\file\index.js:135:24)
at Pipeline.transform (C:\xampp\htdocs\avanttia\node_modules\babel-core\lib\transformation\pipeline.js:46:16)
at transpile (C:\xampp\htdocs\avanttia\node_modules\babel-loader\lib\index.js:46:20)
at Object.module.exports (C:\xampp\htdocs\avanttia\node_modules\babel-loader\lib\index.js:163:20)
# ./resources/assets/js/wizard/main.js 49:15-34
# multi ./resources/assets/js/wizard/main.js
Importing the library like this:
import '#/bootstrap'
import VueDragDrop from 'vue-drag-drop'
import VueTour from 'vue-tour'
import Wizard from '#/wizard/containers/Wizard.vue'
require('/node_modules/vue-tour/dist/vue-tour.css')
const Vue = window.Vue
Vue.use(VueTour)
Vue.use(VueDragDrop)
const vm = new Vue({
el: '#wizard-app',
render: h => h(Wizard)
})
export default vm
Edit:
This is mi .babelrc config file:
{
"presets": [
[ "env", {
"targets": {
"uglify": true,
"node": "current"
},
"modules": false,
"loose": true,
"useBuiltIns": true,
"debug": true,
}]
],
"plugins": [
["component", [{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}]],
["module-resolver", {
"alias": {
"#": "./resources/assets/js"
}
}],
["transform-es2015-template-literals", {
"loose": true,
"spec": true
}]
],
}
and the .babelrc config file from the vue-tour library:
{
"presets": [
"#vue/app"
]
}
Why vue can't find #vue/app?, looks like there is a conflict in the alias property, but i have no idea how to change without breaking the project config.
update:
if in the node_modules/vue-tour library i change the .babalrc file to this:
"presets": [
"es2015"
]
it works as expected, but this is undesired as i have to change everywhere i have to deploy this project.

After days struggling with this issue, i finally found a solution for this:
In the webpack.mix.js the es2015 transpilation was done like this:
{
test: /\.js$/,
exclude: /node_modules\/(?!(some-library)\/).*/,
include: [/node_modules\/vue-tour/], // <---Added this line!
use: {
loader: 'babel-loader',
options: {
presets: ['env']
}
}
}

eslint error showing with webpack alias

In my webpack config. I defined aliases
alias: {
components: 'src/components/',
config: 'src/config/'
}
When I import a module from this path an eslint error occurred.
import ShadowWrapper from 'components/ShadowWrapper'
error 'components' should be listed in the project's dependencies. Run 'npm i -S components' to add it import/no-extraneous-dependencies

Thanks, Pranav for the solution to this issue!
I add some code to this post to make it more practical for others.
First of all, in webpack config file I had defined this alias:
alias:{
components: path.resolve(__dirname, "src", "components")
}
That allow me to import components in my app in that way:
import NewsFeed from 'components/NewsFeed'
I have installed eslint-import-resolver-webpack plugin and put below code into .eslintrc.js or .eslintrc file :
settings: {
'import/resolver': {
alias: {
map: [
['components', './src/components']
]
}
}
That's it after running linter I got rid of Unable to resolve path to module 'components/NewsFeed' error message
Hope it will be helpful for some of you!

Here is what worked for me:
I installed eslint-import-resolver-alias as dev dependency:
npm install eslint-plugin-import eslint-import-resolver-alias --save-dev
In the Webpack config (in my case, it was Vue config, which is merged with Webpack config by Vue-cli), I added a few aliases:
resolve: {
extensions: ['.js', '.vue', '.json', '.less'],
alias: {
Site: path.resolve(__dirname, 'src/site'),
Admin: path.resolve(__dirname, 'src/admin'),
Common: path.resolve(__dirname, 'src/common'),
Assets: path.resolve(__dirname, 'src/common/assets'),
Configs: path.resolve(__dirname, 'src/common/configs'),
Style: path.resolve(__dirname, 'src/common/style')
}
}
In the .eslintsrc (or .eslintsrc.js, if you use that), I added the plugin and maps for these aliases, as follows:
"extends": ["plugin:import/recommended"],
"settings": {
"import/resolver": {
"alias": {
"map": [
["Site", "./src/site"],
["Admin", "./src/admin"],
["Common", "./src/common"],
["Assets", "./src/common/assets"],
["Configs", "./src/common/configs"],
["Style", "./src/common/style"]
]
},
"extensions": [".js", ".less", ".json", ".vue"]
}
}
I have added extensions for clarity and some good measures, which you can choose to not use for yourself.
Optional:
If you use VS Code and want these aliases working with the path intellisense, add a file jsconfig.json at the root, and specify your alias paths:
{
"compilerOptions": {
"target": "esnext",
"allowSyntheticDefaultImports": false,
"baseUrl": "./",
"paths": {
"~/*": ["src/*"],
"Root/*": ["src/*"],
"Site/*": ["src/site/*"],
"Admin/*": ["src/admin/*"],
"Common/*": ["src/common/*"],
"Assets/*": ["src/common/assets/*"],
"Configs/*": ["src/common/configs/*"],
"Style/*": ["src/common/style/*"]
}
},
"exclude": ["node_modules", "dist"]
}
There are additional settings for React and Typescript. Check the documentation at official site.

This issue can be resolved by using the eslint-import-resolver-webpack

Another way, without mapping aliases between webpack.config.js and .eslintrc.
You can use eslint-import-resolver-webpack and setup you .eslintrc file like this:
{
"extends": [
"plugin:import/recommended"
],
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"],
"moduleDirectory": [
"node_modules",
"src"
]
}
}
}
}

When publishing NPM package I get an empty object my setup is (ES6,Babel,Webpack,React,Redux,Sagas)

Maybe somebody can help me with this.
I try to publish npm package with the following configuration:
webpack:
production: {
entry: [
'./src',
'./src/app.scss',
'draft-js/dist/Draft.css'
],
devtool: "source-map",
output: {
path: path.join(__dirname, 'lib'),
filename: 'stewie-editor.js',
library: 'stewie-editor',
libraryTarget: 'umd',
umdNamedDefine: true
}
},
package.json section dealing with library publishing
"main": "lib/stewie-editor.js",
"files": [
"lib",
"src"
],
My src/index.js file looks like this
import EditorComponent from 'EditorComponent';
import EditorFactory from 'EditorFactory';
export {
EditorFactory,
EditorComponent
}
.babelrc
{
"presets": ["es2015", "stage-2", "react"],
"plugins": ["babel-plugin-add-module-exports"],
"env": {
"test": {
"plugins": [
["css-modules-transform", {
"generateScopedName": "[name]__[local]",
"extensions": [".css", ".scss"]
}]
]
},
"dev": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}
I looked at the following example and there everything is working.
strangely with my setup things don't work
In a different project when I install stewie-editor npm package and import exported classes from the package like so:
import { EditorFactory } from 'stewie-editor';
I get undefined. When I try to look at the contents of the whole package importing it like so:
import stewie from 'stewie-editor';
I get an empty Object.
Your help will be very appreciated.

The empty object is as a result of a missing keyword in your index.js file: default.
You can fix this by rewriting the index.js file to:
export default {
EditorFactory,
EditorComponent
}

Well I figured out what was the problem. Adding scss and .css in webpack entry point resulted in an empty object. So I removed them from entry point and added as imports inside my EditorComponent.js file. That fixed the issue. Everything got exported.