import file's content as string

[sophister]

Do you want to request a feature or report a bug?

maybe a feature

What is the current behavior?

I've setup .babelrc to add babel-plugin-inline-import which enables we to import file content into js, such as import doc from './button.story.md'. But metro throw errors before babel-plugin-inline-import get loaded. And my .babelrc content is:

{
    "presets": ["module:metro-react-native-babel-preset"],
    "plugins": [
        [
            "inline-import",
            {
                "extensions": [".md", ".text", ".txt"]
            }
        ],
        [
            "module-resolver",
            {
                "root": ["./src"],
                "alias": {}
            }
        ]
    ]
}

metro throws error as following:

error: bundling failed: Error: Unable to resolve module `./button.spec.md` from `/Users/jess/jess/renrendai/source/rrd-react-native/storybook/stories/button.story.js`: The module `./button.spec.md` could not be found from `/Users/jess/jess/renrendai/source/rrd-react-native/storybook/stories/button.story.js`. Indeed, none of these files exist:
  * `/Users/jess/jess/renrendai/source/rrd-react-native/storybook/stories/button.spec.md(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
  * `/Users/jess/jess/renrendai/source/rrd-react-native/storybook/stories/button.spec.md/index(.native||.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)`
    at ModuleResolver.resolveDependency (/Users/jess/jess/renrendai/source/rrd-react-native/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:123:15)
    at ResolutionRequest.resolveDependency (/Users/jess/jess/renrendai/source/rrd-react-native/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:49:18)
    at DependencyGraph.resolveDependency (/Users/jess/jess/renrendai/source/rrd-react-native/node_modules/metro/src/node-haste/DependencyGraph.js:218:16)
    at Object.resolve (/Users/jess/jess/renrendai/source/rrd-react-native/node_modules/metro/src/lib/transformHelpers.js:141:30)
    at dependencies.map.result (/Users/jess/jess/renrendai/source/rrd-react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:373:31)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/jess/jess/renrendai/source/rrd-react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:369:18)
    at /Users/jess/jess/renrendai/source/rrd-react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:188:33
    at Generator.next (<anonymous>)
    at step (/Users/jess/jess/renrendai/source/rrd-react-native/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:30)
 BUNDLE  [android, dev] ./index.js ▓▓▓░░░░░░░░░░░░░ 19.1% (509/1166), failed.

What is the expected behavior?

The babel-plugin-inline-import can replace import statement with target file's content as string.

Please provide your exact Metro configuration and mention your Metro, node, yarn/npm version and operating system.

• metro version: 0.48.5
• node version: v10.14.1
• npm version: 6.4.1
• OS: macOS 10.14.3

[cpojer]

You’ll need to create a metro.config.js in your repository and add .md extensions to your setup, then this should work.

[sophister]

thx for your reply. I've setup metro.config.js like this:

const metroDefault = require('metro-config/src/defaults/defaults.js');

module.exports = {
    resolver: {
        assetExts: metroDefault.assetExts.concat(['md']),
    },
};

and NO error occur, but in the bundle, .md is treated as an image, seems like babel-plugin-inline-import does not work on it.

var _buttonSpec = _interopRequireDefault(_$$_REQUIRE(_dependencyMap[5], \"./button.spec.md\"));

[Inori-Lover]

@sophiebits try sourceExts but not assetExts ?