feats / babel-plugin-inline-import Goto Github PK
View Code? Open in Web Editor NEWinline the raw content of import statements
Home Page: https://www.npmjs.com/package/babel-plugin-inline-import
License: MIT License
inline the raw content of import statements
Home Page: https://www.npmjs.com/package/babel-plugin-inline-import
License: MIT License
There is currently no link to the repo from the package description at npmjs.org.
There just needs to be a repository key added to the package.json file:
"repository": {
"type": "git",
"url": "git://github.com/Quadric/babel-plugin-inline-import.git"
},
hi, I've setup .babelrc
like this:
{
"presets": ["module:metro-react-native-babel-preset"],
"plugins": [
[
"inline-import",
{
"extensions": [".md", ".text", ".txt"]
}
],
[
"module-resolver",
{
"root": ["./src"],
"alias": {}
}
]
]
}
But cli throw error as below:
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:120: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 ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.
^^
Hello
Thanks for creating this plugin :)
Can this plugin have ability to import graphql files inside the graphql file?
Like adding a additional ability for importing .gql and .graphql files.
./attachment.graphql
fragment attachmentFragment on Attachment {
id
url
thumbnailUrl
}
./user.graphql
#import "./attachment.graphql"
fragment userFragment on User {
id
nick
avatar {
...attachmentFragment
}
}
fragment userFragment on User {
id
nick
avatar {
...attachmentFragment
}
}
fragment attachmentFragment on Attachment {
id
url
thumbnailUrl
}
for example, I have a file: modules/my-module/index.js
, where
export { default as schema } from './schema.graphqls';
and get
var err = new SyntaxError(message);
^
Of course, I can do that
import schema from './schema.graphqls';
export { schema };
but it doesn't look good
Currently, using babel-plugin-inline-import
results in import errors for me:
src/file.js:4
4: import bla from "./bla.txt";
^^^^^^^^^^^ ./bla.txt. Required module not found
Is there a way to use this plugin that's compatible with Flow?
We am looking for someone who could do just the most basic maintenance of the project.
I keep getting requests to publish new versions, but I don't even use this plugin anymore, thus it feels wrong to me to judge what should be added to it or not. 😕
Is there anyone who like to take the lead here?
When attempting to import a binary file and convert it back into a Buffer
, the bytes get changed.
To reproduce, clone https://github.com/chaimleib/bug-inline-import-mangles-binary, then run
yarn
yarn test
resolve
has zero deps and is extremely well tested and comes from a well known author
I would like to inline the json file in react-intl/local-data/*.js
Is there an option to limit babel-inline to just this folder?
Thanks for this useful plugin!
I recently ran into caching issue as well, and it took quite some search to figure out what is happening: #7 #15
when used with babel-register
as in node -r babel-register index.js
, some how nod always load an older version of the markdown file I'm reading. Even after restarting the node process.
Can we:
importing
and imported
are. I still don't know what is happening and why babel-register
has problem with cached file content event after restarting the node process. Would you mind explain what is causing the problem above?Best Regards
importing a file without assigning it to a variable causes an error TypeError: Cannot read property 'local' of undefined
import './example.txt';
Hi and thanks for this useful Babel plugin!
I am having trouble debugging my Node graphql server app because the build/index.js
file in the npm installation has a debugger;
statement in line 21 which is causing my debugger to stop there for every import statement I have that the plugin is configured to handle.
Can you please re-publish to npm? The debugger;
statement isn't in your source code on GitHub so it seems to me it was a mistake that the last published version had it in there and you've since removed it from the source but didn't publish since?
it keeps loading the older version of .graphql
OS: Windows 10
I'm running npm run dev
from the command-line.
package.json
:
{
...
"scripts": {
"dev": "nodemon ./server.js --watch ./ --exec babel-node"
},
...
}
babel.rc
:
{
"presets": ["es2015"],
"plugins": ["babel-plugin-inline-import", {
"extensions": [".gql"]
}]
}
Error:
...\node_modules\babel-core\lib\transformation\plugin.js:131
throw new Error(messages.get("pluginInvalidProperty", loc, i, key));
^
Error: Plugin 1 specified in "...\\.babelrc" provided an invalid property of "extensions"
at Plugin.init (...\node_modules\babel-core\lib\transformation\plugin.js:131:13)
at Function.normalisePlugin (...\node_modules\babel-core\lib\transformation\file\options\option-manager.js:148:12)
at ...\node_modules\babel-core\lib\transformation\file\options\option-manager.js:180:30
at Array.map (native)
at Function.normalisePlugins (...\node_modules\babel-core\lib\transformation\file\options\option-manager.js:154:20)
at OptionManager.mergeOptions (...\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:36)
at OptionManager.init (...\node_modules\babel-core\lib\transformation\file\options\option-manager.js:374:12)
at compile (...\node_modules\babel-register\lib\node.js:103:45)
at loader (...\node_modules\babel-register\lib\node.js:144:14)
at Object.require.extensions.(anonymous function) [as .js] (...\node_modules\babel-register\lib\node.js:154:7) [nodemon] app crashed - waiting for file changes before starting...
I have BABEL_DISABLE_CACHE=1
set and I've tried setting cacheDirectory: false
and neither option helps (as expected since the comment is missing from the output).
.babelrc contents:
{
"presets": [
[
"env", {
"targets": {
"browsers": [
"last 2 Chrome versions"
]
},
"modules": "umd"
}]
],
"plugins": [
[
"babel-plugin-inline-import", {
"extensions": [
".css"
]
}
],
[
"transform-incremental-dom", {
"moduleSource": "incremental-dom"
}
],
["transform-class-properties"]
],
"env": {
"test": {
"plugins": [
["istanbul", {
"exclude": [
"tests/**/*"
]
}]
]
},
"production": {
"presets": ["babili"]
}
}
}
webpack.config.js:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: './docs/index.js',
devtool: 'inline-source-map',
output: {
path: __dirname + '/docs/generated',
filename: 'docs.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: [
'babel-inline-import-loader',
'babel-loader'
]
}
]
},
plugins: [
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'docs/template.html'
})
]
}
input code:
import Component from '../../component'
import styles from './styles.css'
customElements.define('wc-button', class WcButton extends Component {
renderCss () {
super.renderCss()
return (
<style>
{styles}
</style>
)
}
render () {
return <button><slot /></button>
}
})
relevant output:
const styles = 'button {\n background: red;\n}\n';
customElements.define('wc-button', class WcButton extends _component2.default {
renderCss() {
super.renderCss();
(0, _incrementalDom.elementOpen)('style');
_renderArbitrary(styles);
return (0, _incrementalDom.elementClose)('style');
}
render() {
(0, _incrementalDom.elementOpen)('button');
(0, _incrementalDom.elementVoid)('slot');
return (0, _incrementalDom.elementClose)('button');
}
});
if you use react-native start --projectRoot storybook
and have a local import in that folder that uses babel-plugin-inline-import, the resolved path will be wrong and the import will fail.
e.g. in file storybook/storybook.js you have this:
import schema from './schema.graphql'
this will throw
bundling failed: Error: Path './schema.graphql' could not be found for '/path/to/project/storybook.js'
The path /path/to/project/storybook.js
is suspicious, because this does not exist. it should be /path/to/project/storybook/storybook.js
so i think the resolving of files is wrong
There seems to be some sort of caching going on. It doesn't seem to realize the .graphql file has changed unless I rename the filename.
I've had this happen on 3 separate projects.
I use the v3 plugin with webpack. The Firefox browser console throws a warning stating my js is loaded, but has a wrong mime-type: Het script van ‘http://localhost:3000/’ is geladen, hoewel het MIME-type ervan (‘text/html’) geen geldig JavaScript-MIME-type is
.
The warning translates to The script is loaded, although its MIME-type (‘text/html’) is not a valid JavaScript-MIME-type
.
The .babelrc:
{
"presets": [ "@babel/preset-env"],
"plugins": [
["babel-plugin-inline-import", {"extensions": [".html"]}]
]
}
The javascript:
import html from './template.html';
console.log(html);
My code works. Webkit browsers don't show this warning, Firefox does though.
babel 7 republished under different name.
Hi @zvictor,
Thank you for your work, that's a nice plugin and works great, but I think I've spotted a problem. A schema files are cached after first run and will not updated unless you remove ~/.babel.json file.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.