Can't make it work on React

[ziyafenn]

Hi there. I had no problem running this plugin with React Native, but with react i always get Module not found: Can't resolve './myFolder'

Here is my .babelrc

{
  "plugins": ["wildcard"],
  "presets": ["react"]
}

and my package.json

  "dependencies": {
    "babel-plugin-wildcard": "^5.0.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  }

Thanks.

[vihanb]

Can you share folder structure ?

[bmbmjmdm]

I'm having the same problem with React Native

Nearly identical package.json and .babelrc

Using in file FileManager.js. Line is: import * as ARoomFiles from '../ARoom';

Folder structure is ARoom ___ARoom.js ___NextRoom.js FileManager ___FileManager.js package.json .babelrc

Error message:

Unable to resolve module '../ARoom' from 'C:\path\to\FileManager\FileManger.js': The module '../ARoom' could not be found from 'C:\path\to\FileManager\FileManger.js'. Indeed, none of these files exist:\n\n * 'C:\path\to\ARoom(.native||.android.js|.native.js|.js|.android.json|.native.json|.json)'

[vihanb]

hmm, this looks like the plugin is not being run. Are you able to verify other babel plugins are being run? My best guess is the build system isn't picking up on the wildcard plugin

[bmbmjmdm]

Hey looks like you were right, after running

watchman watch-del-all npm start -- --reset-cache

it built successfully. I then ran it a few times and, unfortunately, started having a different problem seemingly out of nowhere.

C:\path\to\node_modules\babel-plugin-wildcard\lib\index.js: Couldn't find preset 'es2015' relative to directory 'C:\path\to\node_modules\babel-plugin-wildcard'

I ran the above commands again and even reinstalled node_modules completely, but the error remains

[vihanb]

@bmbmjmdm are you running babel7 by any chance

[vihanb]

Unusual given that this plugin lnly jses the fs and path deps

[bmbmjmdm]

actually I (oddly enough) have 2 different types of babel in node_modules. Apparently React Native depends on things like babel-core but also @babel/core, which can have different versions. This is all by default, mind you.

snippets from package-lock.json

"babel-core": { "version": "6.26.3", "resolved": "https://registry.npmjs.org/babel-core/-/babel-core-6.26.3.tgz", "integrity": "sha512-6jyFLuDmeidKmUEb3NM+/yawG0M2bDZ9Z1qbZP59cyHLz8kYGKYwpJP0UwUKKUiTRNvxfLesJnTedqczP7cTDA==", "requires": { "babel-code-frame": "6.26.0", "babel-generator": "6.26.1", "babel-helpers": "6.24.1", "babel-messages": "6.23.0", "babel-register": "6.26.0", "babel-runtime": "6.26.0", "babel-template": "6.26.0", "babel-traverse": "6.26.0", "babel-types": "6.26.0", "babylon": "6.18.0", "convert-source-map": "1.5.1", "debug": "2.6.9", "json5": "0.5.1", "lodash": "4.17.10", "minimatch": "3.0.4", "path-is-absolute": "1.0.1", "private": "0.1.8", "slash": "1.0.0", "source-map": "0.5.7" }, "dependencies": { "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }

"@babel/core": { "version": "7.0.0-beta.51", "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.0.0-beta.51.tgz", "integrity": "sha1-DlS9a2OHNrKuWTwxpH8JaeKyuW0=", "requires": { "@babel/code-frame": "7.0.0-beta.51", "@babel/generator": "7.0.0-beta.51", "@babel/helpers": "7.0.0-beta.51", "@babel/parser": "7.0.0-beta.51", "@babel/template": "7.0.0-beta.51", "@babel/traverse": "7.0.0-beta.51", "@babel/types": "7.0.0-beta.51", "convert-source-map": "1.5.1", "debug": "3.1.0", "json5": "0.5.1", "lodash": "4.17.10", "micromatch": "3.1.10", "resolve": "1.8.1", "semver": "5.5.0", "source-map": "0.5.7" }, "dependencies": { "debug": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz", "integrity": "sha512-OX8XqP7/1a9cqkxYw2yXss15f26NKWBpDXQd0/uK/KPqdQhxbPa994hnzjcE2VqQpDslf55723cKPUOGSmMY3g==", "requires": { "ms": "2.0.0" } }, "source-map": { "version": "0.5.7", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=" } } }

the wildcard plugin appears in node modules as babel-plugin-wildcard, on the same level as babel-core and the @babel folder.

[bmbmjmdm]

I resolved the es2015 error by installing the preset, apparently it wasn't installed as one of babel-plugin-wildcard's dependencies. Now I'm getting this error:

The package at "C:\path\to\node_modules\babel-plugin-wildcard\lib\index.js" attempted to import the Node standard library module "path". It failed because React Native does not include the Node standard library. Read more at https://docs.expo.io/versions/latest/introduction/faq.html#can-i-use-nodejs-packages-with-expo

[vihanb]

Hmm, are you using a babel.config.js file?

[ghost]

@vihanb it works with babel 7?

[ghost]

I have a similar problem with react-native 0.57.2 and babel 7, I didn't get any error but not worked, did it import nothing

[vihanb]

@vxcamiloxv how are you running babel? are you using webpack/parcel/something else? or are you directly running using babel cli?

[vihanb]

one reason that could happen is the path is incorrect, can you post exact import statement along with directory strutcure?

[ghost]

[email protected] in storybook/[email protected] and [email protected]

• the import index.index.js:

import * as icons from '.'; // also I tried with './*.js' and 'js/.*js'

export default icons;

• structure:

- icons/
  - index.native.js
  - alarmOn.js
  - alarmOff.js
  ...

• .babelrc

{
  "presets": [
    "@babel/react",
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    "dynamic-import-node",
    "react-hot-loader/babel",
    "babel-plugin-wildcard",
    "@babel/transform-flow-strip-types",
    ["@babel/proposal-decorators", { "legacy": true }],
    ["@babel/proposal-class-properties", { "loose" : true }],
    "@babel/proposal-object-rest-spread",
    "@babel/transform-object-assign",
    "@babel/transform-runtime"
  ]
}

• package.json

  "devDependencies": {
    "@storybook/addons": "^4.0.0-rc.1",
    "@storybook/addon-actions": "^4.0.0-rc.1",
    "@storybook/addon-info": "^4.0.0-rc.1",
    "@storybook/addon-links": "^4.0.0-rc.1",
    "@storybook/react": "^4.0.0-rc.1",
    "@storybook/react-native": "^4.0.0-rc.1",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "metro-react-native-babel-preset": "^0.48.1",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@babel/core": "^7.1.2",
    "@babel/cli": "^7.1.2",
    ....
  }

I tried with babel-plugin-wildcard in different positions on .babelrc, I didn't get any error but not worked, it didn't imported nothing

[dallasclark]

Thanks @bmbmjmdm for the clear tip, using expo I fixed my babel-plugin-wildcard issue by running:

watchman watch-del-all
expo start --clear

[yunusyuksel]

[email protected] in storybook/[email protected] and [email protected]

• the import index.index.js:

import * as icons from '.'; // also I tried with './*.js' and 'js/.*js'

export default icons;

• structure:

- icons/
  - index.native.js
  - alarmOn.js
  - alarmOff.js
  ...

• .babelrc

{
  "presets": [
    "@babel/react",
    "module:metro-react-native-babel-preset"
  ],
  "plugins": [
    "dynamic-import-node",
    "react-hot-loader/babel",
    "babel-plugin-wildcard",
    "@babel/transform-flow-strip-types",
    ["@babel/proposal-decorators", { "legacy": true }],
    ["@babel/proposal-class-properties", { "loose" : true }],
    "@babel/proposal-object-rest-spread",
    "@babel/transform-object-assign",
    "@babel/transform-runtime"
  ]
}

• package.json

  "devDependencies": {
    "@storybook/addons": "^4.0.0-rc.1",
    "@storybook/addon-actions": "^4.0.0-rc.1",
    "@storybook/addon-info": "^4.0.0-rc.1",
    "@storybook/addon-links": "^4.0.0-rc.1",
    "@storybook/react": "^4.0.0-rc.1",
    "@storybook/react-native": "^4.0.0-rc.1",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "babel-loader": "^8.0.4",
    "babel-plugin-dynamic-import-node": "^1.2.0",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
    "@babel/plugin-transform-object-assign": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.1.0",
    "@babel/plugin-transform-flow-strip-types": "^7.0.0",
    "@babel/plugin-proposal-decorators": "^7.0.0",
    "@babel/plugin-transform-runtime": "^7.1.0",
    "metro-react-native-babel-preset": "^0.48.1",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "^7.0.0",
    "@babel/core": "^7.1.2",
    "@babel/cli": "^7.1.2",
    ....
  }

I tried with babel-plugin-wildcard in different positions on .babelrc, I didn't get any error but not worked, it didn't imported nothing

could you fix that problem ? I get example same error